js怎么把div移动的轨迹用染色

就像我们按住鼠标右键在网页是拖动那种效果

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

=>#2说的是浏览器自带的鼠标轨迹一样的插件=>LZ, 如果要染色, 而且是拖动div, 而且是用js, 那么只好用vml(IE)和html5的canvas(支持HTML5内核)来做了. 如果是鼠标轨迹, 那么做插件吧
定义移动时候触发事件，在目标div移动的反方向的边，显示/隐藏一系列颜色渐变的边框
- -取巧试试吧，思路有了，代码还得自己写。。试试看去
定义几个div和需要移动的div一起动画吧，囧，反正视觉效果一样的<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
$("#div_id2").click(function(){

$("#div_id1").animate({left:"1000px",height:"200px"},4500).animate({left:"0px",height:"200px"},4000);
$("#div_id2").animate({left:"1000px",height:"200px"},4000).animate({left:"0px",height:"200px"},4000);
$("#div_id3").animate({left:"1000px",height:"200px"},4000).animate({left:"0px",height:"200px"},5000);
})
})
</script>
<style>
#div_id1{position:relative; background-color:#009966; width:10px; height:200px; float:left; display:none }
#div_id2{position:relative; background-color:#0000FF; width:200px; height:200px; float:left }
#div_id3{position:relative; background-color:#0099CC; width:10px; height:200px; float:left; display:none }
</style>
</head>
<body>
<div id="div_id1"></div>
<div id="div_id2"></div>
<div id="div_id3"></div>
</body>
</html>
@.@ 看下面这个例子的时候，眼睛被闪花了<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
//思路一、记录div_id2移动时，相近位置的坐标值，设置"影子div"延迟一定时间显示，并显示一定时间后消失（更新到下一位置）【本例】
//思路二、判断div_id2移动方向，在div_id2移动方向的反方向，绘制"部分边框"
//作者:personball
var top,left,move=false;
var x,y,move_x,move_y;
$("#div_id2").click(function(){
}).mousedown(function(e){
top=e.pageY-parseInt($("#div_id2").css("top"));
left=e.pageX-parseInt($("#div_id2").css("left"));
move=true;
$("#div_idShadow").show();
move_x=e.pageX;
move_y=e.pageY;
});
$(document).mousemove(function(e){
if(move){
var x= e.pageX-left;
var y= e.pageY-top;
$("#div_id2").css({"left":x+"px","top":y+"px"});
//$("#label_x").text(e.pageX);
//$("#label_y").text(e.pageY);
//to-do
if(e.pageX!=move_x)
{
$("#label_x").text(e.pageX-move_x);
}
if(e.pageY!=move_y)
{
$("#label_y").text(e.pageY-move_y);
}
SetShadowDiv((move_x-left)-(e.pageX-move_x)*10,(move_y-top)-(e.pageY-move_y)*10);

move_x=e.pageX;
move_y=e.pageY;
}
}).mouseup(function(){
move=false;
$("#div_idShadow").hide();
})

})
function SetShadowDiv(left,top){

$("#div_idShadow").css({"left":left+"px","top":top+"px"});
}
</script>
<style>#div_id2{position:absolute;left:100px;top:100px; background-color:#0000FF; width:200px; height:200px; z-index:1}
#div_idShadow{position:absolute;left:150px;top:150px; background-color:#FF0000; width:200px; height:200px; z-index:0}
</style>
</head>
<body>
x<label id="label_x"></label><br />
y<label id="label_y"></label><div id="div_id2"></div>
<div id="div_idShadow"></div>
</body>
</html>
最新版~~蛮有趣<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
//作者 personball
var top,left,move=false;
var x,y,move_x,move_y;
var num=1;
$("#div_id2").click(function(){
}).mousedown(function(e){
top=e.pageY-parseInt($("#div_id2").css("top"));
left=e.pageX-parseInt($("#div_id2").css("left"));
move=true;
//$("#div_idShadow").show();
move_x=e.pageX;
move_y=e.pageY;
});
$(document).mousemove(function(e){
if(move){
var x= e.pageX-left;
var y= e.pageY-top;
$("#div_id2").css({"left":x+"px","top":y+"px"});
//to-do

if(num>500)num=1;

if($("#parent"+num).length>0)
{
}else
{
SetShadowDiv((move_x-left),(move_y-top),num);
}
num++;
move_x=e.pageX;
move_y=e.pageY;
}
}).mouseup(function(){
move=false;
$(".div_idShadow1").each(function(){
$(this).remove();
})
$(".div_idShadow2").each(function(){
$(this).remove();
})
$(".div_idShadow3").each(function(){
$(this).remove();
})
$(".div_idShadow4").each(function(){
$(this).remove();
})
$(".div_idShadow0").each(function(){
$(this).remove();
})
})})
function SetShadowDiv(left,top,num){
$("<div id='parent"+num+"' class='div_idShadow"+num%5+"'></div>").appendTo("body");
$("#parent"+num).css({"left":left+"px","top":top+"px"});
$("#parent"+num).fadeOut(500);
}
</script>
<style>
#div_id2{position:absolute;left:100px;top:100px; background-color:#0000FF; width:200px; height:200px; z-index:1}
.div_idShadow0{ position:absolute;background-color:#000000; width:200px; height:200px; z-index:0}
.div_idShadow1{ position:absolute;background-color:#444444; width:200px; height:200px; z-index:0}
.div_idShadow2{ position:absolute;background-color:#888888; width:200px; height:200px; z-index:0}
.div_idShadow3{ position:absolute;background-color:#CCCCCC; width:200px; height:200px; z-index:0}
.div_idShadow4{ position:absolute;background-color:#FFFFFF; width:200px; height:200px; z-index:0}
</style>
</head>
<body>
<label id="label_x">拖动那个蓝色方块！</label><br />
<div id="div_id2"></div>
</body>
</html>