JS实现百叶窗效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现百叶窗</title>
<!--原理：
首先，主要是根据li里的div是保存每一行所有要变化的信息，定时改变div的高度，溢出部分隐藏来实现。
通过2个setInterval来实现，外层setInterval用来控制多长时间改变一次内容，里层setInterval用来控制如何改变。-->
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1,#ul2{ width:300px; height:auto; float:left; border-top:1px #000000 solid; margin:20px;}
li{ width:100%; height:30px; overflow:hidden; position:relative; border-bottom:1px #333333 dashed; line-height:30px;}
li div{ position:absolute; top:-30px;}
li div p { height:30px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var oUl2 = document.getElementById('ul2');
//先对左侧UL标签实行百叶窗效果；
toShow(oUl);
//两秒延迟后，对右侧UL标签实行百叶窗效果；
setTimeout(function(){
toShow(oUl2);
},2000); ࡣ
//实现百叶窗函数
function toShow(obj){
var aDiv = obj.getElementsByTagName('div');
var iNow = 0;//共有的内容行数；
var timer = null;//setInterval的返回值，用于clearInterval；
var bBtn = true;
//UL定时每4秒变换1次
setInterval(function(){
toChange();
},4000);
//UL变换1次
function toChange(){
//通过setInterval来对每一个li依次改变
timer = setInterval(function(){
//如果UL的每个li都变换过了，则停止，等待外层toShow（）再次调用toChange（）函数；
if(iNow==aDiv.length){
clearInterval(timer);
iNow = 0;
bBtn = !bBtn;//用于从上往下信息滚完了，再从下往上回滚；
}
else if(bBtn){
startMove(aDiv[iNow],{top:0});
iNow++; //为了下次定时执行时变为操作下一条内容的变换
}
else{
startMove(aDiv[iNow],{top:-30});
iNow++;
}
},100);
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<div>
<p>1111111111</p>
<p>2222222222</p>
</div>
</li>
<li>
<div>
<p>3333333333</p>
<p>4444444444</p>
</div>
</li>
<li>
<div>
<p>5555555555</p>
<p>6666666666</p>
</div>
</li>
<li>
<div>
<p>7777777777</p>
<p>8888888888</p>
</div>
</li>
<li>
<div>
<p>9999999999</p>
<p>aaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbb</p>
<p>cccccccccc</p>
</div>
</li>
</ul>
<ul id="ul2">
<li>
<div>
<p>1111111111</p>
<p>2222222222</p>
</div>
</li>
<li>
<div>
<p>3333333333</p>
<p>4444444444</p>
</div>
</li>
<li>
<div>
<p>5555555555</p>
<p>6666666666</p>
</div>
</li>
<li>
<div>
<p>7777777777</p>
<p>8888888888</p>
</div>
</li>
<li>
<div>
<p>9999999999</p>
<p>aaaaaaaaaa</p>
</div>
</li>
<li>
<div>
<p>bbbbbbbbbb</p>
<p>cccccccccc</p>
</div>
</li>
</ul>
</body>
</html>
JS实现百叶窗效果的更多相关文章
- javascript实例学习之六—百叶窗效果
一.要结合布局才能形成百叶窗的效果 二.开启两个定时器,第一个定时器控制的是百叶窗整体一次上翻,一次下翻:另一个控制百叶窗中的各页逐次翻转,形成层次效果.否则就成了普通的滚动广告的效果了 本实现借助于 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
随机推荐
- 【转】再谈CLR查找和加载程序集的方式
这是一个老问题,以前也有朋友写过一些文章介绍,但可能还不是很全面.我也多次被人问到,这里结合案例再次谈谈,希望对大家有所帮助. 本文范例代码可以通过这里下载 http://files.cnblogs. ...
- A C Program to demonstrate adjacency list representation of graphs
w Graph and its representations - GeeksforGeekshttp://www.geeksforgeeks.org/graph-and-its-representa ...
- Selenium：常见web UI元素操作及API使用
链接(link) <div> <p>链接 link</p> <a href="www.cnblogs.com/tankxiao">小 ...
- POI解析Excel封装工具
1. [代码][Java]代码 跳至 [1] [全屏预览] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2 ...
- 安装CentOS 7.4 可能会出现的坑以及解决方案
安装CentOS 7.4 可能会出现的坑以及解决方案 (解决方法不唯一,如果行不通的话emmmm~~, 百度会啥你会啥~~) 坑.0X01 解决: 退出虚拟机,以管理员权限运行 坑.0X02 解决: ...
- python函数回顾：setattr()
描述 setattr 函数对应函数 getatt(),用于设置属性值,该属性必须存在. 语法 setattr 语法: setattr(object, name, value) 参数 object -- ...
- xml数据发送请求，读取xml
# coding:utf-8 import requests url = "http://httpbin.org/post" # python3字符串换行,在右边加个反斜杠 bod ...
- IDEA 跑spring项目找不到get,set的问题
@Autowired的用法和作用 这个注解就是spring可以自动帮你把bean里面引用的对象的setter/getter方法省略,它会自动帮你set/get. iDEA下安装lombok这个插件就可 ...
- 前端之 Ajax(补）
概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...
- PAT 天梯赛 L1-020. 帅到没朋友 【STL】
题目链接 https://www.patest.cn/contests/gplt/L1-020 思路 对于每个 K >= 2 的朋友圈,里面的所有 ID 都用 MAP 标记一下 对于每个 K = ...