文字上下轮播

之前也写过两篇程序猿生涯的文章.后面都给删掉了

一直想重新写起来  把一些码代码遇到的一些坑给记下来,一直忘记,也一直拖着,拖延症越来越严重了..

回到主题吧.

最近做项目 遇到一个小效果.对的  只是一个小效果而已   就是文字上下轮播

我之前是做后台的,对前台的一些效果不是很熟练,一遇到问题就先百度一下.嗯.我也就只能百度一下了,讲道理,百度搜索到很多的东西都是一样的,不同站,答案一样.有时候错的地方都

一样..但是基本可以解决需求.现学现用.问题也可以解决但是并不知道这个东西是怎么实现的,不知其所以然.

最近这份工作,标签是全栈程序猿,一些简单的js效果,就不用插件了吧.自己简单的写写,也顺便想提升一下自己的水平,毕竟太菜了.写一个东西.你要先知道这个东西原理是
什么，才能知道怎么去实现.不知道原理的那还是用插件吧..毕竟人家封装好的.但是对于自己的进步不利,原地踏步.

说这个文字上下轮播 其实挺简单的 无非就是位置的改变而已

而位置的改变有什么  css中有position: relative; 配合 position: absolute;  这两个配合起来真的爽

css3有transform  不过css3我不太会....所以这里就不介绍css3的写法了，有时间补上

代码贴上

Html

 <div class="new-carousel">
        <div class="new-carousel-div">
            <span class="new-carousel-item">上下轮播1</span>
            <span class="new-carousel-item">上下轮播2</span>
            <span class="new-carousel-item">上下轮播3</span>
            <span class="new-carousel-item">上下轮播4</span>
            <span class="new-carousel-item">上下轮播5</span>
            <span class="new-carousel-item">上下轮播6</span>
        </div>
 </div>

CSS

 <style>
        html, body { padding: 0; margin: 0; }
        .new-carousel { height: 50px; line-height: 50px; width: 200px; margin: 0 auto; position: relative; overflow: hidden; border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; }
        .new-carousel-div { position: absolute; top: 0px; }
        .new-carousel-item { display: block; }
    </style>

Js

$(function () {
            var height = $(".new-carousel-item:last").height();
            var length = $(".new-carousel-item").length;
            var index = 1;
            var i = 0;
            setInterval(function () {
                if (index >= length) {
                    index = 0;
                    i = 0;
                }                
                $(".new-carousel-div").animate({ top: (i - index) * height }, 200);                
                index++;
            }, 3000);
        });

两个div  外面一个div有个样式

overflow: hidden;//超出隐藏  因为你设置了它的高度   并又设置了这个属性,所以它的子div实际上有高度有300px 但是显示出来的只有50px

里面真正的轮播div内容有个样式

.new-carousel-div { position: absolute; top: 0px; }

然后就是js 那块了

无非就是设置轮播div的top值. 隔断时间将top值给它更新一下,等到达顶点,归0 我这里使用了Jq库..呃.原生js写的不太好.....Jq这个库还是nb的不行...也可以提高效率 能用则用吧

用window的画图功能简单的画了画  黑色阴影就是不可见的   中间的div 是不变的 

嗯.画风师承印象派

上下轮播是改变top    左右轮播就是改变left