在实现网站交互过程中,产品展示系统里经常有实现鼠标经过放大查看更清晰的图片的功能要求,通常情况我们使用Javascript,脚本过多会降低网站运行速度,对于一些简单的鼠标经过放大效果我们可以通过DIV+CSS实现,大大节省了资源消耗.
1.样式. <style type="text/css">
<!--
.tp{ margin:0px 10px; float:left;}
.tp a{display:block; width:130px; height:110px; }
.tp a img{border:0px; width:130px; height:110px;}
.tp a:hover{position:absolute; z-index:100; margin:0px 0 0 0px;}
.tp a:hover img{width:260px; height:220px; border:1px #d1d1d1 solid;}
-->
</style>
2.div排版
<div class="tp"><a href="#" target="_blank"><img style="border:#CCCCCC 1px solid;" src="pic/MVC02.jpg " border="0" height="147" width="127"></a></div>
<div class="tp"><a href="#" target="_blank"><img style="border:#CCCCCC 1px solid;" src="pic/qqbpu2.jpg " border="0" height="147" width="127"></a></div>
<div class="tp"><a href="#" target="_blank"><img style="border:#CCCCCC 1px solid;" src="pic/qqbpu2.jpg " border="0" height="147" width="127"></a></div>
<div class="tp"><a href="#" target="_blank"><img style="border:#CCCCCC 1px solid;" src="pic/qqbpu2.jpg " border="0" height="147" width="127"></a></div>
3.在此实例中重点是 a:hover img 的作用,对该链接下的img 对象重新设置尺寸.北京网站建设公司技术人员提醒初学者设置好图片路径.
北京网站建设 北京网页设计 网站制作（www.bjycxf.com）
