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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
前端面试知识点目录一览
Apr 15 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
JavaScript高级程序设计之变量与作用域
Nov 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
使用php4加速网络传输
2006/10/09 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
javascript里的条件判断
2007/02/27 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
python创建文件备份的脚本
2018/09/11 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
男女朋友协议书
2014/04/23 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript