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

更新时间：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实现图片裁剪
要进行图片编辑，最重要要能够对图片进行裁剪。主要的实现分成两部分，一部分是前端利用js进行裁剪区域选择，第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
2016-08-08
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
这篇文章主要介绍了js时间戳转yyyy-MM-dd HH-mm-ss工具类，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
gojs实现蚂蚁线动画效果
这篇文章介绍了gojs实现蚂蚁线动画效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
Javascript实现字数统计
现在流行的Twitter等微博客网站，有一个很好的用户体验，就是在文本框中输入文字的时候，会自动统计输入的字符，并显示用户还能输入的字符，在限制了140个字的微博客中，这样的小提示可以很好的增强用户体验。
2015-07-07
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
这篇文章主要为大家详细介绍了移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
使用正则表达式的格式化与高亮显示json字符串
这篇文章主要介绍了使用正则表达式的格式化与高亮显示json字符串的方法，非常的简单实用,需要的朋友可以参考下
2014-12-12
JS获取对象属性API汇总枚举symbol
这篇文章主要为大家介绍了JS获取对象属性API汇总可枚举性不可枚举性及symbol介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JavaScript动画原理之如何使用js进行动画效果的实现
在现在做页面很多时候都会用上动画效果,比如下拉菜单,侧边搜索栏,层的弹出与关闭等等,下面这篇文章主要给大家介绍了关于JavaScript动画原理之如何使用js进行动画效果实现的相关资料,需要的朋友可以参考下
2023-04-04
JavaScript时间转换处理函数
这篇文章主要介绍了JavaScript时间转换处理函数的方法的相关资料,需要的朋友可以参考下
2015-04-04
利用JS判断元素是否为数组的方法示例
这篇文章主要给大家介绍了关于利用JS判断元素是否为数组的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具