这篇文章主要讲解了“css怎么实现百叶窗滚动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现百叶窗滚动效果”吧！
代码如下：
<!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#ul1{
width:250px;
height:auto;
float:left;
border-top:1px solid #000;
margin:20px;
}
li{
list-style:none;
width:100%;
height:30px;
line-height:30px;
overflow:hidden;
position:relative;
border-bottom:1px dotted #333;
}
li div{
position:absolute;
top:-30px;
}
li div p{
height:30px;
letter-spacing:5px;
}
</style>
</head>
<body>
<ul id="ul1">
<li>
<div>
<p>1111111</p>
<p>2222222</p>
</div>
</li>
<li>
<div>
<p>3333333</p>
<p>4444444</p>
</div>
</li>
<li>
<div>
<p>5555555</p>
<p>6666666</p>
</div>
</li>
<li>
<div>
<p>7777777</p>
<p>8888888</p>
</div>
</li>
</ul>
</body>
<script type="text/javascript">
function startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
var iCur = 0;
if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
bBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;
}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if(bBtn){
clearInterval(obj.timer);
if(endFn){
endFn.call(obj);
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
<script>
window.onload=function(){
var ul1=document.getElementById("ul1");
toShow(ul1);
function toShow(obj){
var aDiv=obj.getElementsByTagName("div");
var inow=0;
var timer=null;
var btn=true;
setInterval(function(){
toChange();
},4000);
function toChange(){
timer = setInterval(function(){
if(inow==aDiv.length){
clearInterval(timer);
inow=0;
btn=!btn;
}else if(btn){
startMove(aDiv[inow],{top:0});
inow++;
}else{
startMove(aDiv[inow],{top:-30});
inow++;
}
},100);
}
}
}
</script>感谢各位的阅读，以上就是“css怎么实现百叶窗滚动效果”的内容了，经过本文的学习后，相信大家对css怎么实现百叶窗滚动效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
