JS拖拽代码

2020-01-27 13:44:02

字体：大中小

来源：转载

供稿：网友

一个JavaScript拖拽代码，为了简化代码，这里调用了jQuery，貌似还有些问题，发上来高手可以完善一下。

<!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><title>无标题文档</title><script src="/ajaxjs/jquery1.3.2.js" type="text/javascript" language="javascript"></script><script type="text/javascript">$(function(){	var scro_zoom = parseInt($(".scro_mouse").width()/2);		$(".scro_mouse").mousedown(function(){			$(".show").fadeIn(300);			$(this).bind("mousemove",function(e){				var X = e.pageX - $("#scro").offset().left; //得到left值;				var Y = e.pageY - $("#scro").offset().top - 5;//得到top值;				$(this).css("left",X-scro_zoom);				$(".show").text( X + "," + Y + "," + $(".scro_mouse").css("left"));			})		}).mouseup(function(){			$(this).unbind("mousemove");			$(".show").hide();		})	})</script><style type="text/css">	*{ margin:0; padding:0;}	#box{ width:690px; border:1px solid #000; margin:50px auto;}	#scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}	.scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}	.scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}	.show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}</style></head><body>    <div id="box">        <div id="scro">        	<div class="show"></div>        	<div class="scro_line"></div>        	<div class="scro_mouse"></div>        </div>        <div class="text"></div>    </div></body></html>

上一篇：jQuery 页面上的文字淡出效果

下一篇：JS+CSS模拟的留言板功能

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注