打印

这个牛效果

求教 http://www.cssplay.co.uk/menu/lightbox3#Portraits  页面图片效果的大概思路,有教程最好,谢

回1楼的提问

复制内容到剪贴板
代码:
<!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>
    <title>a</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%;
        
        }
        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;
        
        }
        
    </style>
</head>
<body>
<ul id="hovershow">
    <li><a href="1#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/1.jpg" width="128" height="128" alt="test" /></a></li>
    <li><a href="2#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/2.jpg" width="128" height="128" alt="test" /></a></li>
    <li><a href="3#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/3.jpg" width="128" height="128" alt="test" /></a></li>
    <li><a href="4#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/4.jpg" width="128" height="128" alt="test" /></a></li>
    <li><a href="5#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/5.jpg" width="128" height="128" alt="test" /></a></li>
    <li><a href="6#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/6.jpg" width="128" height="128" alt="test" /></a></li>
    <li><a href="7#" title="test"><img src="http://www.rotui.net/lab/a/zoom/images/7.jpg" width="128" height="128" alt="test" /></a></li>
</ul>
</body>
</html>
不错·啊

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
效果不错.
高清手机图片

回复 #2 zhiye 的帖子



 提示:您可以先修改部分代码再运行
努力学习中。。。

TOP

第一个;

 提示:您可以先修改部分代码再运行
第二个:

 提示:您可以先修改部分代码再运行
第三个:

 提示:您可以先修改部分代码再运行
赤脚跳着狐步舞(子鼠)我的BLOG:www.zishu.cn

TOP

楼上的,第3个有问题哦.

TOP

相冊阿?我也發一個:
http://wwwc.co.cc
進去后點作品展示就可以看到了
支持正體字,只因有心
[AD] 雲南區電腦銷售  : 加拿大|美國|留學|移民

TOP

不错.先收藏

TOP

子鼠的相册不错呀

TOP

个人觉得#6第一个不错,好好研究下先!
学习,学习!

TOP



 提示:您可以先修改部分代码再运行
我觉得如果第二个个第三个结合起来会好一点,这是改的第三个就改了个路径

TOP

效果确实不错
designblog.com.cn

TOP

我一直奇怪的是子鼠的网站上的图片怎么打开的这么快。
努力www.ttde.cn

TOP

收~~~~~~~好东西

TOP

真是牛人啊,我要跟你们学学!

TOP

漂亮,顶上去
网友

TOP

顶~~~

TOP

#6 好东西.收了.

TOP

好东西.赞一下.
www.twocity.cn

TOP

6楼的,赞,收藏了,喜欢,暂时还不会写JS,嘿嘿
维拉影视

TOP

好东西
[wma]http://jie.splan.cn/ggldl/梅艳芳.mp3[/wma]

TOP

那个鸵鸟很茫然

TOP

嗯,还是有点意思滴
我的  i.grosn.com

TOP