JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效

web前端|js教程 JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效

JS,网页图片,查看器

web前端-js教程

修正了网上其它版本的一些错误。完美无错版

jquery 源码阅读,Vscode代码提示框,ubuntu屏幕标尺,tomcat报错日志目录,python爬虫操作,传智php ppt,外贸独立站seo推广快照,oe婚恋网站,dedemcs模板lzw

<title>JS网页图片查看器－可控制图片放大缩小还原移动效果</title> <div class="khw">asp学员管理源码,vscode默认建立html,ubuntu flex使用,tomcat8080404,sqlite 实现可视化,手机日历图标插件,前端框架pwa视频百度云,上海爬虫脚本招聘网站,php 酒店管理系统,98tang seo,网站cms 漏洞,一个简单的html网页,prestashop模板安装lzw</div> body { font-family: “Verdana”, “Arial”, “Helvetica”, “sans-serif”; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 <div class="khw">网络团队网站源码,vscode 能追踪方法吗,ubuntu字体比例,tomcat+请求等待,爬虫中random,js和php区别,潜江外包seo推广公司排名,游戏试玩网站源码,团购促销模板lzw</div>// 拖拽对象 // 参见：http://blog.sina.com.cn/u/4702ecbe010007pe var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var y,x; var oDragObj; 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”); function clickMove(s){ if(s==”up”){ dragObj.style.top = parseInt(dragObj.style.top) + 100; }else if(s==”down”){ dragObj.style.top = parseInt(dragObj.style.top) – 100; }else if(s==”left”){ dragObj.style.left = parseInt(dragObj.style.left) + 100; }else if(s==”right”){ dragObj.style.left = parseInt(dragObj.style.left) – 100; } } function smallit(){ var height1=images1.height; var width1=images1.width; images1.height=height1/1.2; images1.width=width1/1.2; } function bigit(){ var height1=images1.height; var width1=images1.width; images1.height=height1*1.2; images1.width=width1*1.2; } function realsize() { images1.height=images2.height; images1.width=images2.width; block1.style.left = 0; block1.style.top = 0; } function featsize() { var width1=images2.width; var height1=images2.height; var width2=360; var height2=200; var h=height1/height2; var w=width1/width2; if(height1<height2&&width1w) { images1.height=height2; images1.width=width1*height2/height1; } else { images1.width=width2; images1.height=height1*width2/width1; } } block1.style.left = 0; block1.style.top = 0; }   <div id="Layer1"><table border="0" cellspacing="2" cellpadding="0"><tr><td> </td><td><img decoding="async" src="http://img.jb51.net/images/map/up.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td><td> </td></tr><tr><td><img decoding="async" src="http://img.jb51.net/images/map/left.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td><td><img decoding="async" src="http://img.jb51.net/images/map/zoom.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td><td><img loading="lazy" decoding="async" src="http://img.jb51.net/images/map/right.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td></tr><tr><td> </td><td><img loading="lazy" decoding="async" src="http://img.jb51.net/images/map/down.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td><td> </td></tr><tr><td> </td><td><img loading="lazy" decoding="async" src="http://img.jb51.net/images/map/zoom_in.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td><td> </td></tr><tr><td> </td><td><img loading="lazy" decoding="async" src="http://img.jb51.net/images/map/zoom_out.jpg" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" width="20" height="20"></td><td> </td></tr></table></pre><div id='hiddenPic' style='width:0px;height:0px'><img src='http://img.jb51.net/images/map/760-480bsx.jpg' alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" border='0'></div><div id='block1' style='height: 0;width: 0' class="dragAble"> <img src='http://img.jb51.net/images/map/760-480bsx.jpg' alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" alt="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" title="JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动_图象特效" border='0'></pre>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

网页图片