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 fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 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
Oracle 常见问题解答
2006/10/09 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Python管理Windows服务小脚本
2018/03/12 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
python selenium操作cookie的实现
2020/03/18 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python如何生成xml文件
2020/06/04 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
企业管理培训感言
2014/01/27 职场文书
行政主管职责范本
2014/03/07 职场文书
活动倡议书范文
2014/05/13 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
大明湖导游词
2015/02/03 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS