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 相关文章推荐
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
javascript window对象属性整理
2009/10/24 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python实现二分查找算法实例
2015/05/26 Python
Python数据可视化之画图
2019/01/15 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
外贸业务员岗位职责
2015/02/13 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Spring中bean集合注入的方法详解
2022/07/07 Java/Android