javascript怎么实现鼠标点击一张图片之后,图片跟随鼠标走的效果
<divclass="contenta_nav_left"style="position:absolute;left:5%;bottom:0.4%;width:100%;...
<div class="contenta_nav_left" style="position:absolute;left:5%;bottom: 0.4%;width:100%;z-index:999;">
<img src="images/1.png" style="position:absolute;left:-6%;bottom: 0%;margin-top:5%;width:50%;display: block;">
<ul>
<li class="img3">
<a href="javascript:;">
<img value="toe" src="images/2.png" alt="挖掘" style="position:absolute;left:-5%;bottom:4%;width:7%;display: block;"/>
</a>
</li>
</ul>
</div>
谁能帮写一段JS实现点击鼠标 图片2.png跟随鼠标走的效果,在追加一百,够详细的话在加一百。 展开
<img src="images/1.png" style="position:absolute;left:-6%;bottom: 0%;margin-top:5%;width:50%;display: block;">
<ul>
<li class="img3">
<a href="javascript:;">
<img value="toe" src="images/2.png" alt="挖掘" style="position:absolute;left:-5%;bottom:4%;width:7%;display: block;"/>
</a>
</li>
</ul>
</div>
谁能帮写一段JS实现点击鼠标 图片2.png跟随鼠标走的效果,在追加一百,够详细的话在加一百。 展开
1个回答
展开全部
这是一个拖动元素的效果
<div id="div" style="width:100px;height:100px;background-color:red;position: absolute;cursor: move">
</div>
<script>
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果
var x= e.clientX-div.offsetLeft;
var y= e.clientY-div.offsetTop;
document.onmousemove=function(e){
div.style.left= e.clientX-x+"px";
div.style.top= e.clientY-y+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
</script>
<div id="div" style="width:100px;height:100px;background-color:red;position: absolute;cursor: move">
</div>
<script>
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果
var x= e.clientX-div.offsetLeft;
var y= e.clientY-div.offsetTop;
document.onmousemove=function(e){
div.style.left= e.clientX-x+"px";
div.style.top= e.clientY-y+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
</script>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询