推荐一个不错的图片浏览效果_图象特效-js教程-PHP中文网

受那位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="http://desktop.yesky.com/picupload/20040624/1641151.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">
T
O
O
L
S</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="http://desktop.yesky.com/picupload/20040624/1641151.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> 
<a href="mailto:sjx.saxon@gmail.com">sjx.saxon@gmail.com</a> 
<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="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" alt="Oops" onclick="imgChg(this.src)"><img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="Oops" onclick="imgChg(this.src)"><img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" onclick="imgChg(this.src)"><img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1812">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680372760182.png" alt="一览AI绘图">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1812">一览AI绘图</a>
                            <p>一览AI绘图是一览科技推出的AIGC作图工具，用AI灵感助力，轻松创作高品质图片</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="一览AI绘图">
                                <span>45</span>
                            </div>
                        </div>
                        <a href="/ai/1812" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="一览AI绘图">
                        </a>
                    </div>
                 
<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插件开发怎样使用npm管理依赖_npm在JavaScript插件开发中的使用教程 js 四舍五入保留一位小数 JS注解怎么标注字符串类型_ JS字符串类型参数的注解使用说明如何在Outlook中保留HTML/CSS生成的邮件签名样式 JS注解怎么标注交叉类型_ JS交叉类型参数的注解方法与示例