js放大镜放大图片效果- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js放大镜放大图片效果

Javascript: java编程教程：JDBC技术简介; 浅析Ajax为什么优于JSF; JDK5.0中collection都有哪些变化; 对性能和可扩展产生深远影响的J2EE; HTTP消息头字段深入介绍; java教程：网站开发中的入侵问题检测; 简要介绍实现多线程环形缓冲的方法; DOM文档如何与XML文件互换？; Java教程：如何实现FTP功能; Bing API的简单了解; Javascript对网页输入框的字数限制; 建立支持移动设备访问的网站sitemap; window.onload和body onload; JS教程：window.event对象; 网页漂浮广告的关闭的实现代码; JavaScript教程:网页浮动定位提示效果; 常用的Javascript代码高亮脚本; 滑动导航菜单的变体使用; 解决AJAX中文回传乱码; Javascript开发是否预留退路？

No. « ‹ 173 174 175 176 › »

技术文章搜索

关键字

Javascript 中的 js放大镜放大图片效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 143 ::

收藏到网摘: n/a

定义select的边框颜色 javascript+css好多网站用的选星星实现打分功能的函数

非常漂亮的js放大镜效果代码，对于浏览图片效果应该不错哦

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>软晨学习网 js图片放大镜</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css"> body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; left:-32px; top:-32px; cursor: pointer; } #caption, #title{ color: #FFF; font-family: georgia, 'times new roman', times, veronica, serif; font-size: 1em; text-align: center; } #caption b { font-size: 2em; }
</style>
<script type="text/javascript">
</script></head><body>
<div style="position: absolute; left: 50%; top: 50%;"> <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div> <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div> <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"> <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091444_a5cdd4aa0048b187f7182f1b9ce7a6a7.jpg" alt=""></span> <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="/upload/tech/20091012/20091012091444_170c944978496731ba71f34c25826a34.jpg" alt=""></span> <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091450_c20ad4d76fe97759aa27a0c99bff6710.jpg" alt=""></span> <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091454_4e0928de075538c593fbdabb0c5ef2c3.jpg" alt=""></span> <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091459_3b3dbaf68507998acd6a5a5254ab2d76.jpg" alt=""></span> <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091510_352407221afb776e3143e8a1a0577885.jpg" alt=""></span> <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091510_da4fb5c6e93e74d3df8527599fa62642.jpg" alt=""></span> <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091514_182be0c5cdcd5072bb1864cdee4d3d6e.jpg" alt=""></span> <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091523_8d3bba7425e7c98c50f52ca1b52d3735.jpg" alt=""></span> <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091526_3c7781a36bcd6cf08c11a970fbe0e2a6.jpg" alt=""></span> <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091532_5ef0b4eba35ab2d6180b0bca7e46b6f9.jpg" alt=""></span> <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091537_cd00692c3bfe59267d5ecfac5310286c.jpg" alt=""></span> <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091538_f0adc8838f4bdedde4ec2cfad0515589.jpg" alt=""></span> <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091540_ca8155f4d27f205953f9d3d7974bdd70.jpg" alt=""></span> <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091542_c75b6f114c23a4d7ea11331e7c00e73c.jpg" alt=""></span> <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="/upload/tech/20091012/20091012091543_872488f88d1b2db54d55bc8bba2fad1b.jpg" alt=""></span> </div> <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div>
</div>
<script type="text/javascript">
</script>
</body></html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

定义select的边框颜色 javascript+css好多网站用的选星星实现打分功能的函数

Javascript 中的 js放大镜放大图片效果

评论 (0) All