推荐一个不错的图片浏览效果

2023-02-08 原文

受那位WPSXXX的 IMG大于DIV 的启发写的
有不足之处如果有什么好的修改或建议希望能给我一份copy 谢谢
sjx.saxon@gmail.com

<title>Map Image</title>
<style type="text/css"> * {margin:0px auto;padding:0px;text-align:center;} * {font-size:9pt;font-family:Arial;} body {margin-top:20px;} body{-moz-user-select: none;-khtml-user-select: none;user-select: none;} div {position:relative;width:400px;height:400px;} font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;} /* Img Show Zone */ #imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;} #imgShow img {border:none;} /* Control Bar Style */ #ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;} #ctlBar[id] {bottom:-2px;right:-2px;} .ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;} .ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;} .ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;} .ctlRight {width:15%;height:70%;float:right;overflow:hidden;} #ctlBar img {border:none;display:block;} .ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;} * html .ctlBottom a {margin-left:0px;margin-right:0px;} .ctlBottom a:hover {color:#3cf;} #arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;} #arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;} #arrLeft {float:left;margin:2px;width:16px;height:16px;} #arrRight {float:right;margin:2px;width:16px;height:16px;} .ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;} #ctlCenter {width:70%;height:70%;float:left;overflow:hidden;} #dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;} * html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);} #pre {position:relative;} /* top:0px;left:0px; */  /* Hide ctl bar */ #ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;} * html #ctlHide {right:0px;bottom:0px;} /* Test Other Parts */ #test {margin-top:10px;} #test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;} </style>
<script type="text/javascript"> var p=1; var prep; var imgp; var px; var py; var msx; var msy; var tmpx; var tmpy; var dx=0; var dy=0; var dragfg=false; function pDrag(e){ if(dragfg){ var pcon=document.getElementById("ctlCenter"); var pdiv=document.getElementById("dragDiv"); var pimg=document.getElementById("pre"); var dltx=e.clientX-tmpx; var dlty=e.clientY-tmpy; var marl=(pcon.clientWidth-pimg.width)/2; var marr=marl pimg.width-pdiv.clientWidth; var mart=(pcon.clientHeight-pimg.height)/2; var marb=mart pimg.height-pdiv.clientHeight; var divt=parseInt(pdiv.style.top); var divl=parseInt(pdiv.style.left); var demox=divl dltx; var demoy=divt dlty; if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox "px"; if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy "px"; tmpx=e.clientX; tmpy=e.clientY; //return false; } } function sDrag(e) { var temp = (typeof e.target != "undefined")?e.target:e.srcElement; dx=0; dy=0; if(!dragfg) { msx=e.clientX; msy=e.clientY; } if(temp.id=="dragDiv"){ dragfg=true; px=(typeof(e.offsetX)=="undefined")?e.layerX-2:e.offsetX; py=(typeof(e.offsetY)=="undefined")?e.layerY-2:e.offsetY; tmpx=e.clientX; tmpy=e.clientY; } } function eDrag(e){ dragfg=false; var scrLeft=parseInt(document.getElementById("dragDiv").style.left)-(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2; var scrTop=parseInt(document.getElementById("dragDiv").style.top)-(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2; var ppp=document.getElementById("imgShow").clientWidth/document.getElementById("dragDiv").clientWidth; o.scrollTop=scrTop*ppp; o.scrollLeft=scrLeft*ppp; } </script><div> <div id="imgShow"> <img id="pic" src="https://resources.devmax.cn/uploads/20230208/a93d29e147d42587e297fa36eb508a56.jpg" alt="Oops">
</div> <div id="ctlBar"> <div class="ctlTop">
<span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div> <div class="ctlLeft">TOOLS</div> <div class="ctlRight"> <font id="arrUp" onmouseover="imgScroll('up');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font> <font id="arrDown" onmouseover="imgScroll('down');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font> </div> <div id="ctlCenter">
<img id="pre" src="https://resources.devmax.cn/uploads/20230208/a93d29e147d42587e297fa36eb508a56.jpg" alt="Oops"><div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div> </div> <div class="ctlBottom"> <font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font> sjx.saxon@gmail.com <font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font> </div> </div> <span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span> </div> <p id="test"> <img src="https://resources.devmax.cn/uploads/20230208/7214dd7a5e73e565b4e0a3331f2d18ed.jpg" alt="Oops" onclick="imgChg(this.src)"><img src="https://resources.devmax.cn/uploads/20230208/9694d35ff438a41ae0155baddbce8aa7.jpg" alt="Oops" onclick="imgChg(this.src)"><img src="https://resources.devmax.cn/uploads/20230208/a93d29e147d42587e297fa36eb508a56.jpg" alt="Oops" onclick="imgChg(this.src)"><img src="https://resources.devmax.cn/uploads/20230208/2ee57f2eabd4ddfb4ec0a2802b6f0c3a.JPG" alt="Oops" onclick="imgChg(this.src)"></p> <p>本地浏览IE下有效<input type="file" id="viewLocal"><input type="button" value="Change Pic" onclick="chkValue('viewLocal');"></p> <p>URL图片地址浏览<input type="text" id="viewOnline"><input type="button" value="Change Pic" onclick="chkValue('viewOnline');"></p> <script type="text/javascript"> function imgChg(s){ if(document.getElementById('ctlBar').style.display=="none"){ document.getElementById('ctlBar').style.display="block"; document.getElementById('ctlHide').style.display="none"; var flag=true; } var newImg=document.createElement("img"); newImg.id="pre"; newImg.alt="Oops"; newImg.onmouseout="eDrag(event);" newImg.src=s; document.getElementById("pic").src=s; document.getElementById("ctlCenter").replaceChild(newImg,document.getElementById("pre")); preImgInit(); if(flag){ document.getElementById('ctlBar').style.display="none"; document.getElementById('ctlHide').style.display="block"; } o.scrollTop=0; o.scrollLeft=0; } function chkValue(ob) { var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase(); if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value); } document.getElementById("viewOnline").value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg"; </script><script type="text/javascript"> var sp=5; var tc; function imgScroll(d){ var ptx=o.scrollLeft; var pty=o.scrollTop; if(tc) clearInterval(tc); if(d=="up"){ tc=setInterval("up()",30); } else if(d=="down"){ tc=setInterval("down()",30); } else if(d=="left"){ tc=setInterval("left()",30); } else if(d=="right"){ tc=setInterval("right()",30); } else{ return alert("There must be something wrong..."); } } function up() {o.scrollTop -= sp; document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2 o.scrollTop*prep "px";} function down() {o.scrollTop  = sp; document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2 o.scrollTop*prep "px";} function left() {o.scrollLeft -= sp; document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2 o.scrollLeft*prep "px";} function right() {o.scrollLeft  = sp; document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2 o.scrollLeft*prep "px";} function mvStop() { if(tc) clearInterval(tc); } </script><script type="text/javascript"> function preImgInit(){ var imgx=document.getElementById("pre").width; var imgy=document.getElementById("pre").height; if(imgx==imgy) { document.getElementById("pre").style.width="100%"; document.getElementById("pre").style.height="100%"; prep=document.getElementById("pre").clientHeight/imgy; imgp=document.getElementById("imgShow").clientHeight/imgy; document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight "px"; document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight "px"; document.getElementById("dragDiv").style.left="0px"; document.getElementById("dragDiv").style.top="0px"; } else if(imgx>imgy) { document.getElementById("pre").style.width="100%"; document.getElementById("pre").style.height=imgy/imgx*100 "%"; prep=document.getElementById("pre").clientWidth/imgx; imgp=document.getElementById("imgShow").clientWidth/imgx; document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth "px"; document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientWidth "px"; document.getElementById("dragDiv").style.left="0px"; document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2 "px"; document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2 "px"; } else { document.getElementById("pre").style.height="100%"; document.getElementById("pre").style.width=imgx/imgy*100 "%"; prep=document.getElementById("pre").clientHeight/imgy; imgp=document.getElementById("imgShow").clientHeight/imgy; document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight "px"; document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight "px"; document.getElementById("dragDiv").style.top="0px"; document.getElementById("dragDiv").style.left=(document.getElementById("pre").offsetLeft-1) "px"; } } document.body.onselectstart=function(){return false}; preImgInit(); var o=document.getElementById("imgShow"); </script>

[Ctrl A 全选注:引入外部Js需再刷新一下页面才能执行]

(不会封装代码有待更一步优化...)
关于层拖动第一次写参考了一些别人的方法直接在mousedown里加mousemove事件在mouseup里取消move事件写不来只能手动加在div上面加3个事件...

PS:貌似这素自从加入51js后第2个原创(也不知道别人写过没应该写过吧...) 记的没错的话和第一次写相隔了4年多了...-_-|||...看着代码能运行感觉真好早知道应该考计算机系的...

打包文件下载

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下