js实现鼠标悬浮给图片加边框的方法
更新时间：2015年01月30日 10:59:29 作者：comeonstone
这篇文章主要介绍了js实现鼠标悬浮给图片加边框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现鼠标悬浮给图片加边框的方法。分享给大家供大家参考。具体实现方法如下：
html代码：
<div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href="" class="a2"> <img src="images/11.jpg" /> </a><a href="" class="a3"> <img src="images/11.jpg" /> </a> </div>
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 () {
//border
$(".T-s-l a.a1").borderEffect();
$(".a1").borderEffect();
$(".T-s-l a.a2").borderEffect({ borderColor: '#e80484' });
$(".T-s-l a.a3").borderEffect({ borderColor: '#7b7b7b', speed: 300, borderWidth: 10 });
});
</script>
css代码：
.T-s-l a{background:url(images/download.png) no-repeat -10px 20px #fff;}
.T-s-l{width:952px;overflow:hidden;}
.T-s-l a{float:left; width:234px;height:368px;margin:0 19px 17px 0;font-size:0;overflow:hidden;}
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了JavaScript前端如何实现判断登录设备是移动端还是PC,文中的示例代码讲解详细,有需要的小伙伴可以参考下2025-03-03
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
今天小编就为大家分享一篇浅谈layer的Icon样式以及一些常用的layer窗口使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了详解ES6实现类的私有变量的几种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
JavaScript中Object和Function的关系小结
JavaScript 中 Object 和 Function 的关系是微妙的，他们互为对方的一个实例。2009-09-09
判断集合是否包含某个元素我们可以利用js的原型扩展来封装一个我们自己的Contains方法，具体思路及实现如下，感兴趣的朋友可以参考下2013-11-11
编程语言中，函数Func(Type a,……)直接或间接调用函数本身，则该函数称为递归函数。递归函数不能定义为内联函数。这篇文章主要介绍了JS中递归函数的相关资料,需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇基于Bootstrap分页的实例讲解(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了JavaScript电子时钟倒计时的实现代码，具有一定的参考价值，感兴趣的朋友可以参考一下2016-01-01
这篇文章主要介绍了js实现for循环跳过undefined值,结合实例形式分析了js使用for循环针对数组的遍历、判断、运算等相关操作技巧,需要的朋友可以参考下2019-07-07
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
在web前端开发中js中的作用域，提升，闭包知识是经常用到的也是很容易混淆的知识点，接下来小编整理了本教程帮助大家学习2016-09-09
最新评论