"好玩的放大镜效果" 的另一种实现方法

更新时间：2006年11月14日 00:00:00 作者：

前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整.
有兴趣的可以在琢磨琢磨.

换成图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css">  </style> <div> <a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a> <a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a> <a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a><a href="#"> <img src="/upload/2006111495715189.gif" alt="" /> </a></div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

给放大的分页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>给放大的分页</title> <meta name="KEYWords" content="css,xhtml,display,layout, style,lab, sheets, w3c,w3, web standards,pagination" /> <meta name="DEscription" content="一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果" /> <meta name="author" content="aoao" /> <meta content="all" name="robots" /> <link rel="start" href="http://www.loaoao.com" title="Home" /> <style type="text/css"> ul#hovershow{     list-style-type: none;     margin: 50px;     width:200px;     float: left;     display: inline;     clear: both; } ul#hovershow li{     float: left;     display: inline;     width:20px;     height: 20px;     margin: 2px;              } ul#hovershow li a {     display: block;     width:20px;     height:20px;     border:1px #999 solid;     color:#0984FF;     background-color:#fff;     text-decoration: none;     line-height: 20px;     font-size: 12px;     text-align: center;     font-weight: bold; } ul#hovershow li a:hover{     position: absolute;     width:40px;     height: 40px;     line-height: 40px;     font-size: 32px;     z-index:100;     margin: -10px 0 0 -10px; } ul#hovershow li:hover + li a{     position: absolute;     width:30px;     height: 30px;     line-height: 30px;     font-size: 24px;     z-index:99;     margin: -5px 0 0 -5px; } </style> </head> <body> <h1>给放大的分页</h1> <p>一个好玩的分页,Internet Explorer7或者Firefox可以看到附带的效果,因为真的很懒.美化后的样式没更新上来.因为那个是配合我的页才能用滴..挖哈哈..</p> <ul id="hovershow">     <li><a href="#1" title="#1">1</a></li>     <li><a href="#2" title="#2">2</a></li>     <li><a href="#3" title="#3">3</a></li>     <li><a href="#4" title="#4">4</a></li>     <li><a href="#5" title="#5">5</a></li>     <li><a href="#6" title="#6">6</a></li>     <li><a href="#7" title="#7">7</a></li> </ul> <p id="copyright">Copyright &copy; 2006 <a rel="me" href="http://www.loaoao.com/" title="Beautiful Style &laquo; 样式之美 &raquo; www.loaoao.com">aoao</a> .  <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

我相信估计有不少初学者对此例子中的margin没有理解透，如果你没有理解或理解透请看下图，如果你很熟悉了，请一带而过，嘿嘿！

JS+canvas动态绘制饼图的方法示例
这篇文章主要介绍了JS+canvas动态绘制饼图的方法,结合具体实例形式分析了js+canvas实现饼状图形绘制的相关操作技巧,需要的朋友可以参考下
2017-09-09
JavaScript实现点击按钮直接打印
很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，下面通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下
2016-01-01
js仿京东放大镜效果
这篇文章主要为大家详细介绍了js仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JavaScript 事件对内存和性能的影响
本文主要介绍了JavaScript 事件对内存和性能的影响。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
sessionStorage存储时多窗口之前能否进行状态共享解析
这篇文章主要为大家介绍了sessionStorage存储时多窗口之前能否进行状态共享解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
解决远程页面抓取中的乱码问题？
解决远程页面抓取中的乱码问题？...
2007-03-03
javascript检测浏览器的缩放状态实现代码
这篇文章主要介绍了javascript检测浏览器的缩放状态实现代码,需要的朋友可以参考下
2014-09-09
JavaScript实现选择框按比例拖拉缩放的方法
这篇文章主要介绍了JavaScript实现选择框按比例拖拉缩放的方法,具有等比例缩放及设置最小范围等功能,涉及javascript事件的添加、监听、页面元素动态操作及鼠标事件的响应等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
javascript实现简单的分页特效
下面给大家汇总的几个javascript实现的分页代码，当然必须要结合后台代码实现。大家可以自行分析一下代码，希望能够给大家带来一定的帮助
2015-08-08
input输入框的自动匹配(原生代码)
功能要求:使用原生代码实现，不可使用任何框架、只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗、通过键盘上的上下箭头可以对菜单进行选择等等，感兴趣的你可以参考下
2013-03-03

"好玩的放大镜效果" 的另一种实现方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具