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> 
  • 相关阅读:
    git常用指令 github版本回退 reset
    三门问题 概率论
    如何高效的学习高等数学
    数据库6 关系代数(relational algebra) 函数依赖(functional dependency)
    数据库5 索引 动态哈希(Dynamic Hashing)
    数据库4 3层结构(Three Level Architecture) DBA DML DDL DCL DQL
    梦想开始的地方
    java String字符串转对象实体类
    java 生成图片验证码
    java 对象之间相同属性进行赋值
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3464589.html
Copyright © 2011-2022 走看看