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


Posted in Javascript onJanuary 30, 2015

本文实例讲述了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 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 #Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 #Javascript
js实现屏幕自适应局部代码分享
Jan 30 #Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 #Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
javascript中sort()的用法实例分析
Jan 30 #Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python相似模块用例
2016/03/04 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python子类继承父类构造函数详解
2019/02/19 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python 回溯法模板详解
2020/02/26 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
C语言面试题
2015/10/30 面试题
校园之声广播稿
2014/01/31 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
python unittest单元测试的步骤分析
2021/08/02 Python