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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
关于事件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
收音机的保养
2021/03/01 无线电
php遍历树的常用方法汇总
2015/06/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python中ConfigParse模块的用法
2014/09/29 Python
对numpy中shape的深入理解
2018/06/15 Python
Apache部署Django项目图文详解
2019/07/30 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
数据库的约束含义
2012/09/09 面试题
大学生个人先进事迹材料范文
2014/05/03 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2015入党自传格式范文
2015/06/26 职场文书
大学运动会加油稿
2015/07/22 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
MySQL深分页问题解决思路
2022/12/24 MySQL