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


Posted in Javascript onOctober 12, 2015

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

这是一款jquery实现带动画的弹出层,最开始是模拟新浪微博中的弹出层,后来引入了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=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程序设计有所帮助。

Javascript 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 #Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 #Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
Javascript函数式编程语言
Oct 11 #Javascript
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
laravel model 两表联查示例
2019/10/24 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
浅析Vue 生命周期
2018/06/21 Javascript
js module大战
2019/04/19 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
Python中的字符串替换操作示例
2016/06/27 Python
python实现批量图片格式转换
2020/06/16 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
大学军训感言1000字
2014/02/25 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python