jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)

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

这是一款jquery实现带动画的弹出层，最开始是模拟新浪微博中的弹出层，后来引入了jQuery，又想了想，加入点动画效果不知怎么样，后来就写出了这么一个弹出的网页层效果，你点击按钮后就可以看到一个渐出的可关闭的弹出层，点击关闭后，当然也是渐渐的消失的，移动时根据鼠标位置计算控件左上角的绝对位置，松开鼠标后停止移动并恢复成不透明。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.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/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
#t{ margin:30px 0 0 100px;}
.cc {
  border:1px solid #000;
  position:absolute;
  top:60px;
  left:180px;
  height: 150px;
  width: 300px;
  display:none;
}
.cc h2{ display:block; width:270px; font-size:12px; float:left; text-align:center;}
.cc span{ display:block; width:20px; height:20px; font-size:18px; float:right; border:1px solid #F00; background:#999; text-align:center;}
</style>
<script language="javascript">
$(function(){
  var _move=false;//移动标记
  var _x,_y;//鼠标离控件左上角的相对位置
  $('#t').click(
    function(){
    $('.cc').fadeIn('slow');
      });
  $('.cc span').click(function(){
      $('.cc').hide('fast');
      })
  $('.cc').mousedown(function(e){
    _move=true;
  _x=e.pageX-parseInt($(".cc").css("left"));
  _y=e.pageY-parseInt($(".cc").css("top"));
  $(".cc").fadeTo(20, 0.5).css('cursor','move');//点击后开始拖动并透明显示
    });
   $('.cc').mousemove(function(e){
  if(_move){
   var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
   var y=e.pageY-_y;
   $(".cc").css({top:y,left:x});//控件新位置
  }
 }).mouseup(function(){
 _move=false;
 $(".cc").fadeTo("fast", 1).css('cursor','auto');//松开鼠标后停止移动并恢复成不透明
 });
});
</script>
<title>新浪微博的弹出层效果</title>
</head>
<body>
<input id="t" name="1" type="button" value="弹出层" />
<div class="cc"><h2>点击可以拖拽哦</h2><span>X</span></div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 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><title>jquery简便实现遮罩层

  • jQuery 右下角滑动弹出可关闭重现层完整代码

    jQuery 右下角滑动弹出可关闭重现层完整代码

    效果图: 完整代码如下: jquery右下角滑动弹出可关闭重现层 博客园 计划 教程 *{ margin:0px; padding:0px;} #jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;} #jihuaslide a{ position:absolute; top

  • 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&q

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • jQuery点击自身以外地方关闭弹出层的简单实例

    主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用 开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码: HTML代码: 复制代码 代码如下: <div class="down">click</div><div class="con hide">show-area</div> CSS代码:.hide{display:none;}

  • jquery右下角自动弹出可关闭的广告层

    右下角弹出层后,会在一定时间后自动隐藏. html代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> <scrip

  • jQuery实现点击按钮弹出可关闭层的浮动层插件

    jQuery实现点击按钮弹出可关闭层的浮动层插件

    本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具

  • jquery三个关闭弹出层的小示例

    在开发应用中我们做了一个弹出层,有时我们会做一个关闭按钮,这样点击关闭就可以把弹出层关闭了,但是有时希望只要不点击弹出层内就自动关闭弹出层了,下面我总结了三个实例.例1 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml

  • 点击弹出层外区域关闭弹出层jquery特效示例

    点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了: 复制代码 代码如下: <html> <head> <style> .hide{display:none;} .con{width:500px;height:300px;background:#000;} </style> <title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title> <script type="text/

  • jQuery实现指定区域外单击关闭指定层的方法【经典】

    本文实例讲述了jQuery实现指定区域外单击关闭指定层的方法.分享给大家供大家参考,具体如下: 在页面上指定区域外单击,关闭层.常见效果为弹出层外单击,关闭弹出层.今天遇到一个这样的效果,用jQuery实现起来挺简单的,顺便复习了一下相关知识. $(document).mouseup(function(e){ if($(e.target).parent("#big_map").length==0){ $("#big_map").hide("fast&quo

随机推荐