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程序设计有所帮助。
相关文章
模拟select的代码，使用jquery的朋友可以参考下。2011-10-10
这篇文章主要为大家详细介绍了基于jQuery实现咖啡订单管理的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
下面小编就为大家带来一篇JQuery 选择器、DOM节点操作练习实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Android中的资源是指非代码部分，指外部文件，本文详细介绍资源使用概览，需要了解的朋友可以参考下2012-12-12
详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）
本篇文章主要介绍了Jquery EasyUI tree 的异步加载，可以实现遍历指定文件夹，根据文件夹内的文件生成tree，有兴趣的可以了解一下。2017-02-02
在实际应用中，文本框中有时候只能够允许输入整数，但是有时候可能更为"博爱"一点，可以允许输入浮点数，下面就通过实例代码介绍一下如何利用jquery实现此功能2016-01-01
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
这篇文章主要介绍了Jquery跨浏览器文本复制插件Zero Clipboard的使用方法,需要的朋友可以参考下2016-02-02
浮动DIV定时显示提示信息,如操作成功, 失败等,需要的朋友可以参考下。2011-02-02
这篇文章主要介绍了jQuery表格插件ParamQuery简单使用方法示例,大家参考使用吧2013-12-12
下面小编就为大家带来一篇jquery跟随屏幕滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
最新评论