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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
jQuery 位置插件
Dec 25 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
Vue.js基础知识小结
Jan 13 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 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 cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript 面向对象继承
2009/11/26 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
Javascript事件实例详解
2013/11/06 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
速记Python布尔值
2017/11/09 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Flask之请求钩子的实现
2018/12/23 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
如何写好优秀的创业计划书
2014/01/30 职场文书
《都江堰》教学反思
2014/02/07 职场文书
新教师工作感言
2014/02/16 职场文书
yy司仪主持词
2014/03/22 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年销售员工作总结
2014/12/01 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
2015年教师国培感言
2015/08/01 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
导游词之镜泊湖
2019/12/09 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL