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

所属分类：网络编程 / JavaScript 阅读数： 136

收藏 0赞 0分享

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Map Image</title>   </head> <body onload="alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');"> <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">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="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>    </body> </html>

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

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

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

打包文件下载

更多精彩内容其他人还在看

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

Node.js事件的正确使用方法

微信小程序自定义导航栏实例代码

js字符串处理之绝妙的代码

vue设计一个倒计时秒杀的组件详解

详解服务端预渲染之Nuxt（介绍篇）

javascrit中undefined和null的区别详解

浅谈javascript中的prototype和proto的理解

详解vue中this.$emit()的返回值是什么

浅谈express.js框架中间件（middleware）

vue自定义指令directive的使用方法

网络赚钱

站长故事

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

Node.js事件的正确使用方法

微信小程序自定义导航栏实例代码

js字符串处理之绝妙的代码

vue设计一个倒计时秒杀的组件详解

详解服务端预渲染之Nuxt（介绍篇）

javascrit中undefined和null的区别详解

浅谈javascript中的prototype和__proto__的理解

详解vue中this.$emit()的返回值是什么

浅谈express.js框架中间件（middleware）

vue自定义指令directive的使用方法

网络赚钱

站长故事

浅谈javascript中的prototype和proto的理解