jquery hover鼠标悬停图片内边框淡出淡进插件


jquery hover鼠标悬停图片内边框淡出淡进插件
jquery hover鼠标悬停图片内边框淡出淡进插件以及鼠标悬停、图片内边框、淡出淡进等js/jquery网页特效代码下载。

1. 引入JS

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

2. HTML代码

<div class="demo">
<h2>jquery图片内边框</h2>
<pre style="background:#fff;padding:10px 30px;">$("img").insetBorder({
speed          : 1000,           // 1000 = 1 秒, 默认值 250
borderColor    : "orangered",    // 默认的白色 (#ffffff)
inset          : 10,             // 边框宽度, 默认值 10px
borderType     : "solid",        // 边框类型, e.g. dashed
outerClass     : "ibe_outer",    // 外包裹的类名
innerClass     : "ibe_inner"     // 类名的内边框的
});</pre>
<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<ul>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_default" src="img/stockpic1.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_default" src="img/stockpic2.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_default" src="img/stockpic3.jpg" alt="text" /></a></li>
			</ul>
		</td>
		<td>
			<h2>Default</h2>
			<pre>$(selector).insetBorder();</pre>
		</td>
	</tr>
	<tr>
		<td>
			<ul>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_border" src="img/stockpic1.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_border" src="img/stockpic2.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_border" src="img/stockpic3.jpg" alt="text" /></a></li>
			</ul>
		</td>
		<td>
			<h2>Big Border</h2>
			<pre>$(selector).insetBorder({
			inset: 50
			});</pre>
		</td>
	</tr>
	<tr>
		<td>
			<ul>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_border_uncentered1" src="img/stockpic1.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_border_uncentered2" src="img/stockpic2.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_border_uncentered3" src="img/stockpic3.jpg" alt="text" /></a></li>
			</ul>
		</td>
		<td>
			<h2>Not centered</h2>
			<pre>$(selector).insetBorder({
			insetleft: 60,
			insetright: 40,
			insettop: 14,
			insetbottom: 86
			});</pre>
		</td>
	</tr>
	<tr>
		<td>
			<ul>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_borderColor" src="img/stockpic1.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_borderColor" src="img/stockpic2.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_borderColor" src="img/stockpic3.jpg" alt="text" /></a></li>
			</ul>
		</td>
		<td>
			<h2>Colored Border </h2>
			<pre>$(selector).insetBorder({
			borderColor: "#000000"
			});</pre>
		</td>
	</tr>
	<tr>
		<td>
			<ul>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_speed" src="img/stockpic1.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_speed" src="img/stockpic2.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_speed" src="img/stockpic3.jpg" alt="text" /></a></li>
			</ul>
		</td>
		<td>
			<h2>Slower Speed</h2>
			<pre>$(selector).insetBorder({
			speed: 500
			});</pre>
		</td>
	</tr>
	<tr>
		<td>
			<ul>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_bt" src="img/stockpic1.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_bt" src="img/stockpic2.jpg" alt="text" /></a></li>
				<li><a href="http://www.51qianduan.com/"><img class="hover_img_bt" src="img/stockpic3.jpg" alt="text" /></a></li>
			</ul>
		</td>
		<td>
			<h2>Double Border</h2>
			<pre>$("selector").insetBorder({
			borderType: "double"
			});</pre>
		</td>
	</tr>
	<tr>
		<td>
			<ul>
				<li><div id="shape1"></div></li>
				<li><div id="shape2"></div></li>
			</ul>
		</td>
		<td>
			<h2>Rectangles</h2>
			<pre>$("selector").insetBorder();</pre>
		</td>
	</tr>
</table>
</div>

相关推荐

发表评论

相关文章