介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> Title</title>
& lt;才能style>
,,,div{宽度:400 px;高度:400 px;溢出:隐藏;位置:相对;边界:1 px solid # 000;}
,,,div img{位置:绝对;高度:100%;宽度:汽车;游标:移动;}
& lt;才能/style>
& lt;/head>
& lt; body>
& lt; div id=癲iv", onmousewheel=皉eturn bbimg(这)“祝辞& lt; img id=癷mg",边境=?“,src=https://www.yisu.com/zixun/" img/zs.jpg "/>
<=>“javascript脚本语言
var params={
zoomVal: 1、
左:0,
上图:0,
currentX: 0,
当前y坐标:0,
国旗:假
}；//图片缩放
函数bbimg (o) {
var o=o.getElementsByTagName (img) [0];
params.zoomVal +=event.wheelDelta/1200;
如果参数个数。zoomVal>=0.2) {
o.style.transform="规模(“+ params.zoomVal +”)”;
其他}{
params.zoomVal=0.2;
o.style.transform="规模(“+ params.zoomVal +”)”;
返回错误;
}
}//获取相关CSS属性
var getCss=function (o,键){
返回o.currentStyle吗?o。currentStyle[主要]:document.defaultView.getComputedStyle (o,假)(例子);
}；//拖拽的实现
var startDrag=function(酒吧、目标、回调){
如果(getCss(目标,“左”)!==捌怠?{
参数个数。左=getCss(目标,“左”);
}
如果(getCss(目标,“顶级”)!==捌怠?{
参数个数。顶级=getCss(目标,“顶级”);
}//o是移动对象
酒吧。onmousedown=函数(事件){
参数个数。国旗=true;
如果事件(!){
事件=window.event;//防止IE文字选中
酒吧。onselectstart=function () {
返回错误;
}
}
var e=事件;
参数个数。currentX=e.clientX;
参数个数。当前y坐标=e.clientY;
}；
文档。onmouseup=function () {
参数个数。国旗=false;
如果(getCss(目标,“左”)!==捌怠?{
参数个数。左=getCss(目标,“左”);
}
如果(getCss(目标,“顶级”)!==捌怠?{
参数个数。顶级=getCss(目标,“顶级”);
}
}；
文档。onmousemove=函数(事件){
var e=事件吗?事件:window.event;
如果(params.flag) {
var nowX=e。clientX nowY=e.clientY;
var disX=nowX -参数。currentX disY=nowY - params.currentY;
target.style。左=方法(params.left) + disX +“px”;
target.style。顶级=方法(params.top) + disY +“px”;
如果(typeof回调==昂?{
回调(方法(params.left) | | 0) + disX(方法(params.top) | | 0) + disY);
}
如果(event.preventDefault) {
event.preventDefault ();
}
返回错误;
}
}
}；
startDrag (. getelementbyid (img) . getelementbyid (img))>
这篇文章主要介绍JavaScript实现图片的放大缩小及拖拽功能的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
实现效果如下:
实现代码: