jQuery悬停图片感知方向遮罩层特效代码下载


jQuery悬停图片感知方向遮罩层特效代码下载
jQuery悬停图片感知方向遮罩层特效代码下载以及悬停图片、感知方向、遮罩层等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/rem_responsive.js"></script>
<script type="text/javascript" src="static/js/hover.js"></script>

2. HTML代码

<div class="indThr">
	<div class="kcList">
		<ul class="picList da-thumbs" id="da-thumbs">
			<li>
			<a href="#">
			<img src="static/picture/1.png" class="picImg" />
			<div style="background-image: url('static/images/15.png');" class="picHover">
			MAPLE
			</div>
			<p class="picBo" style="background-image: url('static/images/15.png');">MAPLE</p>
			</a>
			</li>
			<li>
			<a href="#">
			<img src="static/picture/2.png" class="picImg" />
			<div style="background-image: url('static/images/15.png');" class="picHover">
			BIRCH
			</div>
			<p class="picBo" style="background-image: url('static/images/15.png');">BIRCH</p>
			</a>
			</li>
			<li>
			<a href="#">
			<img src="static/picture/3.png" class="picImg" />
			<div style="background-image: url('static/images/15.png');" class="picHover">
			BLACK WALNUT
			</div>
			<p class="picBo" style="background-image: url('static/images/15.png');">BLACK WALNUT</p>
			</a>
			</li>
			<li>
			<a href="#">
			<img src="static/picture/4.png" class="picImg" />
			<div style="background-image: url('static/images/15.png');" class="picHover">
			OLIVE
			</div>
			<p class="picBo" style="background-image: url('static/images/15.png');">OLIVE</p>
			</a>
			</li>
			<li>
			<a href="#">
			<img src="static/picture/5.png" class="picImg" />
			<div style="background-image: url('static/images/15.png');" class="picHover">
			DOGWOOD
			</div>
			<p class="picBo" style="background-image: url('static/images/15.png');">DOGWOOD</p>
			</a>
			</li>
			<li>
			<a href="#">
			<img src="static/picture/6.png" class="picImg" />
			<div style="background-image: url('static/images/15.png');" class="picHover">
			POPLAR
			</div>
			<p class="picBo" style="background-image: url('static/images/15.png');">POPLAR</p>
			</a>
			</li>
		</ul>
		<div style="clear: both;"></div>
	</div>
</div>
<script>
	$('#da-thumbs > li').hoverdir();
</script>

相关推荐

发表评论

相关文章