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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
javascript self对象使用详解
Oct 18 Javascript
Angular2入门--架构总览
Mar 29 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
基于Vue CSR的微前端实现方案实践
May 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
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
python中logging包的使用总结
2018/02/28 Python
Python统计单词出现的次数
2018/04/04 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python连接mysql有哪些方法
2020/06/24 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
简历中自我评价分享
2013/10/09 职场文书
单位领导证婚词
2014/01/14 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
消费者投诉书范文
2015/07/02 职场文书
2016高考感言
2015/08/01 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python