JQuery实现鼠标移动到图片上显示边框效果
JQuery实现鼠标移动到图片上显示边框效果
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:以下为程序代码:$(function(){$(".v").mouseover(function(){varx=$("");...

复制代码 代码如下:

以下为程序代码:<!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></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" /></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" /></a>

</body>

</html>

点击查看演示:http://biyuan.tk/u/upload/201311131123292656.html

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类