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 相关文章推荐
循环 vs 递归浅谈
Feb 28 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
js实现两点之间画线的方法
May 12 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python模块文件结构代码详解
2018/02/03 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
基于python监控程序是否关闭
2020/01/14 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
《和田的维吾尔》教学反思
2014/04/14 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
党校毕业个人总结
2015/02/28 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
MySQL 开窗函数
2022/02/15 MySQL