编程 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 相关文章推荐

调试Node.JS的辅助工具(NodeWatcher)

Jan 04 Javascript

javascript中的startWith和endWith的几种实现方法

May 07 Javascript

利用JS来控制键盘的上下左右键(示例代码)

Dec 14 Javascript

轮播的简单实现方法

Jul 28 Javascript

JavaScript判断浏览器及其版本信息

Jan 20 Javascript

基于Vuejs和Element的注册插件的编写方法

Jul 03 Javascript

深入浅出 Vue 系列 -- 数据劫持实现原理

Apr 23 Javascript

详解Vue之计算属性

Jun 20 Javascript

vue中父子组件的参数传递和应用示例

Jan 04 Vue.js

uniapp开发小程序的经验总结

Apr 08 Javascript

jQuery实现影院选座订座效果

Apr 13 jQuery

一起来看看Vue的核心原理剖析

Mar 24 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