JQuery实现鼠标移动到图片上显示边框效果
更新时间：2014年01月09日 17:07:58 作者：
鼠标移动到图片显示边框效果在浏览网页的时候，大家也都见过，接下来使用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://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实现的一个导航栏下拉列表，下面为大家讲解下是如何实现的2013-09-09
这篇文章主要介绍了jQuery中siblings()方法用法,实例分析了siblings()方法的功能、定义及获取匹配元素集合中每一个元素的同辈元素的使用技巧,是进行元素筛选时非常实用的方法,需要的朋友可以参考下2015-01-01
jQuery没有直接支持form到json的序列化方法，目前网上有一个实现是这样的2010-12-12
jQuery如此流行，各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢？如果你的答案是肯定的，那么来吧！和我一起学写jQuery插件吧！2010-04-04
jQuery插件passwordStrength密码强度指标详解
这篇文章主要为大家详细介绍了jQuery插件passwordStrength密码强度指标实现代码，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了jquery使用正则表达式验证email地址的方法,以实例形式分析了正则表达式的使用技巧,需要的朋友可以参考下2015-01-01
当用户需要某项功能时要填写一些表单信息，在填写完成并提交后，该部分信息是不允许再次修改的。表单包含TextBox、DropDownList、CheckBox等控件。2010-04-04
jQuery插件zTree实现单独选中根节点中第一个节点示例
这篇文章主要介绍了jQuery插件zTree实现单独选中根节点中第一个节点的方法,结合实例形式分析了jQuery树形插件zTree的具体使用技巧,需要的朋友可以参考下2017-03-03
详解JavaScript异步编程中jQuery的promise对象的作用
这篇文章主要介绍了JavaScript异步编程中jQuery的promise对象的作用,同时也谈到了js的Dojo框架中promise模式的实现,需要的朋友可以参考下2016-05-05
jQuery简单实现input文本框内灰色提示文本效果的方法
这篇文章主要介绍了jQuery简单实现input文本框内灰色提示文本效果的方法,涉及jQuery针对页面元素的遍历与样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
最新评论