JQuery实现鼠标移动到图片上显示边框效果
代码如下:
以下为程序代码：<!DOCTYPE html/>
<head>
<script src="http://libs.baidu.com/jquery/1.6.1/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://camnpr.com/upload/2013/8/progressive.jpg" border="0" class="v" /></a>
<a href="#"><img src="http://camnpr.com/upload/2013/8/progressive.jpg" border="0" /></a>
<a href="#"><img src="http://camnpr.com/upload/2013/8/progressive.jpg" border="0" class="v" /></a>
</body>
</html>
点击查看演示：http://camnpr.com/TuiJianTools/jsdemo/jquery-show-border.html
相关文章
- jquery和js中如何将一个元素的内容赋给另一个元素(2014-1-10 11:6:53)
- 仿腾讯发表微博的JS效果代码(2013-12-26 15:6:42)
- 前端开发面试题及答案(2013-12-2 16:1:8)
- 前端开发面试题（很有料）(2013-12-2 12:1:37)
- 快速入门JavaScript(2013-9-10 18:49:54)
- 细说JavaScript Source Map (sourceURL / sourceMappingURL)(2013-8-20 14:52:0)
- [插件]jquery.flip实现360度翻转效果 jquery.slicebox实现3D翻转效果(2013-8-6 14:31:37)
- [分享]js+css美化radio和checkbox(2013-7-11 13:9:29)
- 收集的33个常用的js验证(2013-6-22 18:7:41)
- datepicker 配置与用法 jQueryUI(2013-6-4 9:52:40)
