熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery實現圖片漸變切換兼容ie6/Chrome/Firefox

2013-11-15 12:04:53  來源: JSP教程 
jquery代碼實現圖片漸變切換同時兼容ieChromeFirefox想學習的朋友可以測試下希望對大家有所幫助   復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<meta name="author" content="Nancle from CAU CS" />
<title>jQuery圖片漸變切換</title>
<script type="text/javascript" src="
<style type="text/css">
ul{position:relative;}
ul li{display:block; position:absolute; left:; top:}
img{width:px; height:px; border:px solid #ccc}
</style>
</head>
<body>
<ul>
<li><img src="
<li><img src="
<li><img src="
<li><img src="
</ul>
</div>
<script>
var switchSpeed = ; //圖片切換時間
var fadeSpeed = ; //漸變時間
setInterval(function(){
$(img)last()fadeOut(fadeSpeed function(){
$(this)show()parent()prependTo($(ul));
});
} switchSpeed);
</script>
</body>
</html>

  
效果預覽


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20242.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.