jQuery实现仿微软首页感应鼠标变化滑动窗口效果
更新时间：2015年10月08日 10:39:40 作者：企鹅
这篇文章主要介绍了jQuery实现仿微软首页感应鼠标变化滑动窗口效果,基于jQuery响应鼠标事件简单实现动画效果,非常简单实用,需要的朋友可以参考下
本文实例讲述了jQuery实现仿微软首页感应鼠标变化滑动窗口效果。分享给大家供大家参考。具体如下：
这是一款jQuery仿微软首页感应鼠标变化的滑动窗口，鼠标放上后，窗口会向左拉长，鼠标移走后恢复原样，是在微软官方网站发现的，看了看代码，觉得很容易就扣下来，不敢独享。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery仿微软首页感应鼠标变化的滑动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.box{width:100px;height:100px;position:absolute;right:0;color:#fff;}
.box1{top:100px;background:#000;}
.box2{top:250px;background:#333;}
.box3{top:400px;background:#666;}
.box4{top:550px;background:#999;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<body>
<div class="box box1">应用</div>
<div class="box box2">下载</div>
<div class="box box3">Windows Phone</div>
<div class="box box4">Office</div>
<script type="text/javascript">
$('.box').each(function(){
$(this).hover(function(){
$(this).stop().animate({width:'150'},1000);
},function(){
$(this).stop().animate({width:'100'},1000);
});
});
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用2010-08-08
这篇文章主要介绍了JQuery复制DOM节点的方法,涉及jQuery中clone与appendTo方法的使用技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了jquery图片切换的方法,实例分析了jQuery实现页面元素与相应样式切换效果的使用相关技巧,设计jQuery中hide、fadeIn、css、setInterval等方法的使用,需要的朋友可以参考下2015-04-04
专门针对input[text password hidden]以及textarea的用户输入进行检查2009-07-07
这篇文章主要介绍了jQuery的事件预绑定的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
jquery轮换效果网上已经很多了，不过这个效果挺有特色的。需要的朋友可以看下。2011-07-07
TimergliderJS 一个基于jQuery的时间轴插件
Timeglider JS是一个由javascript支持缩放，数据驱动的时间轴组件。非常适合显示项目历史，项目计划及其其它需要显示历史的项目2011-12-12
这篇文章主要介绍了jQuery中:header选择器用法,以实例形式分析了:header选择器的功能、定义及匹配标题元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要向大家推荐了一个jquery无限级联下拉菜单简单实例演示，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要为大家详细介绍了jQuery插件ajaxFileUpload使用实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论