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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
javascript History对象原理解析
Feb 17 Javascript
详解Vue router路由
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
服务器web工具 php环境下
2010/12/29 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Python Tkinter 简单登录界面的实现
2019/06/14 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python list的index()和find()的实现
2020/11/16 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
师范生自我鉴定范文
2013/10/05 职场文书
室内设计自我鉴定
2013/10/15 职场文书
运动会邀请函范文
2014/02/06 职场文书
职称评定自我鉴定
2014/03/18 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
三严三实心得体会范文
2014/10/13 职场文书
拾金不昧表扬信
2015/01/16 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python