jQuery实现的div层的衰落和拖动效果 浏览:231

本文的示例说明了jQuery实现div层褪色和拖动的方法,供大家参考,具体实现方法如下:

复制代码代码如下所示:





jQuery实现了div层的淡入淡出效果。



#格式

{

位置:绝对;

宽度:400px;

身高:300px;

边境:1px solid # 333333;

背景颜色:# 777788;

文本对齐:中心;

线高度:400%;

字体大小:13px;

左:80px;

Top:20px;

}







无功_move = false; / /移动标签

无功_x,_y; / /鼠标从控件的左上角的相对位置

$(文档)Ready(函数(){)

$(# DIV2)。Click(function(){)

警报();单击释放触发器

})。Mousedown(function(e){ {)

_move =真;

_x = e.pagex-parseint($(# DIV2)。Css(左));

_y = e.pagey-parseint($(# DIV2)。Css(顶));

$(# DIV2 ),FadeTo(20,0.25); / /单击拖动透明显示

});

$(document)。Mousemove(function(e){

如果(_move){

var x = e.pagex-_x; / /移动根据对控件的左上角的绝对位置,鼠标的位置计算

var y = e.pagey-_y;

$(# DIV2)。Css({:Y,左:x }); / /位置控制

}

})。Mouseup(function(){)

_move = false;

$(# DIV2)。FadeTo(快

});

});







如果您没有看到效果,请刷新此页。

支持拖放,如果你不能拖动,刷新这个页面







希望本文能对大家的jQuery程序设计有所帮助。
推荐文章1
广告