js放大镜放大图片效果
时间：2024-04-30 08:51:38
<!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;"> <img style="left: -11px; top: -9px;" src="/upload/20080504192147592.jpg" alt=""> <img style="left: -11px; top: -8px;" src="/upload/20080504192148526.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192151907.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192153429.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192154128.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192154190.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192154345.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192155839.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192156858.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192156118.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192157749.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192158181.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192158115.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192159820.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192201596.jpg" alt=""> <img style="left: -11px; top: -9px;" src="/upload/20080504192201700.jpg" alt=""> </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>
标签：js,放大镜,图片效果
0
投稿猜你喜欢
SQL的密码管理的六个危险判断
2012-01-05 19:07:21
Python数学建模学习模拟退火算法约束条件处理示例解析
2022-06-16 19:19:20
js实现根据文件url批量压缩下载成zip包
2024-04-22 22:15:17
15个设计得最糟糕最变态的CAPTCHA验证码
2008-09-01 17:17:00
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2023-06-06 22:45:50
mysql 单机数据库优化的一些实践
2024-01-15 19:01:25
Python之lxml安装失败的解决
2023-11-27 04:34:22
Python类属性的延迟计算
2023-07-22 15:50:33
让自定义文件下载支持断点续传
2009-03-11 19:45:00
爬虫框架 Feapder 和 Scrapy 的对比分析
2022-03-31 00:02:17
教你使用一行Python代码玩遍童年的小游戏
2021-05-15 10:14:00
Python如何设置指定窗口为前台活动窗口
2022-01-22 02:20:02
python重要函数eval多种用法解析
2023-02-08 20:16:46
使用Python设置tmpfs来加速项目的教程
2023-12-24 09:38:34
pytorch的Backward过程用时太长问题及解决
2022-12-11 00:16:06
Python sqlite3事务处理方法实例分析
2022-12-28 07:30:09
Python用selenium实现自动登录和下单的项目实战
2021-02-04 18:29:44
python中使用xlrd、xlwt操作excel表格详解
2023-06-25 03:59:51
TypeScript入门-接口
2024-06-07 15:55:26
Python读取HTML中的canvas并且以图片形式存入Word文档
2022-09-03 04:50:33
