注册

JS实现当鼠标悬停给图片加边框的方法

嗨豆壳技术文章 时间:2015-02-28 10:26:12 [ray]

本文分享给大家js实现鼠标悬浮给图片加边框的方法。使用了Jquery的insetborder插件来实现。具体实现方法如下

html代码:

<ul class="demo"> 
<li><a href="#" class="a1">
	<img src="images/a1.jpg"/></a>
</li>
<li><a href="#" class="a2">
	<img src="images/a2.jpg" /></a>
</li>
<li><a href="#" class="a3">
	<img src="images/a3.jpg" /></a> 
</li>
</ul>

js代码:


<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
<script src="js/jquery.insetborder.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
	$("a.a1").borderEffect(); 
	$("a.a2").borderEffect({ borderColor: "#e80484" }); 
	$("a.a3").borderEffect({ borderColor: "#7b7b7b", speed: 300, borderWidth: 10 }); 
}); 
</script>

css代码:


.demo{margin:5px auto; width:500px;}
.demo li{float:left;display:inline-block;margin:0 15px 0 0;}
.demo li a{display:block;}
.demo li a img{width:130px;height:130px;}

效果预览


希望本文所述对大家的javascript程序设计有所帮助。

标签

本文地址:https://www.hi-docs.com/article/121.html

上一篇:php中使用url传递数组($_GET方式)、表单提交数组($_POST)的方法

下一篇:linux date命令实现日期时间和Unix时间戳转换