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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
node.js博客项目开发手记
Mar 16 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
js实现带搜索功能的下拉框
Jan 11 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
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
Yii清理缓存的方法
2016/01/06 PHP
php的扩展写法总结
2019/05/14 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
总裁岗位职责
2013/12/04 职场文书
社区端午节活动方案
2014/01/28 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
2016党员党课心得体会
2016/01/07 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS