文字上下轮播
来源:互联网 发布:首次提出大数据的时间 编辑:程序博客网 时间:2024/05/17 02:27
之前也写过两篇程序猿生涯的文章.后面都给删掉了
一直想重新写起来 把一些码代码遇到的一些坑给记下来,一直忘记,也一直拖着,拖延症越来越严重了..
回到主题吧.
最近做项目 遇到一个小效果.对的 只是一个小效果而已 就是文字上下轮播
我之前是做后台的,对前台的一些效果不是很熟练,一遇到问题就先百度一下.嗯.我也就只能百度一下了,讲道理,百度搜索到很多的东西都是一样的,不同站,答案一样.有时候错的地方都
一样..但是基本可以解决需求.现学现用.问题也可以解决但是并不知道这个东西是怎么实现的,不知其所以然.
最近这份工作,标签是全栈程序猿,一些简单的js效果,就不用插件了吧.自己简单的写写,也顺便想提升一下自己的水平,毕竟太菜了.写一个东西.你要先知道这个东西原理是
什么,才能知道怎么去实现.不知道原理的那还是用插件吧..毕竟人家封装好的.但是对于自己的进步不利,原地踏步.
说这个文字上下轮播 其实挺简单的 无非就是位置的改变而已
而位置的改变有什么 css中有position: relative; 配合 position: absolute; 这两个配合起来真的爽
css3有transform 不过css3我不太会....所以这里就不介绍css3的写法了,有时间补上
代码贴上
Html
两个div 外面一个div有个样式
一直想重新写起来 把一些码代码遇到的一些坑给记下来,一直忘记,也一直拖着,拖延症越来越严重了..
回到主题吧.
最近做项目 遇到一个小效果.对的 只是一个小效果而已 就是文字上下轮播
我之前是做后台的,对前台的一些效果不是很熟练,一遇到问题就先百度一下.嗯.我也就只能百度一下了,讲道理,百度搜索到很多的东西都是一样的,不同站,答案一样.有时候错的地方都
一样..但是基本可以解决需求.现学现用.问题也可以解决但是并不知道这个东西是怎么实现的,不知其所以然.
最近这份工作,标签是全栈程序猿,一些简单的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
0 0
- 文字上下轮播
- 上下轮播控件TextSwitcher
- TextView文字上下滚动轮播 类似淘宝头条
- Android 文字轮播
- js文字轮播
- 文字轮播与图片轮播
- 公告栏轮播,文字轮播
- 网页简单的上下切换轮播
- android 仿京东抢购上下轮播消息
- TextSwitcher文字切换器实现文字上下自动轮播效果
- jquery文字轮播 滚动
- 文字轮播无缝滚动
- [html5]轮播文字/图片
- JQuery 制作文字轮播
- 上下滚动轮播
- 上下滚动轮播
- 文字从上到下无缝轮播,一直循环滚动轮播
- js实现图片上下轮播效果(二)
- 替代ByteArrayBuffer 解决missing in SDK23的问题
- 6种单例模式实现
- 22.Generate Parentheses
- viewPaper+Fragment的布局,在初始化时会导致fragment的布局加载和网络请求数据(懒加载)
- 仿QQ5.0侧滑先行版
- 文字上下轮播
- Android的多分辨率适配的处理
- Iterator<Entry<String, HashMap<String, String>>>
- 如何测试Azure虚拟机网络连通性(默认禁Ping)
- HIVE(下)
- struts+spring action应配置为scope="prototype"
- LeetCode Top K Frequent Elements
- ECMAScript 6 学习系列课程 (ES6 常用内置方法的使用)
- Java JList使用