html+css实现图片滑移效果
浏览数：41 /
时间：2015年06月09日
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ChouTiZhanShi.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body{background:url("img/bg.jpg")no-repeat}
*{margin:0px; padding:0px;}
#imgs{width:1218px ; height:233px ;border-radius:9px;
box-shadow:0px 0px 8px #000;margin:20px auto;}
#imgs ul {list-style-type:none;padding:6px 0px;}
#imgs ul li{display:block;width:290px;height:200px;
border:2px solid #FFF;overflow:hidden;border-radius:9px;
margin:10px 5px;float:left;
box-shadow:0px 0px 5px #000;position:relative;}
#imgs ul li .tip h4{text-align:center;margin:3px;}
#imgs ul li .tip p{text-align:center;margin:3px;font-family:"微软雅黑"}
#imgs ul li img{border-radius:9px;}
#imgs ul li .tip{width:300px;height:200px;background:#CDCDCD;
position:absolute;top:0px;left:300px;border-radius:9px;}
#imgs ul li.first{width:600px;}
#imgs ul li.first img{width:290px;}
#imgs ul li.first .tip h4{text-align:center;margin:3px;}
#imgs ul li.first .tip p{text-align:center;margin:2px;font-family:"微软雅黑"}
#imgs ul li {width:186px;}
#imgs ul li img{width:186px;}
</style>
</head>
<body>
<div id="imgs">
<ul>
<li class="first">
<img src="img/1.jpg"width=290px height=200px/>
<div class="tip">
<h4>我的小跑车</h4>
<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
游戏在风中不断追逐他的梦
天空是永恒的<br>家大地就是他的王国
飞翔是生活我们的童年也像追逐成长吹来的风<br>
轻轻地吹着梦想 慢慢地升空<br>
红色的蜻蜓是我小时侯的小小英雄<br>
多希望有一天能和他一起飞<br>
</p>
</div>
</li>
<li>
<img src="img/2.jpg"width=290px height=200px/>
<div class="tip">
<h4>我的小跑车</h4>
<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
游戏在风中不断追逐他的梦
天空是永恒的<br>家大地就是他的王国
飞翔是生活我们的童年也像追逐成长吹来的风<br>
轻轻地吹着梦想 慢慢地升空<br>
红色的蜻蜓是我小时侯的小小英雄<br>
多希望有一天能和他一起飞<br>
</p>
</div>
</li>
<li>
<img src="img/3.jpg"width=290px height=200px/>
<div class="tip">
<h4>我的小跑车</h4>
<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
游戏在风中不断追逐他的梦
天空是永恒的<br>家大地就是他的王国
飞翔是生活我们的童年也像追逐成长吹来的风<br>
轻轻地吹着梦想 慢慢地升空<br>
红色的蜻蜓是我小时侯的小小英雄<br>
多希望有一天能和他一起飞<br>
</p>
</div>
</li>
<li>
<img src="img/4.jpg"width=290px height=200px/>
<div class="tip">
<h4>我的小跑车</h4>
<p>飞呀 看那红色蜻蜓飞在蓝色天空<br>
游戏在风中不断追逐他的梦
天空是永恒的<br>家大地就是他的王国
飞翔是生活我们的童年也像追逐成长吹来的风<br>
轻轻地吹着梦想 慢慢地升空<br>
红色的蜻蜓是我小时侯的小小英雄<br>
多希望有一天能和他一起飞<br>
</p>
</div>
</li>
<!-- <li><img src="img/5.jpg"width=290px height=200px/></li>
<li><img src="img/6.jpg"width=290px height=200px/></li>
<li><img src="img/7.jpg"width=290px height=200px/></li>
<li><img src="img/8.jpg"width=290px height=200px/></li> -->
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#imgs ul li").hover(function(){
//alert("wew");
$(this).stop(true,true).animate({width:"600px"},800).siblings().stop(true,true).animate({width:"186px"},800);
$(this).siblings().find("img").stop(true,true).animate({width:"186px"},800);
$(this).find("img").stop(true,true).animate({width:"290px"},800)
},function(){
$("#imgs ul li").stop(true,true).animate({width:"290px"},800);
$(this).siblings().find("img").stop(true,true).animate({width:"290px"},800);
});
</script>
</body>
</html>
</span></strong>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
