文字上下轮播

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

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

回到主题吧.

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

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

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

最近这份工作,标签是全栈程序猿,一些简单的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