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

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

Javascript: [HTML/CSS/Javascript]WWTJS; DynamicOptionList连动菜单代码; 用meta实现的页面跳转代码; 带缓冲的收缩与展开内容效果; 删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。; javascript入门·对象属性方法大总结; javascript入门·动态的时钟,显示完整的一些方法,新年倒计时; JavaScript 入门·JavaScript 具有全范围的运算符; 用javascript实现模拟火焰; JavaScript加密解密7种方法总结分析; javascript一段创建层的代码; 简洁的一个实现网页全屏代码; 关于 byval 与 byref 的区别分析总结; 表单填写时用回车代替TAB的实现方法; javascript currentTarget对象介绍; js文本中搜索关键词输入效果; javascript实现的左右选择框效果代码; JS网络游戏-(模拟城市webgame)提供的一些例子下载; javascript最短的拖动代码[兼容FF]; javascript实现的LI列表输出，隔行同色的代码

No. « ‹ 84 85 86 87 › »

技术文章搜索

关键字

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

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

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