jQuery css3鼠標懸停圖片翻滾特效



106 421 141



特效描述:jQuery css3 鼠標懸停 圖片翻滾特效,jQuery css3鼠標懸停不同位置圖片翻滾特效,左右翻滾,上下翻滾。

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/fandong.js"></script>

3. HTML代碼

<ul id="xiaoguo">
	<li>
		<img src="images/1.jpg"/>
		<span style="background:#f1f1f1; line-height:25px; text-align:center; font-size:14px; font-family:Microsoft Yahei;">
			<p style="padding-top:70px;">css3翻動效果<br />圖片和文字皆可</p>
		</span>
	</li>
	<li>
		<img src="images/2.jpg" />
		<span><img src="images/4.jpg" /></span>
	</li>
	<li>
		<img src="images/1.jpg" />
		<span><img src="images/3.jpg" /></span>
	</li>
	<li>
		<img src="images/2.jpg" />
		<span><img src="images/4.jpg" /></span>
	</li>
	<li>
		<img src="images/1.jpg" />
		<span><img src="images/3.jpg" /></span>
	</li>
	<li>
		<img src="images/2.jpg" />
		<span><img src="images/4.jpg" /></span>
	</li>
	<li>
		<img src="images/1.jpg" />
		<span><img src="images/3.jpg" /></span>
	</li>
	<li>
		<img src="images/2.jpg" />
		<span><img src="images/4.jpg" /></span>
	</li>
	<li>
		<img src="images/1.jpg" />
		<span><img src="images/3.jpg" /></span>
	</li>
</ul>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 疊加浮動層 滑動星星打分 層疊疊加 疊加層疊 層疊 疊加 加載更多 旋轉翻轉 旋轉 翻轉 其他 圖片疊加 圖片層疊 文字翻轉 文字旋轉 圖片滑動 圖片滑塊 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子