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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python线程指南详细介绍
2017/01/05 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
详解python中index()、find()方法
2019/08/29 Python
keras中的backend.clip用法
2020/05/22 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
自考自我鉴定范文
2013/10/30 职场文书
质检部岗位职责
2013/11/11 职场文书
鲜花方阵解说词
2014/02/13 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
幼师中班个人总结
2015/02/12 职场文书
夫妻吵架保证书
2015/05/08 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技