javascript实现对图片的随意拖拽,放大缩小

【JS】基于javascript实现对图片的随意拖拽,放大缩小

    最近写项目的过程中需要对图片进行一个操作,点击之后弹出图片,在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小,双击图片恢复原图!对于我们这样后台程序员而言,这种前台效果实现起来确实有点勉强,在经过半个小时挣扎之后,终于完成效果,发表上来,以供广大后台程序员借鉴吧!

第一步:
body之内的代码如下:

1

2

3

4

5

6

7

8

9

第二步:
鼠标自由拖拽图片自由移动代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38
/鼠标将图片在相应的div自由拖动/
drag = 0;
move = 0;
var ie = document.all;
var nn6 = document.getElementById && !document.all;
var isdrag = false;
var y,x;
var oDragObj;
var pic_width,pic_height,pic_zoom;
var divleft,divtop;

function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + “px”;
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + “px”;
return false;
}
}

function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = “HTML”;
while (oDragHandle.tagName != topElement && oDragHandle.className != “dragAble”) {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className == “dragAble”) {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top + 0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left + 0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function(“isdrag=false”);

第三步:
鼠标滚动放大缩小代码
这里需要强调的是火狐浏览器不支持wheel事件,所以需要对其注册wheel事件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47
$(document).ready(function() {
if (window.addEventListener){
window.addEventListener(‘DOMMouseScroll’, wheel, false);//给firefox添加鼠标滚动事件,因为火狐没有wheel事件
}
});

function wheel(event) {
if (!event) /**//* For IE. */
{
event = window.event;
}
else if (event.detail)
{
var height1 = $("#images1").attr(“height”);

        if (!height1) {
            height1 = height1.substring(0, height1.length - 2);
             
        }
        var width1 = $("#images1").attr("width");
         
        if (!width1) {
            width1 = width1.substring(0, width1.length - 2);
         
        }
        if (event.detail < 0) {
            var temp1 = parseInt(height1) * 1.2;
            var temp2 = parseInt(width1) * 1.2;
             

        } else {
            var temp1 = parseInt(height1) / 1.2;
            var temp2 = parseInt(width1) / 1.2;
        }
         
        $("#images1").attr("height", temp1 + "px");
         
        $("#images1").attr("width", temp2 + "px");
    }
}

/非Firefox的主流浏览器/
function bbimg(o) {
var zoom = parseInt(o.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom > 0) o.style.zoom = zoom + ‘%’;
return false;
}

第四步:
双击图片恢复到原图

1

2

3

4

5

6

7

8
function realsize() {
$("#images1").attr(“height”, “40px”);
$("#images1").attr(“width”, “140px;”);
$("#images1").css(“zoom”, “100%”);
$("#block1").css(“left”, “0px”);
$("#block1").css(“top”, “0px”);

}
第五步:
需要引入

1

第六步:

实例图片长为140px;宽为40px;各位同学自己引入的图片记得修改height,width。
另外,我这些数据都是写死的,因为是案例,而实际项目中这些数据可能都是你从后台传过来的
需要我们用$来取,包括我们的图片路径也是,这样才能保证我们点击每张图片的效果都是不一样的。

总结:
广大后台程序员也需要大大掌握前台交互技术,从今天开始努力学习!

源码下载位置:【javascript】基于javascript实现对图片的随意拖拽,放大缩小

以下是一个简单的JavaScript实现图片鼠标位置的放大缩小拖拽功能的示例: HTML代码: ```html <div id="image-container"> <img id="image" src="example.jpg" /> </div> ``` CSS代码: ```css #image-container { width: 500px; height: 500px; overflow: hidden; position: relative; } #image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: move; } ``` JavaScript代码: ```javascript var container = document.getElementById("image-container"); var image = document.getElementById("image"); // 初始缩放比例为1 var scale = 1; // 鼠标按下时的位置 var mouseX = 0; var mouseY = 0; // 鼠标是否按下 var isMouseDown = false; // 鼠标按下时记录鼠标位置 container.addEventListener("mousedown", function(event) { isMouseDown = true; mouseX = event.clientX; mouseY = event.clientY; }); // 鼠标松开时重置鼠标状态 container.addEventListener("mouseup", function(event) { isMouseDown = false; }); // 鼠标移动时缩放或拖拽图片 container.addEventListener("mousemove", function(event) { if (isMouseDown) { // 鼠标按下时拖拽图片 var deltaX = event.clientX - mouseX; var deltaY = event.clientY - mouseY; image.style.left = parseInt(image.style.left) + deltaX + "px"; image.style.top = parseInt(image.style.top) + deltaY + "px"; mouseX = event.clientX; mouseY = event.clientY; } else { // 鼠标未按下时缩放图片 var deltaScale = 0; if (event.deltaY < 0) { deltaScale = 0.1; } else if (event.deltaY > 0) { deltaScale = -0.1; } scale += deltaScale; // 最小缩放比例为0.1 scale = Math.max(scale, 0.1); image.style.transform = "scale(" + scale + ")"; } }); ``` 这段代码实现了以下功能: 1. 鼠标按下并拖拽图片时,图片跟随鼠标移动。 2. 鼠标未按下时,通过滚轮上下滑动实现图片放大缩小,最小缩放比例为0.1。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值