页面右下角弹层自定义动画方法鼠标位置获取两级联动84课件讲解.pptxVIP

13.3.5-13.3.8

页面右下角弹层、自定义动画方法、鼠标位置获取、两级联动

;一、页面右下角弹层;#div1{

position:absolute;

right:3px;

bottom:0px;

width:200px;

height:150px;

border:1pxsolid#ccc;

background:#f0f0f0;

display:none;

};$(function(){

$(#div1).slideDown(1000,function(){

setTimeout(function(){

$(#div1).slideUp(1000);

},3000)

});

})

;二、自定义动画方法;1.自定义简单动画

在下面的实例中，初始化有一个类别名为test的div标签，设置了div的样式，当div元素被单击后，能在页面上移动而且div放大，为了使这个标签能够移动，需要改变标签的“left”样式属性，为了放大还要改变“width”和“height”样式属性。首先给class为test的div绑定一个单击事件，然后对元素加入animate()，是元素在2秒内向右移动200px。

body

divclass=test/div

/body

;styletype=text/css

.test{

background:#98bf21;

height:100px;

width:100px;

position:absolute;

}

/style;$(function(){

$(.test).click(function(){

$(.test).animate({left:200px,width:200px,height:200px},2000);

});

});

;2.累加、累减动画

在上面的代码中，参数为{left:200px,width:200px,height:200px},当单击div时，不会变化，如果在200px之前加上“+=”时，就是位置的累加，再单击div标签时，div又会向右边移动200px。

$(function(){

$(.test).click(function(){

$(.test).animate({left:+=200px,width:200px,height:200px},2000);

});

});

;3.动画回调函数

在下面的实例中，当鼠标单击div标签时，在2秒内div向右移动的同时并且放大，2秒后向左移动的同时又进行缩小，这就用到了回调函数，在回调函数中完成回到原来的位置。

$(function(){

$(.test).click(function(){

$(.test).animate({left:200px,width:200px,height:200px},2000);

$(.test).animate({left:0px,width:100px,height:100px},2000);

});

});

;三、鼠标位置获取;body

divid=div1/div

/body

styletype=text/css

#div1{

width:500px;

height:300px;

font-size:35px;

border:5pxsolidorange;

}

/style

;scripttype=text/JavaScript

varx=0;

vary=0;

$(function(){

$(#div1).mousemove(function(e){

x=e.pageX;

y=e.pageY;

$(#div1).html(X:+x+--Y