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

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

Javascript: 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码; 浮动广告js类实现; 使用透明叠加法美化文件上传界面的代码; 用Div仿showModalDialog模式菜单的效果的代码; JsEasy简介 JsEasy是什么?与下载; 网页屏蔽(左右键,代码等)的非JS方法; 在IE模态窗口中自由查看HTML源码的方法; 点下网页的任意地方,都可到达指定页面的js代码; 实例学习Javascript之构建方法、属性; 腾讯QQ网页在线客服，隐藏在网页一侧的隐现效果二; 腾讯QQ网页在线客服，随网页滚动条上下移动的效果一; 可以媲美Flash的JS导航菜单; js实现的XP风格的右键菜单; 用JavaScript实现仿Windows关机效果; 学习YUI.Ext基础第一天; 学习YUI.Ext 第四天--对话框Dialog的使用; Gird组件 Part-3:范例RSSFeed Viewer; 可缩放Reloaded-一个针对可缩放元素的复用组件; 简单三步，搞掂内存泄漏; pjblog修改技巧汇总

No. « ‹ 202 203 204 205 › »

技术文章搜索

关键字

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

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

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