本文实例讲述了Java脚本语言实现图片的放大缩小及拖拽功能。分享给大家供大家参考，具体如下：

实现效果如下：

实现代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style div { width :400 px；高度：400 px飞越：隐藏；位置：相对；border:1px固体# 000;} div img { position:absolute高度：100%;宽度：汽车；cursor : move }/style/headdydiv id=' div ' on mousewheel=' return bbimg(this)' img id=' img ' border=' 0 ' src=' http : img/zs。jpg '/div脚本语言=' JavaScript ' var params={ zoom val :1，left: 0，top:currentX:currentY:flag : false }；//图片缩放函数bbi mg(o){ var o=o . GetElementsBytagname(' img ')[0]；参数。zoomval=事件。车轮增量/1200；if(参数。zoomval=0.2){ o . style。transform=' scale(' params。zoom val ')'；} else { params.zoomVal=0.2o。风格。transform=' scale(' params。zoom val ')'；返回false} } //获取相关半铸钢钢性铸铁(铸造半钢)属性var getCss=function(o，key){ return o.currentStyle？o . currentstyle[key]:文档。默认视图。getcomputed style(o，false)[key]；};//拖拽的实现var startDrag=function(bar，target，callback){ if(getCss(target，' left ')！==' auto '){ params。left=GetCSS(目标，‘left’)；} if(getCss(target，' top ')！==' auto '){ params。top=GetCSS(目标，‘top’)；} //o是移动对象酒吧。onmousedown=function(event){ params。flag=trueif(！事件){事件=窗口。事件；//防止工业管理学(工业工程)文字选中酒吧。onselectstart=function(){ return false；} } var e=事件；参数。CurrentX=e . ClientX参数。currenty=e . clienty};文件。onmouseup=function(){ params。flag=falseif(getCss(target，' left ')！==' auto '){ params。left=GetCSS(目标，‘left’)；} if(getCss(target，' top ')！==' auto '){ params。top=GetCSS(目标，‘top’)；} };文件。onmousemove=函数(事件){ var e=事件？event : window . event if(params。flag){ var nowX=e . clientx，NoWy=e . client yvar DISx=NoWx-params . currentx，DIsY=NoWy-params。当前；目标。风格。left=ParSeint(参数。左)DIsX ' px目标。风格。top=ParSeint(参数。top)DIsy ' px '；if(回调类型==' function '){ callback((ParSeint(params。左)| | 0)DIsX，(ParSeint(params。top)| | 0)DIsY)；} if(事件。preventdefault){ event。prevent default()；}返回false } } }开始拖动(文档。getelementbyid(' img ')，文档。getelementbyid(' img ')/脚本/正文/html更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript图片操作技巧大全》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript运动效果与技巧汇总》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。