js实现鼠标悬浮给图片加边框的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现鼠标经过显示动画边框特效

    jQuery实现鼠标经过显示动画边框特效

    原效果用addClass 改为slideUp,纯学习 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css" rel="external nofo

  • jquery给图片添加鼠标经过时的边框效果

    一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s

  • JS实现鼠标滑过显示边框的菜单效果

    本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <

  • 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="image" src="img/newselect.png"/> <input class="dBox3Ulimg" type="image" src="img/yesselect.png" style=&quo

  • JQuery实现鼠标移动到图片上显示边框效果

    复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo

  • js实现鼠标悬浮给图片加边框的方法

    本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu

  • js实现鼠标滚轮控制图片缩放效果的方法

    本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • js实现鼠标经过时图片滚动停止的方法

    本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js根据鼠标移动速度背景图片自动旋转的方法

    本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • Vue实现鼠标悬浮切换图片src

    Vue实现鼠标悬浮切换图片src

    本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码,供大家参考,具体内容如下 需求: 1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮2. 鼠标离开图示按钮,图片切换成回白色按钮 Html部分: <!-- 如果此处的两个鼠标事件不生效,可以在mouseenter后面添加.native后缀 --> <div class="left-btn"      @click="saveTemplate()"      @mouseenter=&qu

  • js实现鼠标移动到图片产生遮罩效果

    js实现鼠标移动到图片产生遮罩效果

    本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mask</title> <style> .pic{ width:300px; height:250px; background:url(icon/pro

  • 使用Node.js给图片加水印的方法

    使用Node.js给图片加水印的方法

    一.准备工作: 首先,确保你本地已经安装好了node环境. 然后,我们进行图像编辑操作需要用到一个Node.js的库:images. 这个库的地址是:https://github.com/zhangyuanwei/node-images,作者定义它为 "Node.js轻量级跨平台图像编解码库" ,并提供了一系列接口. 我们要做的首先是安装images库: npm install images 二.直接上DEMO: 步骤如下: step1:文件夹结构 step2:JS代码 var ima

  • js鼠标滑过图片震动特效的方法

    本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标滑过 图片震动效果</title> <STYLE>.shakeimage {  POSITION: re

  • JS实现动态给图片添加边框的方法

    本文实例讲述了JS实现动态给图片添加边框的方法.分享给大家供大家参考.具体如下: 下面的JS代码设置图片的边框为2个像素,即border=2 <!DOCTYPE html> <html> <head> <script> function addBorder() { document.getElementById("compman").border="2"; } </script> </head>

  • Node.js批量给图片加水印的方法

    Node.js批量给图片加水印的方法

    一.准备工作: 首先,你要阅读完这篇文章:http://www.jb51.net/article/97391.htm. 然后,我们安装node.js的一个模块:imageinfo. npm install imageinfo 二.直接上DEMO: 步骤如下: step1:文件夹结构 step2:JS代码 //引用文件系统模块 var fs = require("fs"); //引用imageinfo模块 var imageInfo = require("imageinfo&q

随机推荐