鼠标划过图片，加边框并且方向是从上到下划过，下层上浮文字

效果如图：

鼠标移开的效果：

 鼠标划过的效果：

html页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<title>鼠标划过图片，加边框，从上到下划过</title>
<link rel="stylesheet" href="ui.css"/>
<script src="js/jquery.js"  type="text/javascript"></script>
</head>
<body>
<div id="main" class="wraper">
    <div id="works_gallery" class="section">
         <div class="wrap">
                 <div class="cont">
                        <div class="gallery">
                            <div class="slideWrap">
                                <ul>
                                    <li>
                                        <dl>
                                              <dd>
                                                <a class="pic" href="#">
                                                <span class="border"></span>
                                                <img src="images/1.jpg" border="0"  alt="天津金融街世纪中心 天华建筑" /></a>
                                                <span class="title">天津金融街世纪中心</span>
                                            </dd>
                                                               
                                        </dl>
                                    </li>
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</div>
<script type="text/javascript" src="js/Validform_min.js" ></script>
<script type="text/javascript" src="js/global.js" ></script>
<script type="text/javascript" src="js/jquery.Xslider.js" ></script>
<script type="text/javascript" src="js/works.js" ></script>
</body>
</html>

css代码如下：

#works_gallery {}
#works_gallery .gallery { position: relative; padding-top:36px;}
#works_gallery .gallery .slideWrap { position: relative; width: 960px; overflow: hidden }
#works_gallery .gallery ul { position: relative; width: 20000px;}
#works_gallery .gallery li { float: left; width: 980px; overflow: hidden}
#works_gallery .gallery dl { width: 980px; }
#works_gallery .gallery dd {float: left; position: relative; width: 196px; height: 155px; overflow: hidden; }
#works_gallery .gallery dd a.pic { display: block; width: 175px; height: 128px; overflow: hidden;}
#works_gallery .gallery dd a.pic .border { display: block; margin-top: -6px; position: absolute; width: 169px; height: 0; border: 3px solid #f08200; overflow: hidden;}
#works_gallery .gallery dd.now a.pic .border { display: block; margin-top:0; height: 122px; 
	-webkit-transition:0.3s ease-in-out;
	-moz-transition:0.3s ease-in-out;
	-o-transition:0.3s ease-in-out;
	-ms-transition:0.3s ease-in-out; }
#works_gallery .gallery dd .title { position: absolute; display: block; margin-top: 30px; width: 175px; text-align: center;
	-webkit-transition:0.3s ease-in-out;
	-moz-transition:0.3s ease-in-out;
	-o-transition:0.3s ease-in-out;
	-ms-transition:0.3s ease-in-out;
}
#works_gallery .gallery dd.now .title {margin-top: 2px; 
	-webkit-transition:0.3s ease-in-out;
	-moz-transition:0.3s ease-in-out;
	-o-transition:0.3s ease-in-out;
	-ms-transition:0.3s ease-in-out;
	}

　　所用到的js代码链接地址：

http://www.thape.com/tools/jquery.js

http://www.thape.com/tools/Validform_min.js

http://www.thape.com/webfiles/js/global.js

http://www.thape.com/tools/jquery.Xslider.js

http://www.thape.com/webfiles/js/works.js

这个是在网站中看到的比较新颖的页面效果。就整理出来，希望对大家有用。声明一下，这个从上向下滑动的效果不兼容IE。

posted on 2012-03-15 16:12 爱睡觉的鱼阅读(667) 评论(0) 收藏举报