鼠标滑过可以看到图片放大效果，本效果在IE7和IE8下工作良好，在IE6下可能会有些问题
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<style type="text/css">
#info p.info {padding:0 10px 10px 10px; margin:0;}
div.imageHolder {position:relative; width:240px; height:180px; z-index:100; float:left; padding:0 20px 10px 0;
margin-left:10px; display:inline;}
div.pad {float:left; float:left; width:240px; height:180px;}
ul.outer {padding:0; margin:0; list-style:none;}
ul.outer ul {padding:0; margin:0; list-style:none;}
div.pad a {text-decoration:none; color:#000;}
div.pad table {border-collapse:collapse; padding:0; margin:-1px;}
ul.outer li {display:block; float:left; padding:9px 12px; background:url(zoom/blank.gif);}
* html ul.outer li {padding:0;} /* for IE6 */
* html .pad a {float:left; display:block; padding:9px 12px; background:url(zoom/blank.gif); cursor:default;}
/* for IE6 */
div.pad li.inner img {width:100%; display:block; border:0;}
ul.outer li:hover {padding:0;}
ul.outer li:hover img {height:auto;}
* html .pad a:hover {padding:0;}
* html .pad a:hover img {height:auto;}
div.slide {left:120px; top:10px; width:640px; height:0; position:absolute;}
div.contents1 {position:absolute; left:0; top:0; width:240px; height:180px; z-index:-1;}
div.contents1 img {width:100%; height:100%;}
div.pad .p1:hover div.contents1 {width:290px; height:217px;}
div.pad .p2:hover div.contents1 {width:340px; height:255px;}
div.pad .p3:hover div.contents1 {width:390px; height:292px;}
div.pad .p4:hover div.contents1 {width:440px; height:330px;}
div.pad .p5:hover div.contents1 {width:490px; height:367px;}
div.pad .p6:hover div.contents1 {width:540px; height:405px;}
div.pad .p7:hover div.contents1 {width:590px; height:442px;}
div.pad .p8:hover div.contents1 {width:640px; height:480px;}
div.pic1 div.contents1 {background:url(zoom/ladybird-t.jpg) no-repeat center center;}
</style>
在网页<body>区添加以下代码
<div class="imageHolder"> <div class="pad pic1"> <!--[if lte IE 6]><a class="p1 wrap" href="http://www.sharejs.com"><table><tr><td><![endif]--> <ul class="outer"><li class="p1"><!--[if lte IE 6]><a class="p2 wrap" href="http://www.sharejs.com"><table><tr><td><![endif]--> <ul><li class="p2"><!--[if lte IE 6]><a class="p3 wrap" href="http://www.sharejs.com"><table><tr><td><! [endif]--> <ul><li class="p3"><!--[if lte IE 6]><a class="p4 wrap" href="http://www.sharejs.com"><table><tr><td><! [endif]--> <ul><li class="p4"><!--[if lte IE 6]><a class="p5 wrap" href="http://www.sharejs.com"><table><tr><td><! [endif]--> <ul><li class="p5"><!--[if lte IE 6]><a class="p6 wrap" href="http://www.sharejs.com"><table><tr><td><! [endif]--> <ul><li class="p6"><!--[if lte IE 6]><a class="p7 wrap" href="http://www.sharejs.com"><table><tr><td><! [endif]--> <ul><li class="p7"><!--[if lte IE 6]><a class="p8 wrap" href="http://www.sharejs.com"><table><tr><td><! [endif]--> <ul><li class="inner p8"> <img src="zoom/blank.gif" alt="" /> <div class="contents1"> <img src="zoom/ladybird.jpg" alt="" /> </div> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </div> </div> <p class="info bold">Ladybirds</p> <p class="info"><b>Coccinellidae</b> is a <a href="http://en.wikipedia.org/wiki/Family_(biology)" title="Family (biology)">family</a> of <a href="http://en.wikipedia.org/wiki/Beetle" title="Beetle">beetles</a>, known variously as <b>ladybirds</b> (<a href="http://en.wikipedia.org/wiki/British_English" title="British English">British English</a>, <a href="http://en.wikipedia.org/wiki/Australian_English" title="Australian English">Australian English</a>, <a href="http://en.wikipedia.org/wiki/South_African_English" title="South African English">South African English</a>), <b>ladybugs</b> (<a href="http://en.wikipedia.org/wiki/North_American_English" title="North American English">North American English</a>) or <b>lady beetles</b> (preferred by some scientists). Lesser- used names include <b>ladyclock</b>, <b>lady cow</b>, and <b>lady fly</b>.</p> <p class="info">They are small <a href="http://en.wikipedia.org/wiki/Insect" title="Insect">insects</a>, ranging from 1 mm to 10 mm (0.04 to 0.4 inches), and are commonly yellow, orange, or scarlet with small black spots on their <a href="http://en.wikipedia.org/wiki/Elytra" title="Elytra" class="mw-redirect">wing covers</a>, with black legs, head and <a href="http://en.wikipedia.org/wiki/Antenna_(biology)" title="Antenna (biology)">antennae</a>. A very large number of species are mostly or entirely black, grey, or brown and may be difficult for non-<a href="http://en.wikipedia.org/wiki/Entomologist" title="Entomologist" class="mw- redirect">entomologists</a> to recognize as coccinellids (and, conversely, there are many small beetles that are easily mistaken as such, like <a href="http://en.wikipedia.org/wiki/Tortoise_beetle" title="Tortoise beetle">tortoise beetles</a>).</p> <p class="info">Coccinellids are found worldwide, with over 5,000 <a href="http://en.wikipedia.org/wiki/Species" title="Species">species</a> described, more than 450 native to <a href="http://en.wikipedia.org/wiki/North_America" title="North America">North America</a> alone.</p> <p class="info">A few species are <a href="http://en.wikipedia.org/wiki/Pest_(organism)" title="Pest (organism)">pests</a> in North America and Europe, but they are generally considered useful insects as many species feed on <a href="http://en.wikipedia.org/wiki/Aphid" title="Aphid">aphids</a> or <a href="http://en.wikipedia.org/wiki/Scale_insect" title="Scale insect">scale insects</a>, which are pests in gardens, agricultural fields, orchards, and similar places. The <a href="http://en.wikipedia.org/wiki/Mall_of_America" title="Mall of America">Mall of America</a>, for instance, releases thousands of ladybugs into its indoor park as a natural means of <a href="http://en.wikipedia.org/wiki/Pest_control" title="Pest control">pest control</a> for its gardens.</p> <p class="info">Source: <a href="http://en.wikipedia.org/wiki/Coccinellidae">Wikipedia - The Free Encyclopedia</a></p> <p class="info">Copyright ©2009 stu nicholls - CSS play</p>
