JavaScript拖拽图片四

现在用Firefox最新版本13.0测试,不work,图片会自动回到原位。

安装firebug扩展后调试一下。

到console窗口点击enable后,

错误信息是:

window.event is undefined.

Firefox不支持window.event,因此所有用到event的地方要类似这样写:

function mouseDown(e) {
	'use strict';
	e = e || window.event;//必须这样写
	window.dragObj = e.currentTarget || e.srcElement;
	if (window.dragObj !== null) {
		window.clickLeft = e.x - parseInt(window.dragObj.style.left, 10);
		window.clickTop = e.y - parseInt(window.dragObj.style.top, 10);
		window.dragObj.style.zIndex += 1;
	}
}

解决了这个错误后,测试一下Chrome和IE6,都工作正常,但是Firefox仍然不行。鼠标左键松开的时候,图片仍然跟着跑。

注意,在Ubuntu12.04+FireFox13.0+FireBug1.9下,debug很容易让Firefox死掉。

这个问题是因为Firefox的mouseUp事件没有被触发。用下面的代码可以解决,在mouseDown函数中,添加:


                
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个问题我可以回答。以下是一个简单的HTML和JavaScript实现图片放大缩小和拖拽的示例: ```html <!DOCTYPE html> <html> <head> <title>Image Zoom and Drag</title> <style> #image-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid black; overflow: hidden; cursor: move; } #image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="image-container"> <img src="https://picsum.photos/id/237/300/300" id="image"> </div> <script> var image = document.getElementById("image"); var imageContainer = document.getElementById("image-container"); var isDragging = false; var lastX, lastY; imageContainer.addEventListener("mousedown", function(e) { isDragging = true; lastX = e.clientX; lastY = e.clientY; }); imageContainer.addEventListener("mouseup", function(e) { isDragging = false; }); imageContainer.addEventListener("mousemove", function(e) { if (isDragging) { var deltaX = e.clientX - lastX; var deltaY = e.clientY - lastY; var newTop = image.offsetTop + deltaY; var newLeft = image.offsetLeft + deltaX; image.style.top = newTop + "px"; image.style.left = newLeft + "px"; lastX = e.clientX; lastY = e.clientY; } }); imageContainer.addEventListener("wheel", function(e) { e.preventDefault(); var scale = e.deltaY > 0 ? 0.9 : 1.1; var newWidth = image.clientWidth * scale; var newHeight = image.clientHeight * scale; image.style.width = newWidth + "px"; image.style.height = newHeight + "px"; }); </script> </body> </html> ``` 这个示例中,我们首先创建了一个容器 `image-container`,然后在容器中放置了一个图片 `image`。我们使用 CSS 来将容器居中并添加了一些样式,例如设置容器为相对定位、边框、隐藏溢出部分和鼠标指针为移动。 然后我们使用 JavaScript 来添加拖拽和缩放的功能。我们使用了三个变量 `isDragging`、`lastX` 和 `lastY` 来跟踪拖拽状态和鼠标位置。当用户按下鼠标按钮时,我们设置 `isDragging` 为 `true` 并记录下当前鼠标位置。当用户释放鼠标按钮时,我们设置 `isDragging` 为 `false`。当用户移动鼠标时,我们检查 `isDragging` 是否为 `true`,如果是,就计算鼠标移动的距离,并将图片的位置相应地调整。这样就实现了拖拽的功能。 最后,我们添加了一个滚轮事件监听器来实现缩放功能。当用户滚动鼠标滚轮时,我们阻止默认行为,然后根据滚轮的方向计算缩放比例,并将图片的宽度和高度相应地调整。 希望这个示例能够帮助你实现所需的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值