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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
Element实现动态表格的示例代码
Aug 02 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python使用append合并两个数组的方法
2015/04/28 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Django中信号signals的简单使用方法
2019/07/04 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
加入学生会演讲稿
2014/04/24 职场文书
村级四风对照检查材料
2014/08/24 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
捐书活动倡议书
2015/04/27 职场文书
2015年中秋寄语
2015/07/31 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA