楼梯效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery.js"></script>
        <style type="text/css">
            #wra div{
                width: 1028px;
                height: 726px;
                text-align: center;
                font-size: 100PX;
                line-height:726px;
            }
            #wra #div1{
                background: red;
            }
            #wra #div2{
                background: oldlace;
            }
            #wra #div3{
                background: palegreen;
            }
            #wrap{
                width: 100px;
                height: 300px;
                position: fixed;
                left: 1000px;
                top: 300px;
                background: oldlace;  

            }
            #wrap div{
                width:100px ;
                height: 100px;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="wra">
            <div id="div1">div1</div>
            <div id="div2">div2</div>
            <div id="div3">div3</div>
            <div id="div4">div4</div>
        </div>
        <div id="wrap">
            <div >1</div>
            <div >2</div>
            <div >3</div>
        </div>
    </body>
    <script type="text/javascript">
        $(function(){
            $(‘#wrap div‘).click(function(){
                $(document).scrollTop($(‘#wra‘).children().eq($(this).index()).offset().top);
            })
        })
    </script>
</html>  
时间: 2024-08-24 10:45:54

楼梯效果的相关文章

锚链接加楼梯效果(同时支持移动端)

1.pc网页右侧经常会有楼梯效果,页面滑动到一定高度,楼梯出来,同时点击相应的楼层页面滑动到对应的位子,并且在不点击的时候,只是滑动液面的话,滑动到相应的楼层,左侧的楼梯相应的楼梯要高亮显示.(有的顶部也有这样的效果 ,原理一样方法也是一样的). 2.说先html,css代码为 1 左侧或顶部楼层代码.左侧或者顶部由 position 控制,这个不影响.注意高亮显示的class是给 a 的父级.不参与楼梯的 class 属性是给 a 的.不能混淆. 2 <ul id="nav_one&qu

原生js实现京东商城楼梯效果

这个可能有些兼容问题和小bug,新手写的不完善 欢迎指出 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0px; padding: 0px; list-style: none; } #header{ width: 100

ffmpeg文档27-输出设备

27 输出设备 输出设备是可配置用于ffmpeg写入多媒体数据的元素,其附加到系统的输出设备. 在编译配置ffmepg时,所有支持的输出设备都被默认允许.你可以使用配置选项–list-outdevs了解有哪些设备. 你可以通过–disable-outdevs禁止编译所有输出设备,然后再通过–enable-outdev=OUTDEV以支持个别的设备,也可以通过默认配置,再添加–disable-outdev=OUTDEV来禁用个别设备. 在ff*工具集中,-devices可以显示当前允许的输出设备.

npm + gulp 项目构成详解

一.npm讲解 https://www.npmjs.com.cn/ NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. 由于nodejs已经集成了npm,所以npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.

jQuery楼层效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery楼层效果</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script

走楼梯

1.每次可以走1步,或两步,求走n级台阶的方案个数 分析,其实就是斐波那契数列,无论怎么走,最后一步要么走1级,要么走2级,所以n级方案等于n-1级和n-2级方案之和 import java.util.HashMap; public class WalkStairs { // 上n级台阶 public static int walkStairs(int n) { if (n == 1) return 1; else if (n == 2) return 2; return walkStairs(

Unity5中叹为观止的实时GI效果

http://www.manew.com/thread-43970-1-1.html 今天为大家分享unity与Alex Lovett共同使用unity5制作的Shrine Arch-viz Demo,其中充分利用了Unity5的实时全局光照功能.实在是太过惊艳,随便一帧都可以直接拿来当做屏保~~~ 先奉上视频: http://static.video.qq.com/TPout.swf?vid=t017102l7by&auto=0 上面的Demo使用Unity5.2制作,没有导入任何第三方资源包

抗锯齿(后期效果) Antialiasing (PostEffect)

The Antialiasing (PostEffect) offers   a set of algorithms designed to give a smoother appearance to graphics.   When two areas of different colour adjoin in an image, the shape of the   pixels can form a very distinctive "staircase" along the b

动态规划走楼梯问题

有一条楼梯,总共有9级阶梯,从地面上出发,如果每次可以走3级,4级或6级楼梯,问共有几种方案可以走到? 解决方案一: 第一个方法比较简单,很容易想到,就是用深度搜索,我们可以反过来,把情况看出从第9层阶梯走到路面,把所有可以出现的情况都列出来,然后判断是否能到达第9级阶梯,如果可以,就把方案数加一. 代码如下: public class DPStair { static int count=0; //计算F(n)被调用了计次 static int F(int n) { count++; if(n