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

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

技术文章搜索

关键字

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

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

收藏到网摘: 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