js实现图像放大和拖放特效代码共享

本文介绍了实现图像放大和拖动特效的js代码。分享给大家参考。具体如下：js是一款非常实用的js特效，实现了放大和拖动图片的功能。它不是使用jquery插件，而是用原生javascript实现的。除了点击放大和缩小按钮来控制图片的放大和缩小，还可以使用鼠标滚轮来控制图片的放大和缩小。运行效果图。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。为大家分享js实现图像放大和拖放特效的代码如下

！DOCTYPE html html head meta charset=' utf-8 ' title js实现图片放大和拖拽特效/title meta name=' viewport ' content=' width=device-width，initial-scale=1，minimum-scale=1，maximum-scale=1，user-scale=no ' link rel='样式表href=' CSS/style。CSS ' script type=' text/JavaScript ' src=' http : js/drag _ map。js '/script style type=' text/CSS ' body { font-size : 12px；font-family: 'Verdana '，' Arial '，' Helvetica '，'无衬线；} TD { font-size : 12px线高： 150%;} TD { font-size : 12pxcolor : # 000000 } A { font-size : 12px；color: # 000000} #第1层{ z-index : 100绝对位置：top: 150px} #第2层{ z-index : 1；绝对位置：}/style script type=' text/JavaScript ' function MM _ ReLoadPage(init){ if(init==true)with(navigator){ if((appName==' Netscape ')(ParSeint(AppVersion)=4)){ document .MM _ pgW=内宽文件. MM_pgH=内高；onresize=MM _ ReLoadPage } } else if(inner width！=文档. MM_pgW || innerHeight！=文档. MM _ PgH)位置。重载()；} MM_reloadPage(真);/script/head body OnLoAd=' onmouseup='文档。选择。empty()' on context menu=' return false ' on selectstart=' return false ' on drag start=' return false ' on before copy=' return false ' style=' overflow-y : hidden；overflow-x :隐藏的“oncopy=”文档。选择。在selection='文档中，empty()'左边距=' 0 '上边距=' 0 '。选择。empty()' margin heat=' 0 '边距为=' 0 ' div id=' layer 1 '表格单元格间距=' 2 '单元格填充=' 0 '边框=' 0 ' t正文tr TD/TD img title='向上style=' cursor : hand ' OnClick=' click move(' down ')' height=' 20 ' src=' http : images/up。gif ' width=' 20 '/TD TD/TD/tr TD img title='向左style=' cursor : hand ' OnClick=' click move(' right ')' height=' 20 ' src=' http : images/left。gif ' width=' 20 '/TD TD img title='还原style=' cursor : hand ' OnClick=' real size()；'高度=' 20 ' src=' http : images/zoom。gif '宽度=' 20 '/TD TD TD img title='向右style=' cursor : hand ' OnClick=' click move(' left ')' height=' 20 ' src=' http : images/right。gif ' width=' 20 '/TD/tr TD/TD TD img title='向下style=' cursor : hand ' OnClick=' click move(' up ')' height=' 20 ' src=' http : images/down。gif ' width=' 20 '/TD TD/TD/tr TD/TD TD img title='放大style=' cursor : hand ' OnClick=' bigit()；'高度=' 20 ' src=' http : images/zoom _ in。gif '宽度=' 20 '/TD TD/TD/tr TD/TD TD img title='缩小style=' cursor : hand ' OnClick=' small it()；'高度=' 20 ' src=' http : images/zoom _ out。gif ' width=' 20 '/TD/TD/tr/t body/table/div p br/p div id=' hiddenPic ' style=' z-index : 1；左： 0pxvisibility:隐藏；宽度： 0px绝对位置：top : 150 px h8 : 0px ' img src=' http :3358 ww 2。sinaimg。cn/large/add 8400 gw1eeazlmtqa 8j 20 qd0 mdadm。jpg ' border=' 0 ' name=' images 2 '/div class=' Dragable ' id=' block 1 ' onMouseOver=' Dragobj=block 1；拖动=1;'style=' z-index : 10左： 0px宽度： 0px绝对位置：top : 150 pxh h8 : 0px ' onMouseOut=' ' drag=' 0 ' img on mouse wheel=' return on wheelzoom(this)' style=' zoom : 0 0.7 ' src=' http : images/add 8400 gw1eeazlmtqa 8j 20 qd0 mdadm。jpg ' border=' 0 ' name=' images 1 '/div div style=' text-align 3360 center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；/div/body/html核心代码如下：

onWheelZoom(obj){ //滚轮缩放zoom=parseFloat(obj。风格。缩放)；tZoom=zoom (event.wheelDelta0？0.05 : -0.05);if(tZoom0.1)返回trueobj。风格。zoom=TZoom返回false}js关键代码：

拖动=0移动=0 var ie=文档。全部；var nn6=document.getElementById！document . all var is drag=false var y，x；var oDragObj函数move mouse(e){ if(is drag){ odragobj。风格。top=(nn6？NtI e . Clienty-y : NtI活动。client y-y)' px '；oDragObj.style.left=(nn6？NTx e .客户端x-x : NTx事件。客户端x-x)' px '；返回false} }函数initDrag(e) { var oDragHandle=nn6？目标：事件。加速；var TopElement=' HTMlWhILE(odraghandle . tagname！=topElement odraghandle。班级名称！='dragAble') { oDragHandle=nn6？odraghandle。父节点： odraghandle。父元素；} if(odraghandle。类名=' Dragable '){ is drag=true；oDragObj=oDragHandlenTY=Parseint(oDragObj。风格。top 0)；y=nn6？e . clienty :事件。客户关系；nTX=parseInt(odragobj。风格。左0)；x=nn6？e . clientx :事件。clientx文件。onmousemove=移动鼠标；返回false} }文档。onmousedown=InitDrag文件。onmouseup=新函数(' is drag=false ')；函数单击移动{ if(s==' up '){ DragObj。风格。top=ParSeint(DragObj。风格。top)100；} else if(s==' down '){ DragObj。风格。top=ParSeint(DragObj。风格。top)-100；} else if(s==' left '){ DragObj。风格。left=ParSeint(DragObj。风格。左)100；} else if(s==' right '){ DragObj。风格。left=ParSeint(DragObj。风格。左)-100；} }函数small it(){ var height 1=images 1。身高；可变宽度1=图像1。宽度；图片1。高度=高度1/1.2；图片1。宽度=宽度1/1.2；}函数bigit(){ var height 1=images 1。身高；可变宽度1=图像1。宽度；图片1。身高=身高1 * 1.2；图片1。宽度=宽度1 * 1.2；}函数真实大小(){图像1。高度=图像2。身高；图片1。宽度=图像2。宽度；第一区。风格。left=0；第一区。风格。top=0；} function featsize(){ var width 1=images 2。宽度；可变高度1=图像2。身高；可变宽度2=701;var height2=576var h=高度1/高度2；var w=宽度1/宽度2;if(高度1高度2宽度1宽度2){ images 1。高度=高度1；图片1。宽度=宽度1；} else { if(HW){ images 1。高度=高度2；图片1。宽度=宽度1 *高度2/高度1；} else { images 1。宽度=宽度2；图片1。高度=高度1 *宽度2/宽度1；} }块1。风格。left=0；第一区。风格。top=0；} onWheelZoom(obj){//滚轮缩放zoom=parseFloat(obj。风格。缩放)；tZoom=zoom (event.wheelDelta0？0.05 : -0.05);if(tZoom0.1)返回trueobj。风格。zoom=TZoom返回false}以上就是为大家分享的射流研究…实现图片放大和拖拽特效代码，希望大家可以喜欢。