jquery实现了模仿新浪微博(可以关闭拖动)的动画效果的弹出层代码

本文讲述了一个jquery模仿新浪微博实现动画效果的弹出层代码的例子。分享给大家参考。具体如下：

这是一个由jquery实现的带有动画的弹出层，一开始模拟的是新浪微博中的弹出层。后来引入了jQuery，想了想，加了一些动画效果并不好。后来我写了这样一个弹出的网页图层效果。点击按钮后，可以看到一个可以逐渐关闭的弹出图层。当然，点击关闭后，它也会逐渐消失。移动时，根据鼠标位置计算控件左上角的绝对位置。松开鼠标后，停止移动并返回no。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-f-Sina-flash-style-close-able-DLG-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http : jquery-1 . 6 . 2 . min . js ' type=' text/JavaScript '/script style type=' text/CSS ' # t { margin :30 px 0 0 100 px；}.cc { border:1px固体# 000；位置：绝对；top:60pxleft:180px高度： 150像素；宽度： 300 px；display:none}.cc h2 { display:block宽度width:270pxfont-size :12 px；float:left文本对齐：居中；}.cc span { display:block宽度：20 px；高度：20 px；font-size :18 px；右浮动：border:1px实心# F00背景技术： # 999；文本对齐：居中；}/style script language=' JavaScript ' $(function(){ var _ move=false；//移动标记var _x，_ y；//鼠标相对于控件左上角的位置$ ('# t ')。单击(function () {$(')。cc ')。fadein('慢速')；});$('.cc span’)。单击(function(){ $(')。cc ')。隐藏(' fast ')；}) $('.cc ')。mousedown(函数(e){ _ move=true；_x=e.pageX-parseInt($(')。cc ')。css('左')；_y=e.pageY-parseInt($(')。cc ')。CSS(' top ')；$('.cc ')。fadeTo(20，0.5)。css('光标'，'移动')；//点击开始透明拖拽显示})；$('.cc ')。mousemove(函数(e){ if(_ move){ var x=e . pagex-_ x；//移动时根据鼠标位置计算控件左上角的绝对位置。var y=e . Pagey-_ y；$('.cc ')。css({top:y，left : x })；//控件的新位置}})。mouse up(function(){ _ move=false；$('.cc ')。fadeTo('fast '，1)。css('光标'，'自动')；//松开鼠标后停止移动并返回不透明度})；});/scripttitle新浪微博的弹出层效果/title/head dyinput id=' t ' name=' 1 ' type=' button ' value='弹出层'/div class=' cc ' H2点击拖动/h2spanX/span/div/body/html希望这篇文章对大家的jQuery程序设计有所帮助。