作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 03:26:01 阅读 我要评论

受那位WPSXXX的 IMG大于DIV 的启发 写的 有不足之处 如果有什么好的修改或建议 希望能给我一份copy 谢谢 sjx.saxon@gmail.com Map Image * {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;} HideDesign by saxon T O O L S ↑ ↓ ← sjx.saxon@gmail.com → Display 本地浏览IE下有效 URL图片地址浏览 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行](不会封装 代码有待更一步优化...) 关于层拖动第一次写 参考了一些别人的方法 直接在mousedown里加mousemove事件 在mouseup里取消move事件 写不来 只能手动加在div上面加3个事件... PS:貌似这素自从加入51js后第2个原创(也不知道别人写过没 应该写过吧...) 记的没错的话和第一次写相隔了4年多了...-_-|||...看着代码能运行感觉真好 早知道应该考计算机系的... 打包文件下载

  推荐阅读

  Add a Formatted Table to a Word Document

Demonstration script that retrieves service data from a computer and then displays that data in a formatted table in Microsoft Word. 复制代码 代码如下:Set objWord = CreateObject("Word.Application")>>>详细阅读


本文标题:推荐一个不错的图片浏览效果

地址:http://www.17bianji.com/kaifa2/JS/30370.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)