JS拖拽代碼

2024-09-05 12:18:09

字體：大中小

來源：轉載

供稿：網友

一個JavaScript拖拽代碼，為了簡化代碼，這里調用了jQuery，貌似還有些問題，發(fā)上來高手可以完善一下。

<!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   class="iwvjtn8m0"   id="box">        <div   class="iwvjtn8m0"   id="scro">        	<div   id="iwvjtn8m0"   class="show"></div>        	<div   id="iwvjtn8m0"   class="scro_line"></div>        	<div   id="iwvjtn8m0"   class="scro_mouse"></div>        </div>        <div   id="iwvjtn8m0"   class="text"></div>    </div></body></html>

上一篇：JS+CSS模擬的留言板功能

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