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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包含的关系.       事件:现在我们都在这两个元素上绑定相同的事件,比如click事件.       结果:这时,当我们点击内层的P标签的时候

  • jQuery div层的放大与缩小简单实现代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .content { border: 1px solid #ccc; width: 440px; overflow: hidden; margin: 10p

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • jQuery实现DIV层收缩展开的方法

    本文实例讲述了jQuery实现DIV层收缩展开的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm

  • jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

    jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

    本文实例讲述了jQuery实现点击某个div打开层,点击其他div关闭层的方法.分享给大家供大家参考,具体如下: 其实很早就学过js一些高级部分的知识,但是用的不多,也就慢慢淡忘了.最近发现随着编程的深入,你不得不用到它们,比如事件的冒泡. 有一需求如下: ①点击class = "click" 块 弹出 class="pop" 块 ②点击class = "page" 块 关闭 class="pop" 块 ③点击class =

  • jQuery中阻止冒泡事件的方法介绍

    一.冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行.比如:div下的a都有click事件,点击a的时候,会alert出现2次.这个现象叫做冒泡事件. 这个事件从原始元素开始一直冒泡到DOM树的最上层.目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现.使用事件代理的话我们可以把事 件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

  • 基于jquery的模态div层弹出效果

    基于jquery的模态div层弹出效果

    经过几多周折,终于搞出来了,效果图如下: 具体实现: (1) 编写 jquery.divbox.js 的代码: 复制代码 代码如下: jQuery.fn.extend( { OpenDiv: function() { var sWidth, sHeight; sWidth = window.screen.availWidth; if (window.screen.availHeight > document.body.scrollHeight) { sHeight = window.screen

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • jQuery控制DIV层实现由大到小，由远及近动画变化效果

    jQuery控制DIV层实现由大到小，由远及近动画变化效果

    本文实例讲述了jQuery控制DIV层实现由大到小,由远及近动画变化效果.分享给大家供大家参考.具体如下: 这里介绍jQuery控制DIV由大到小,由远及近动画变化效果,使用jquery生成动画效果的一个小例子,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • jquery阻止冒泡事件使用模拟事件

    复制代码 代码如下: <body> <div class="content"> <span>单击显示隐藏内容</span> </div> <div class="message">这里是隐藏内容</div> </body> <script> $(document).ready(function(){ $("span").bind("

  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

随机推荐