jQuery实现仿微软首页感应鼠标变化滑动窗口效果


Posted in Javascript onOctober 08, 2015

本文实例讲述了jQuery实现仿微软首页感应鼠标变化滑动窗口效果。分享给大家供大家参考。具体如下:

这是一款jQuery仿微软首页感应鼠标变化的滑动窗口,鼠标放上后,窗口会向左拉长,鼠标移走后恢复原样,是在微软官方网站发现的,看了看代码,觉得很容易就扣下来,不敢独享。

运行效果截图如下:

jQuery实现仿微软首页感应鼠标变化滑动窗口效果

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
微信小程序实现星星评价效果
Nov 02 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 #Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
Javascript控制div属性动态变化实例分析
Oct 08 #Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 #Javascript
分享五个有用的jquery小技巧
Oct 08 #Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 #Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 #Javascript
You might like
php中通过curl smtp发送邮件
2012/06/05 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python设计模式大全
2016/06/27 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
办公室前台岗位职责
2014/01/04 职场文书
法人授权委托书
2014/09/16 职场文书
财产分割协议书范本
2014/11/03 职场文书
师德承诺书
2015/01/20 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
正规借条模板
2015/05/26 职场文书
银行服务理念口号
2015/12/25 职场文书
教学反思怎么写
2016/02/24 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers