请教，如何实现鼠标停留略图变大图(页 1) - 网页制作初级班 - 破釜沉舟论坛平面设计,Web 开发,手绘技术,Flash,灌水乐园

2006-6-20 23:55 blank

请教，如何实现鼠标停留略图变大图

我尝试做一个作品展示，页面上是略图，希望当鼠标放上时略图会浮起变成大图，鼠标挪开时再恢复成略图，那位好心人教教我，谢谢

2006-6-21 01:32 蓝鼠狼

如果不是很多的图,可以偿试用CSS控制!
[run]<!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" xml:lang="en" lang="en">
<head>
<title></title>
   <style type="text/css">
     ul#hovershow{
           list-style-type: none;
           margin: 50px;
           float: left;
           display: inline;
           clear: both;
     }
     ul#hovershow li{
           float: left;
           display: inline;
           width:64px;
           height: 64px;
           margin: 2px;
     }
     ul#hovershow li a {
           display: block;width:64px;
           height: 64px;
     }
     ul#hovershow li a img{
     border:1px #666 solid;  
     width:100%;
           height:100%;
     z-index: 1;
     }
     ul#hovershow li a:hover{
     position: absolute;
     z-index:100;
     margin: -32px 0 0 -32px;
     }
     ul#hovershow li a:hover img{
           width:128px;
           height:128px;
           border:1px red solid;
           z-index: 2;
     }
     */
   </style>
</head>

<body>
<ul id="hovershow">
   <li><a href="1#" title="pic1"><img src="http://bbs.7880.com/p_w_upload/Day_060112/10_7759.jpg" width="128" height="128" /></a></li>
   <li><a href="2#" title="pic2"><img src="http://bbs.7880.com/p_w_upload/Day_060112/10_7763.jpg" width="128" height="128" /></a></li>
   <li><a href="3#" title="pic3"><img src="http://bbs.7880.com/p_w_picpath/upload/4.gif" width="128" height="128" /></a></li>
   <li><a href="4#" title="pic4"><img src="http://bbs.7880.com/p_w_picpath/upload/6.jpg" width="128" height="128" /></a></li>
   <li><a href="5#" title="pic5"><img src="http://bbs.7880.com/p_w_picpath/upload/1984.gif" width="128" height="128" /></a></li>
</ul>
</body>
</html>
[/run]

2006-6-21 04:20 blank

正是我想要得，谢谢

2006-6-21 08:13 风云同飞

很好!代码我复制下来!谢了!

2006-6-21 11:51 coldney

[url]http://cnc.sablog.net/blog/?action=show&id=174[/url]
这个图片效果如何来实现的？？

2006-6-21 14:18 蓝鼠狼

机子挂了，coldney把机子扔过来给偶用几天！

页: [1]

查看完整版本: 请教，如何实现鼠标停留略图变大图