jquery 水平手風琴鼠標滑過標題圖片滑動切換



116 461 154



特效描述:水平手風琴 鼠標滑過標題 鼠標滑過圖片 滑動切換,jquery圖片切換效果制作水平手風琴鼠標滑過圖片切換效果,鼠標滑過依次展開標題圖片滑動切換。

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="style/style.css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

3. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.main{width:653px;margin:100px auto;border:solid 1px #ddd;}
.picon{clear:both;height:400px;padding-left:4px;overflow:hidden;background:#000;position:relative;}
.picon ul{position:absolute;top:0;left:0;height:400px;width:1000px;}
.picon li{float:left;height:400px;border-right:1px solid #ddd;width:79px;position:relative;overflow:hidden;}
.picon li.cur div{display:block;}
.picon li div{position:absolute;bottom:0;left:0;z-index:9;height:76px;background:url(images/shadow.png) repeat;font-family:Arial, Helvetica, sans-serif;font-weight:900;width:100%;color:#fff;display:none;}
*html .picon li div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/shadow.png");background:none;}
.picon li div h3{padding:4px 0 0 10px;line-height:30px;font-size:16px;line-height:26px;font-weight:900;}
.picon li div p{line-height:20px;padding:0px 10px 0;font-size:13px;}
.picon li div a{color:#fff;text-decoration:none;}
</style>
	<div class="main">
		<div class="picon" id="picon">
			<ul>
				<li>
					<img width="252" height="400" alt="jquery flow 圖片切換滾動插件 帶分頁索引按鈕控制圖片左右滾動" src="images/3485.jpg" />
					<div>
						<h3><a href="http://www.17sucai.com/">jquery圖片特效</a></h3>
						<p><a href="http://www.17sucai.com/" target="_blank">jquery flow 圖片切換滾動插件 帶分頁索引按鈕控制圖片左右滾動</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery圖片切換滾動 水平手風琴切換滾動鼠標滑過圖片水平切換" src="images/32469.jpg" />
					<div>
						<h3><a href="http://www.17sucai.com/">jquery手風琴</a></h3>
						<p><a href="http://www.17sucai.com/" target="_blank">jquery圖片切換滾動 水平手風琴切換滾動鼠標滑過圖片水平切換</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 導航菜單 jquery和CSS3制作一個動畫導航的向下滑動框菜單" src="images/3247.jpg" />
					<div>
						<h3><a href="http://www.17sucai.com/">jquery導航菜單</a></h3>
						<p><a href="http://www.17sucai.com/" target="_blank">jquery 導航菜單 jquery和CSS3制作一個動畫導航的向下滑動框菜單</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動" src="images/3458.jpg" />
					<div>
						<h3><a href="http://www.17sucai.com/">jquery文字特效</a></h3>
						<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 文字特效霓虹燈文字效果使用jQuery和CSS" src="images/39.jpg" />
					<div>
						<h3><a href="http://www.17sucai.com/">jquery文字特效</a></h3>
						<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字特效霓虹燈文字效果使用jQuery和CSS</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery表單驗證 formvalidator 插件解決整站提交表單驗證問題" src="images/34856.jpg" />
					<div>
						<h3><a href="http://www.17sucai.com/">jquery表單驗證</a></h3>
						<p><a href="http://www.17sucai.com/" target="_blank">jquery表單驗證 formvalidator 插件解決整站提交表單驗證問題</a></p>
					</div>
				</li>
			</ul>
		</div>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 疊加浮動層 滑動星星打分 層疊疊加 疊加層疊 層疊 疊加 加載更多 焦點圖 幻燈片 輪播圖 bar焦點圖 其他 圖片疊加 圖片層疊 帶標題的焦點圖 滑動手風琴 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子