jQuery实现DIV层淡入淡出拖动特效的方法


Posted in Javascript onFebruary 13, 2015

本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>jQuery实现DIV层淡入淡出的拖动效果)</title>

<style type="text/css">

#div2

{

    position:absolute;

    width:400px;

    height:300px;

    border:1px solid #333333;

    background-color:#777788;

    text-align:center;

    line-height:400%;

    font-size:13px;

    left:80px;

    top:20px;

}

</style>

<script type="text/javascript" language="javascript" src="/images/jquery.js"></script>

<script type="text/javascript" language="javascript">

var _move=false;//移动标记

var _x,_y;//鼠标离控件左上角的相对位置

$(document).ready(function(){

    $("#div2").click(function(){

        //alert("click");//点击(松开后触发)

        }).mousedown(function(e){

        _move=true;

        _x=e.pageX-parseInt($("#div2").css("left"));

        _y=e.pageY-parseInt($("#div2").css("top"));

        $("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示

    });

    $(document).mousemove(function(e){

        if(_move){

            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置

            var y=e.pageY-_y;

            $("#div2").css({top:y,left:x});//控件新位置

        }

    }).mouseup(function(){

    _move=false;

    $("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明

  });

});

</script>

</head>

<body>

<h4>看不到效果,请刷新一下本页面。</h4>

    <div id="div2">支持拖拽<br>如果不能拖动,请刷新本页面</div>

</body>

</html>

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

Javascript 相关文章推荐
用js来解决ajax读取页面乱码
Nov 28 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 #Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 #Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 #Javascript
AngularJS表单编辑提交功能实例
Feb 13 #Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
jQuery动态修改超链接地址的方法
Feb 13 #Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 #Javascript
You might like
php HandlerSocket的使用
2011/05/02 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
详解Python装饰器
2019/03/25 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
pycharm显示远程图片的实现
2019/11/04 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python实现代码块儿折叠
2020/04/15 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
开朗女孩的自我评价
2014/02/10 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
mysql 子查询的使用
2022/04/28 MySQL
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技