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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
jQuery实现本地存储
Dec 22 jQuery
JavaScript的Set数据结构详解
Feb 18 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
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
初学node.js中实现删除用户路由
2019/05/27 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Python实现CET查分的方法
2015/03/10 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
演讲稿怎么写
2014/01/07 职场文书
讲座主持词
2014/03/20 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
死亡证明书样本说明
2014/10/18 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python