国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热


News新聞

業(yè)界新聞動態(tài)、技術前沿
Who are we?

您的位置：首頁      JS/JQ/AJAX      很簡單的圖片翻滾特效

很簡單的圖片翻滾特效

標簽： 發(fā)布日期：2014-03-14 00:00:00 1222

滾動圖片特效是前端開發(fā)常用的特效，適合在有限的空間展示更多的內容，今天介紹的這款jQuery橫向無縫圖片滾動代碼，可左右滾動顯示圖片，兼容各大主流瀏覽器，包括IE6這類古董級東東，推薦試用！

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.9u769.cn" /> 
<title>深圳網(wǎng)站建設 - 深圳樂道網(wǎng)絡科技</title> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;} 
.list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;} 
.list li img{ float:left; width:150px; height:80px; border:none;} 
.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;} 
</style> 
<script src="http://www.9u769.cn/inc/templates/frontend/ledaokj/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"> 
$(function () { 
$('.list li').hover(function () { 
$(this).children('a,img').stop(); 
$(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () { 
$(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200); 
}); 
 
}, function () { 
$(this).children('a,img').stop(); 
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () { 
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200); 
 
}); 
}); 
 
}); 
</script> 
</head> 
<body> 
<ul class="list"> 
<li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li> 
<li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li> 
<li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li> 
<li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li> 
<li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li> 
<li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li> 
<li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li> 
<li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li> 
 
</ul> 
</body> 
</html>