js实现鼠标悬浮给图片加边框的方法

前端技术 2023/09/07 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17860

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案