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 面向对象继承
Nov 26 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
鼠标图片振动代码
2006/07/06 Javascript
jQuery.each使用详解
2015/07/07 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python实现自动发送邮件
2018/06/20 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
作风建设年活动总结
2014/08/27 职场文书
毕业实习计划书
2015/01/16 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书