zoukankan      html  css  js  c++  java
  • jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过
    复制代码代码如下:
    <%@ page language="java" contentType="text/html; charset=utf-8" 
    pageEncoding="utf-8"%> 
    <!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" /> 
    <title>拖动DIV-www.jbxue.com</title> 
    <style type="text/css"> 
    .show{ 
    background:#7cd2f8; 
    100px; 
    height:100px; 
    text-align:center; 
    position:absolute; 
    z-index:1; 
    left:100px; 
    top:100px; 


    </style> 
    <script type="text/javascript" src="../Script/jquery-1.7.2.js"></script> 
    <script type="text/javascript"><!-- 
    $(document).ready(function() 

    $(".show").mousedown(function(e)//e鼠标事件 

    $(this).css("cursor","move");//改变鼠标指针的形状 

    var offset = $(this).offset();//DIV在页面的位置 
    var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
    var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
    $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件 

    $(".show").stop();//加上这个之后 

    var _x = ev.pageX - x;//获得X轴方向移动的值 
    var _y = ev.pageY - y;//获得Y轴方向移动的值 

    $(".show").animate({left:_x+"px",top:_y+"px"},10); 
    }); 

    }); 

    $(document).mouseup(function() 
    { // www.jbxue.com
    $(".show").css("cursor","default"); 
    $(this).unbind("mousemove"); 
    }) 
    }) 

    // --></script> 
    </head> 
    <body> 
    <div class="show"> 
    jquery实现DIV层拖动 
    </div> 
    </body> 
    </html> 
  • 相关阅读:
    php l练习(写着玩)
    位、字节、字
    ueditor上传图片时目录创建失败的问题解决方法
    tp5插入百度富文本编辑器UEditor
    PHP实现用户异地登录提醒功能的方法
    tp5知识点
    TP5语法
    微擎url
    微擎多图片上传
    微擎函数Iserializer和Iunserializer序列化函数
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3464589.html
Copyright © 2011-2022 走看看