当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JQuery实现鼠标移动到图片上显示边框效果

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

2018年03月07日  | 移动技术网IT编程  | 我要评论
代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascri

代码如下:


以下为程序代码:<!DOCTYPE html/>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".v").mouver(function() {
var x = $("<p class='vs'></p>");
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=https://www.2cto.com/uploadfile/2018/0307/20180307102410502.jpg" border="0" class="v" /></a>
<a href="#"><img src=https://www.2cto.com/uploadfile/2018/0307/20180307102410502.jpg" border="0" /></a>
<a href="#"><img src=https://www.2cto.com/uploadfile/2018/0307/20180307102410502.jpg" border="0" class="v" /></a>
</body>
</html>


如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网