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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue-cli 为项目设置别名的方法
Oct 15 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
小程序中英文混合排序问题解决
2019/08/02 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python实现键盘控制鼠标移动
2020/11/27 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
后勤工作职责
2013/12/22 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
毕业生就业意向书
2014/04/01 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
预防传染病方案
2014/06/14 职场文书
乐山大佛导游词
2015/02/02 职场文书
留学推荐信怎么写
2015/03/26 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
python 实现图片特效处理
2022/04/03 Python