jQurey实现电梯效果

<!--可点击的五个小盒子-->
<ul><li><a href="javascript:"></a></li><li><a href="javascript:"></a></li><li><a href="javascript:"></a></li><li><a href="javascript:"></a></li><li><a href="javascript:"></a></li>
</ul><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<style>html , body {width: 100%;height: 100%;position: relative;padding: 0;margin: 0;}.box{height: 100%;}ul{position: fixed;left: 100px;top: 100px;display: none;}ul li {list-style: none;width: 50px;height: 50px;border:gold 1px solid;}
</style>

<script src="js/jquery.min.js"></script>
<script>$(function () {var   colors = ["red","orange","yellow","green","blue"];// 遍历li$("li").each(function (i,v){$(v).css({// 将颜色添加到五个li上background:colors[i]})});// 遍历五个大盒子$(".box").each(function (i,v){$(v).css({// 将颜色添加到五个大盒子上background:colors[i]})});$(window).scroll(function (){//scrollTop// 距浏览器顶端200时，五个li出现，否则隐藏if($("html , body").scrollTop() > 200){$("ul").show()}else{$("ul").hide()}});// 点击小盒子，浏览器跳到对应颜色的大盒子上$("ul li").click(function (){$("html,body").animate({scrollTop:$(this).index() * $(".box").height()})})});
</script>

jQurey实现电梯效果相关推荐

前端基础——day1
HTML:超文本标记语言 HTML(内容)CSS(修饰)JavaScript(功能) 标记:<> 注释: 一.HTML例子 <!DOCTYPE ht ...
科技爱好者周刊（第 114 期）：U 盘化生存和 Uber-job
这里记录每周值得分享的科技内容,周五发布. 本杂志开源(GitHub: ruanyf/weekly),欢迎提交 issue,投稿或推荐你的项目. 周刊讨论区的帖子<谁在招人?>,提供大量就 ...
PLC立体车库智能仿真博途V15 3×2立体车库西门子1200PLC 触摸屏仿真
PLC立体车库智能仿真博途V15 3×2立体车库西门子1200PLC 触摸屏仿真不需要实物自带人机界面小车上下行有电梯效果每一个程序段都有注释 FC块标准化编写自带变频器输出也可以仿真 ...
关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...
iis8.5限速没有效果怎么回事_电梯为何会发生坠梯？没有安全措施吗？能在井道底安装大弹簧吗？...
对于电梯,很多的朋友担心在使用的时候电梯出现一些故障.如例如最常见的电梯困人或者是电梯滑梯等的情况.那么电梯就没有相应的安全保护措施吗?其实电梯还是有很强大的安全保护措施的.家居杂坛以下面的问题为例来 ...
html5实现关灯效果,《第41天：JQurey - 关灯效果》
今天要和你们分享的是我看了JQuery库的一款关灯效果,然后自已去实现它. 主要是鼠标移入移出它的状态发生改变开始讲解前,为大家做一些知识储备,在接下来的实操中会用到. 1.mouseover( f ...
结对项目开发电梯调度 - 整体设计
一.系统介绍 1．功能描述本电梯系统用来控制一台运行于一个具有16层的大楼电梯,它具有上升.下降.开门.关门.载客的基本功能. 大楼的每一层都有: (1) 两个指示灯: 这两个指示灯分别用于指示 ...
你的团队能通过电梯测试吗？
软件开发者们真心喜爱编写代码.但根据我的经验,他们当中很少有人可以解释清楚他们为什么在编写代码.如果你不信,你可以从你的团队里找个人来测试一下:问他在做什么:接着问他为什么要做那个:继续问下去,直到你 ...
电梯调度算法软工 Pair Project
软工要求的结对编程,随机分组,然后,我(郭立轩)和六班的闫生辉分在了同一组.之前并不认识,虽然如此,这次结对编程的经历还是相当愉快的,也学到了不少东西. OK,下面进入正文关于结对编程如何利用结对 ...

jQurey实现电梯效果

jQurey实现电梯效果相关推荐

最新文章

热门文章