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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
大学生村官工作感言
2014/01/10 职场文书
保密工作实施方案
2014/02/24 职场文书
消防安全员岗位职责
2014/03/10 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年招生工作总结
2014/11/26 职场文书
学生个人评语大全
2015/01/04 职场文书
无工作证明怎么写
2015/06/15 职场文书
Node.js实现断点续传
2021/06/23 Javascript
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis