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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
解析Vue.js中的组件
Feb 02 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
JS实现移动端在线签协议功能
Aug 22 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代码
2006/12/06 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php和html的区别点详细总结
2019/09/24 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python如何控制进程或者线程的个数
2020/10/16 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
饭店工作计划书
2014/01/10 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python