jquery 鼠标悬停图片滑过显示横幅转子特效代码下载


jquery 鼠标悬停图片滑过显示横幅转子特效代码下载
jquery 鼠标悬停图片滑过显示横幅转子特效代码下载以及鼠标悬停、图片滑过、显示横幅转子等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="main">
   <!-- Two groups of banners -->
   <ul class="bannerHolder">
        <li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/rapidHTML.png" alt="Rapid HTML" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit Rapid HTML</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li><li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/siteGrinder.jpg" alt="Site Grinder" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit Site Grinder</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li><li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/mailChimp.jpg" alt="Mail Chimp" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit Mail Chimp</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li><li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/gomedia.jpg" alt="Go Media" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit Go Media</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li>    </ul>
    <ul class="bannerHolder">
        <li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/bestDesigns.jpg" alt="The Best Designs" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit The Best Designs</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li><li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/themeLayouts.gif" alt="Theme Layouts" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit Theme Layouts</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li><li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/themeForest.gif" alt="Theme Forest" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit Theme Forest</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li><li>
			<div class="banner">
				<a href="http://www.51qianduan.com/">
					<img src="img/banners/psd2html.jpg" alt="PSD to HTML" width="125" height="125" />
				</a>
				<p class="companyInfo">Visit PSD to HTML</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div></li>    </ul>
</div>

相关推荐

发表评论

相关文章