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

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

Javascript: javascript 关闭IE6、IE7; javascript substr和substring用法比较; javascript 强制弹出窗口代码-跨拦截; javascript 获取多条数据(模拟ajax获取数据); js 分页代码带切换效果; 选择指定数量后checkbox不可选(变灰)javascript代码; javascript 图片上传预览-兼容标准; jquery 截取字符串的实现; jquery tagname 取得方法; scrollTop 用法说明; javascript 倒排序方法; 慎用 somefunction.prototype 分析; 几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf(); javascript 根据歌名获取播放地址和歌词内容; js在Firefox与IE中对DOM对像的引用的比较; Javascript String对象扩展HTML编码和解码的方法; javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐); Javascript 获取字符串字节数的多种方法; javascript 常用方法总结; cookie丢失问题(认证失效) Authentication （用户验证信息）也会丢失

No. « ‹ 139 140 141 142 › »

技术文章搜索

关键字

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

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

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