Another way to achieve 'fun magnifying glass effect'_javascript skills

Aoao posted about the "fun magnifying glass effect" some time ago. After reading it today, I found that there is a simple way to achieve it, that is, using internal and external patch adjustments.
Those who are interested can think about it.

<style type="text/css"> <!-- a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px 宋体; text-align:center; text-decoration:none; border:1px solid orange; } a:hover { position:relative; margin:0 -9px 0 -9px; padding:0 5px; width:30px; height:30px; font:bold 16px/30px 宋体; color:#000; border:1px solid black; background:#eee; } --> </style> <div> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Change to picture

<style type="text/css"> <!-- a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px 宋体; text-align:center; text-decoration:none; border:1px solid orange; } a:hover { position:relative; margin:0 -9px 0 -9px; padding:0 5px; width:30px; height:30px; font:bold 16px/30px 宋体; color:#000; border:1px solid black; background:#eee; } a:hover img { width:100%; height:100%; } img { border:0 } --> </style> <div> <a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a> <a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a> <a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a><a href="#"> <img src="http://files.jb51.net/upload/2006111495715189.gif" alt=""> </a> </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Paging for enlargement

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Paging for enlargement</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> <h1>Paging for enlargement</h1> <p>An interesting pagination, you can see the attached effect in Internet Explorer 7 or Firefox, because it is really lazy. The beautified style has not been updated. Because it can only be used with my page.. Hahaha..</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 © 2006 <a rel="me" href="http://www.loaoao.com/" title="Beautiful Style « 样式之美 » www.loaoao.com">aoao</a> . <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

I believe it is estimated Many beginners do not understand the margin in this example. If you do not understand it or understand it thoroughly, please look at the picture below. If you are familiar with it, please skip it. Hehe!