编程 Javascript

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