JQuery实现鼠标移动到图片上显示边框效果

139 阅读 0 评论 92 点赞

我是靠谱客的博主幽默雪糕，最近开发中收集的这篇文章主要介绍JQuery实现鼠标移动到图片上显示边框效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
以下为程序代码：<!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://www.uoften.com/uploadfile/2018/0411/20180411011407300.jpg" border="0" class="v" /></a> 
<a href="#"><img src="http://www.uoften.com/uploadfile/2018/0411/20180411011407300.jpg" border="0" /></a> 
<a href="#"><img src="http://www.uoften.com/uploadfile/2018/0411/20180411011407300.jpg" border="0" class="v" /></a> 
</body> 
</html> 