Наступление события без наведения мыши
P.S. Столкнулся с js сегодня первый раз. Cпасибо за минусы, вот как вы к новичкам))
Имеем скрипт, который срабатывает при наведении. Поднимает div c текстом. И убирает, как убираем мышь. Возможно выполнить без mouseenter, а сразу при загрузке страницы?
c.bind(
{
mouseenter:function()
}
(function(d)
{
var e=function(){};
d.extend(e.prototype,
{
name:"spotlight",options:{effect:"fade",duration:300,transition:"swing",cls:"spotlight",overlaySelector:".overlay",overlayDefault:"overlay-default"},initialize:function(c,a)
{
a=d.extend({},this.options,a,c.data());
c.attr("data-spotlight")&&d.each(c.attr("data-spotlight").split(";"),
function(b,c)
{
var d=c.match(/\s*([A-Z_]*?)\s*:\s*(.+)\s*/i);
d&&(a[d[1]]=d[2])
});
var b=c.children(a.overlaySelector).first();
b.length||(b=d("<div>").addClass(a.overlayDefault).appendTo(c));
b.css(
{
position:"absolute",visibility:"hidden",display:"block"
}).wrapInner("<div>");
c.css(
{
position:"relative",overflow:"hidden"
}).addClass(a.cls);
c.bind(
{
mouseenter:function()
{
b.stop().css({visibility:"visible",width:c.width(),height:"top"==a.effect||"bottom"==a.effect?"auto":c.height()});
switch(a.effect)
{
case "right":b.css({right:-1*b.width(),top:0,bottom:0}).animate({right:0},a.duration,a.transition);
break;case "left":b.css({left:-1*b.width(),top:0,bottom:0}).animate({left:0},a.duration,a.transition);
break;case "top":b.css({left:0,top:-1*b.height()}).animate({top:0},a.duration,a.transition);
break;case "bottom":b.css({left:0,bottom:35-1*b.height()}).animate({bottom:0},a.duration,a.transition);
break;default:b.show().css({opacity:0,top:0,left:0}).animate({opacity:1},a.duration,a.transition,
function()
{
d.support.opacity||(b.get(0).filter="",b.attr("style",(""+b.attr("style")).replace(/alpha\(opacity=([\d.]+)\)/i,"")))
})
}
},
mouseleave:function()
{
b.stop();
switch(a.effect)
{
case "right":b.animate({right:-1*b.width()},a.duration,a.transition);
break;case "left":b.animate({left:-1*b.width()},a.duration,a.transition);
break;case "top":b.animate({top:-1*b.height()},a.duration,a.transition);
break;case "bottom":b.animate({bottom:35-1*b.height()},a.duration,a.transition);
break;default:b.animate({opacity:0},a.duration,a.transition,
function(){b.hide()})
}
}
})
}
});d.fn[e.prototype.name]=function(){var c=arguments,a=c[0]?c[0]:null;
return this.each(function(){var b=d(this);
if(e.prototype[a]&&b.data(e.prototype.name)&&
"initialize"!=a)b.data(e.prototype.name)[a].apply(b.data(e.prototype.name),Array.prototype.slice.call(c,1));
else if(!a||d.isPlainObject(a))
{
var f=new e;e.prototype.initialize&&f.initialize.apply(f,d.merge([b],c));b.data(e.prototype.name,f)
}
else d.error("Method "+a+" does not exist on jQuery."+e.name)})}
})(jQuery);
|
и вот ты думаешь нам делать нечего как его приводить в нормальный вид, а потом еще думать как помочь??
приведи в нормальный вид, я уже писал (и не только я) по этому поводу: http://javascript.ru/forum/misc/9459...tml#post262341 |
Цитата:
Готов заплатить |
Цитата:
|
а ответить не гож?)
добавь что ли на $(document).ready(function(){ вот сюда пихай то, что должно делаться при загрузке страницы }); |
п.с. ну вот лучше на такой код смотреть то...
>>>Возможно выполнить без mouseenter, а сразу при загрузке страницы? конечно можно. вынесите эту функцию и присвойте ей имя, примерно так:
var func_mouseenter = function()
{
b.stop().css({visibility:"visible",width:c.width(),height:"top"==a.effect||"bottom"==a.effect?"auto":c.height()});
switch(a.effect)
...
}
}
а когда биндите, то делайте так:
...
c.bind(
{
mouseenter: func_mouseenter,
mouseleave:function()
...
и при загрузке вызываем эту функцию: func_mouseenter(); ничего сложного)) |
а проблем с локальным объявлением функции не будет?
|
если так боитесь за видимость, то переменную можно объявить вообще за пределами jquery, а в jquery присвоить ей функцию. А вообще имхо не должно..
попробуйте, если будет ругаться, пишите.. будем вместе разбираться |
Никаких скриптов:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
.myDiv {
background: #777;
border: 1px silid #CCC;
border-radius: 20px;
color: #DDD;
font-size: 18pt;
font-weight: bold;
height: 70px;
left: 50%;
margin-left: -150px;
padding-top: 30px;
position: fixed;
text-align: center;
top: 100px;
transition: top 0.5s;
-moz-transition: top 0.5s;
-o-transition: top 0.5s;
-webkit-transition: top 0.5s;
width: 300px;
}
.myDiv:hover {
cursor: pointer;
top: 20px;
}
</style>
</head>
<body>
<div class="myDiv">Наведи на меня!</div>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 09:49. |