...点击向右展开,并且展开内容自动滚动(类似于新闻滚动)
发布网友
共2个回答
热心网友
<!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>
<style>
*{ padding:0; margin:0;}
#div1 {width:300px; height:200px; background:#CCC; position:absolute; left:-300px;}
#div1 span {width:20px; height:60px; line-height:20px; text-align:center; left:300px; top:70px; background:yellow; position:absolute; }
#div1 li{ list-style:none;}
#div1 ul{ width:300px; height:auto; float:left; }
#div1 li{ width:100%; height:30px; position:relative; overflow:hidden; border-bottom:1px dashed #fff; line-height:30px;}
#div1 li div{ position:absolute; top:-30px;}
#div1 li p{ height:30px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oBtn=oDiv.getElementsByTagName('span')[0];
var oUl=document.getElementById('ul1');
var aDiv=oUl.getElementsByTagName('div');
var iNow=0;
var bt=true;
var timer=null;
oBtn.onclick=function()
{
startMove(oDiv,{left:0},function()
{
setInterval(function (){
timer=setInterval(function ()
{
if(iNow==aDiv.length)
{
clearInterval(timer);
iNow=0;
bt=!bt;
}
else if(bt)
{
startMove(aDiv[iNow],{top:0});
iNow++;
}
else
{
startMove(aDiv[iNow],{top:-30});
iNow++;
}
},400);
},2000);
});
}
}
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=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(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
</script>
</head>
<body>
<div>
<div id="div1">
<ul id="ul1">
<li>
<div>
<p>你你你你你你你你你你</p>
<p>滚滚滚滚滚滚滚滚滚滚</p>
</div>
</li>
<li>
<div>
<p>滚滚滚滚滚滚滚滚滚滚</p>
<p>你你你你你你你你你你</p>
</div>
</li>
</ul>
<span>aa</span></div>
</div>
</body>
</html>追问大神，可以加你企鹅么
追答我都是小白
热心网友
左右，还是上下滚动追问点击消息提示图标，向右展开消息盒子，消息盒子里面的内容 单行 上下滚动
