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


Posted in Javascript onJanuary 09, 2014
以下为程序代码:<!DOCTYPE html/> 
<head> 
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> 
<script type="text/javascript"> 
$(function() { 
$(".v").mouseover(function() { 
var x = $("<div class='vs'></div>"); 
x.appendTo($('body')); 
x.css({ 
width : $(this).width() - 6, 
height : $(this).height() - 6, 
left : $(this).offset().left, 
top : $(this).offset().top 
}); 
$($.browser.msie ? this : x).mouseout(function(){ 
x.remove(); 
}); 
}); 
}); 
</script> 
<style> 
.vs {z-index:1000;position:absolute;border:3px solid red;} 
</style> 
</head> 
<body> 
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" class="v" /></a> 
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" /></a> 
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" class="v" /></a> 
</body> 
</html>

点击查看演示:http://biyuan.tk/u/upload/201311131123292656.html
Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
图片翻转效果具体实现代码
Jan 09 #Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 #Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 #Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 #Javascript
含有CKEditor的表单如何提交
Jan 09 #Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 #Javascript
javascript计算用户打开网页的停留时间
Jan 09 #Javascript
You might like
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
js实现鼠标跟随运动效果
2020/08/02 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
给护士表扬信
2014/01/19 职场文书
小学美术教学反思
2014/02/01 职场文书
运动会广播稿20字
2014/02/18 职场文书
单位证明范文
2015/06/18 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python