当前位置：首页 > 资讯 > 技术文档

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

时间：2021-07-16 20:26 编辑：来源：阅读：
扫一扫，手机访问

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

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

Map Image 
 
 
 
 
<div> 
<div id="imgShow"> 
[img]http://desktop.yesky.com/picupload/20040624/1641151.jpg[/img]
</img> 
</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" onmousedown="sp=sp*2;" onmouseout="mvStop();" onmouseover="imgScroll('up');" onmouseup="sp=sp/2;">↑</font> 
<font id="arrDown" onmousedown="sp=sp*2;" onmouseout="mvStop();" onmouseover="imgScroll('down');" onmouseup="sp=sp/2;">↓</font> 
</div> 
<div id="ctlCenter">[img]http://desktop.yesky.com/picupload/20040624/1641151.jpg[/img]
</img> 
<div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseout="eDrag(event);" onmouseup="eDrag(event);"></div> 
</div> 
<div class="ctlBottom"> 
<font id="arrLeft" onmousedown="sp=sp*2;" onmouseout="mvStop();" onmouseover="imgScroll('left');" onmouseup="sp=sp/2;">←</font> 
sjx.saxon@gmail.com 
<font id="arrRight" onmousedown="sp=sp*2;" onmouseout="mvStop();" onmouseover="imgScroll('right');" 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> 
 
[img]http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg[/img]
</img> 
[img]http://www.yczhang.com/upload/200606021857377727.jpg[/img]
</img> 
[img]http://desktop.yesky.com/picupload/20040624/1641151.jpg[/img]
</img> 
[img]http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG[/img]
</img>

本地浏览IE下有效<input id="viewLocal" type="file"></input><input onclick="chkValue('viewLocal');" type="button" value="Change Pic"></input>
 
URL图片地址浏览<input id="viewOnline" type="text"></input><input onclick="chkValue('viewOnline');" type="button" value="Change Pic"></input>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

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

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

[url=http://files.jb51.net/upload/jspic.rar]打包文件下载[/url]

全部评论(0)

上一篇：鼠标移动到一张图片时变为另一张图片
下一篇：仿新浪微博首页"大家正在说"渐入轮显效果

资讯排行榜
更多>>