js拖动图片

『壹』 javaScript实现淘宝网图片的局部放大功能

为了实现类似淘宝网图片局部放大的效果，我们可以使用HTML和CSS来构建基础结构，然后通过JavaScript来实现拖拽功能。具体来说，我们首先需要一个背景图片作为展示的大图，再用一个小的透明方块来模拟鼠标拖拽的滑块，并通过JavaScript来控制这个小方块的位置。当用户点击并拖动这个小方块时，大图的局部会被放大显示在另一个小方块上。

下面是具体的实现代码。首先，我们定义一个包含大图的盒子，设置背景图片及其尺寸。然后，创建一个小滑块和一个小图，小滑块用于用户操作，小图则会根据滑块的位置动态调整背景图片的位置，从而实现局部放大效果。

具体代码如下：

<div class="box"><div class="slider"></div><div class="small"></div></div>

接着，我们通过CSS来设置这些元素的样式，包括位置、大小和背景图片等。

<style type="text/css"><!--*{margin: 0;padding: 0;} .box{position: relative;width: 300px;height: 200px;background: url("./js封面.jpg");background-size: 300px 200px;} .slider{position: absolute;width: 100px;height: 100px;background: black;opacity: 0.3;} .small{position: absolute;width: 100px;height:100px;background: url('./JS封面.jpg');top: 0px;right: -300px;background-size: 300px 200px;transform: scale(3);}</style>

最后，通过JavaScript来实现滑块的拖拽功能。当用户按下鼠标时，开始监听鼠标移动事件，并根据滑块的位置调整小图的背景图片位置。当鼠标释放时，停止监听鼠标移动事件。

<script type="text/javascript">var slider = document.querySelector('.slider');var small = document.querySelector('.small');slider.onmousedown = function(event){var startX = event.offsetX;var startY = event.offsetY;document.onmousemove = function (event1) {var l = event1.clientX-startX;var t = event1.clientY-startY;if(l < 0) l = 0;if(l > 200) l = 200;if(t < 0) t = 0;if(t > 100) t = 100;slider.style.left = l+"px";slider.style.top = t+"px";small.style.backgroundPosition="-"+l+"px -"+t+"px";};}document.onmouseup = function () {document.onmousemove = null;};</script>

『贰』 想在一个div里面添加图片，用js怎么写啊

1、新建一个HTML文件，保存为test.html，用于编写代码实现拖放功能 。

『叁』 js中如何拖动DIV中的图片

代码放出来看抄看

是不是冒袭泡和捕获的问题
试试简单的，看看点击图片时 div上的onclick事件有没有被触发

// 看起来是使用 jquery ,代码贴完整些吧，
this.mousedown(function(){
中this是指向什么对象都没看出来

//加一个 return false
//另外 event.offsetX 并不兼容 firefox

$(document).mousemove(function(){
if(movestart){
$("#id1").css("left",event.clientX-x1+"px");
$("#id1").css("top",event.clientY-y1+"px");
return false;
}

})