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

网络编程 2024/9/28 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

受那位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> <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>  </head> <body onload="alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');">   <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/1641151.jpg');"><img src="/UploadFiles/2021-04-02/1641151.jpg" alt="推荐一个不错的图片浏览效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>   HideDesign by saxon TOOLS  ↑ ↓  <a href="javascript:;" onclick="showimg('http://desktop.yesky.com/picupload/20040624/1641151.jpg');"><img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="推荐一个不错的图片浏览效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a>    ← sjx.saxon@gmail.com →   Display  <p> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/likNolm87uUbI.jpg');"><img src="/UploadFiles/2021-04-02/likNolm87uUbI.jpg" alt="推荐一个不错的图片浏览效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://www.yczhang.com/upload/200606021857377727.jpg');"><img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="推荐一个不错的图片浏览效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/1641151.jpg');"><img src="/UploadFiles/2021-04-02/1641151.jpg" alt="推荐一个不错的图片浏览效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> <a href="javascript:;" onclick="showimg('http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG');"><img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" alt="推荐一个不错的图片浏览效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a> </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年多了...-_-|||...看着代码能运行感觉真好早知道应该考计算机系的...

打包文件下载

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

标签：

评论“推荐一个不错的图片浏览效果”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

最新文章

李国祥.1995-九五变奏【嘉音】【WAV+CUE】

2024/9/28

许景淳.1992-你来自何方【全美唱片】【WAV+

2024/9/28

石欣卉.2007-剧欣卉集·完整电视剧主题精丫华

2024/9/28

群星.2005-LOVE情歌集VOL.5.2CD【正东】【W

2024/9/28

孙悦.1996-伙伴【正大国际】【ＷAV+CUE】

2024/9/28

一句话新闻

苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/9/28

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

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

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

jQuery 中关于CSS操作部分使用说明

jQuery基础学习技巧总结第1/4页

评论“推荐一个不错的图片浏览效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

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

jQuery 中关于CSS操作部分使用说明

jQuery基础学习技巧总结第1/4页

评论“推荐一个不错的图片浏览效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存