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操作 input type=checkbox的实现代码
Jun 14 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
Javascript的this详解
Mar 23 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue登录注册实例详解
Sep 14 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 正则学习实例
2008/07/30 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Django Rest framework权限的详细用法
2019/07/25 Python
详解Django中异步任务之django-celery
2020/11/05 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
《山谷中的谜底》教学反思
2014/04/26 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
给病人的慰问信
2015/03/23 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
python 模块重载的五种方法
2021/04/24 Python
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android