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 浮点数运算 精度问题
Oct 06 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
图片翻转效果具体实现代码
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
DIY实用性框形天线
2021/03/02 无线电
php 变量定义方法
2009/06/14 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python网页解析器使用实例详解
2020/05/30 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
个人简历中自我评价
2014/02/11 职场文书
写求职信有什么意义
2014/02/17 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
信用卡工作证明模板
2014/09/14 职场文书
实习生工作证明范本
2014/09/14 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android