仿新浪微博文字定时向下滚动特效

8个月前 (04-01 16:39)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>仿新浪微博文字定时向下滚动特效_武鸣人</title>
<style>
#www_wuming_ren {background:white; margin:0px; padding:0px; width:500px; height:300px; border:1px solid black; overflow:hidden;}
li {border-bottom:1px dashed #CCC; padding:15px 10px 3px 10px; margin:0px; list-style:none;}
</style>
<script type="text/javascript">
var arr=['洗脸也能抽筋??', '好冷啊', '一口气睇晒 《碟影重重》三部,头痛痛。一如既往地喜欢特务男,哈哈,有脑有身手', '我靠近你,不是因为你什么都好,不是因为你能给我一个安心而不错的未来,不是因为你是我的老公,不是因为我觉得我们肯定这一辈子会这样好好走下去,不是因为再找一段感情代价太大,而是因为,我爱你,我觉得看到你,就会心动。', '我承认我是个没有鼓励就没有动力的人,缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间,全是梦想,家庭和朋友。武鸣人'];
var t=setInterval(function(){
 var sTxt=arr.shift();
 createDom(sTxt);
 arr.push(sTxt);
},2000)
var bPause=false;
function startMove(obj,attr,iTarget,fnMoveEnd)
{
 if(obj.timer)
 {
  clearInterval(obj.timer);
 }
 obj.timer=setInterval(function(){
  if(bPause)
  {
   return;
  }
  doMove(obj,attr,iTarget,fnMoveEnd);
 },30)
};
function getAttr(obj,attr)
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 if(obj.currentStyle)
 {
  return obj.currentStyle[attr];
 }
 else
 {
  return document.defaultView.getComputedStyle(obj,false)[attr];
 }
}
function doMove(obj,attr,iTarget,fnMoveEnd)
{
 var iSpeed=0;
 var weizhi=0;
 if(attr=="opacity")
 {
  weizhi=parseFloat(getAttr(obj,"opacity"));
 }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 else
 {
  weizhi=parseFloat(getAttr(obj,attr))
 }
 if(Math.abs(iTarget-weizhi)<1/100)
 {
  clearInterval(obj.timer);
  obj.timer=null;
  if(fnMoveEnd)
  {
   fnMoveEnd();
  }
 }
 else
 {
  iSpeed=(iTarget-weizhi)/8;
  if(attr=="opacity")
  {
   obj.style.filter="alpha(opacity:"+(weizhi+iSpeed)*100+")";
   obj.style.opacity=weizhi+iSpeed;
  }
  else
  {
   iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
   obj.style[attr]=weizhi+iSpeed+"px";
  }
 }
};
function leaveMessage()
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
 var oText=document.getElementById("txt1");
 createDom(oText.value);
 oText.value="";
};
function createDom(sTxt)
{
 var oUl=document.getElementById("www_wuming_ren");
 var aLi=oUl.getElementsByTagName("li");
 var oLi=document.createElement("li");
 var iHeight=0;
 oLi.innerHTML=sTxt;
 oLi.style.filter="alpha(opacity:0)";
 oLi.style.opacity=0;
 if(aLi.length)
 {
  oUl.insertBefore(oLi,aLi[0])
 }
 else
 {
  oUl.appendChild(oLi)
 }
 //开始运动
 iHeight=oLi.offsetHeight;
 oLi.style.height="0px";
 oLi.style.overflow='hidden';
 startMove(oLi,"height",iHeight,function(){
  startMove(oLi,"opacity",1)
 })
 oUl.onmouseover=function()
 {
  bPause=true;
 };
 oUl.onmouseout=function()
 {
  bPause=false;
 }
};//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="www_wuming_ren"></ul>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/591.html

回帖

仿新浪微博文字定时向下滚动特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息