实用文字和图片同时定时向上滚动特效

9个月前 (03-06 20:10)阅读回复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 type="text/css">
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#666;line-height:2em;background:#000;}
#box_www_wuming_ren{height:25px;width:220px;overflow:hidden;border:2px solid #CCC;list-style:none;margin:0;padding:0;position:relative;padding-left:5px;margin:50px auto;background:#FFf;cursor:pointer;}
#img_wuming_ren{height:73px;width:229px;overflow:hidden;border:2px solid #CCC;list-style:none;margin:0;padding:0;position:relative;margin:50px auto;background:#FFf;cursor:pointer;}
ul li,ul{margin:0;padding:0;}
img{display:block;}
</style>
</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="box_www_wuming_ren">
<li>[1]武鸣人一号标题_武鸣人</li>
<li>[2]武鸣人二号标题_武鸣人</li>
<li>[3]武鸣人三号标题_武鸣人</li>
<li>[4]武鸣人四号标题_武鸣人</li>
<li>[5]武鸣人五号标题_武鸣人</li>
</ul>
<ul id="img_wuming_ren">
<li><img border="0" src="/img/20240306_www_wuming_ren_53.jpg" name="page_cnt_3"></li>
<li><img border="0" src="/img/20240306_www_wuming_ren_54.jpg" name="page_cnt_3"></li>
<li><img border="0" src="/img/20240306_www_wuming_ren_53.jpg" name="page_cnt_3"></li>
<li><img border="0" src="/img/20240306_www_wuming_ren_54.jpg" name="page_cnt_3"></li>
</ul>
<script type="text/javascript">
var rollText={
go:null,
oParentUl:null,
oUlH:null,
liArr:null,
childNode:null,
timeout:null,
run:function(id,delay){
var oLiFirst=this.liArr[0];
var liMarTop = oLiFirst.style.marginTop;
var liTopNum=parseInt(liMarTop);
var c = Math.abs(liTopNum);
if(c< parseInt(this.oUlH)){
c++;
oLiFirst.style.marginTop ='-' + c + 'px';
}else if(Math.abs(liTopNum)== parseInt(this.oUlH)){
clearInterval(this.go);
this.oParentUl.removeChild(oLiFirst);
this.oParentUl.appendChild(oLiFirst);
this.liArr[this.liArr.length-1].style.marginTop='0px';
this.timeout=setTimeout(function(obj,id,childtags,delay){return function(){obj.start(id,childtags,delay);};}(this,id,this.childNode,delay),delay);
}
},
start:function(id,childtags,delay){
this.childNode=childtags;
this.oParentUl=document.getElementById(id);
this.oUlH=this.oParentUl.currentStyle?this.oParentUl.currentStyle['height']:window.getComputedStyle(this.oParentUl,null)['height'];
this.liArr=this.oParentUl.getElementsByTagName(childtags);
for(var i=0;i<this.liArr.length;i++){
this.liArr[i].style.cssText +=';margin-top:0;height:'+this.oUlH+';line-height:'+this.oUlH+';display:block; width:100%;';
}
this.go =setInterval(
 function(obj,id,delay){
return function(){obj.run(id,delay)}
}(this,id,delay),10);
this.oParentUl.onmouseover=function(obj){return function(){clearTimeout(obj.timeout);clearTimeout(obj.go);};}(this);
this.oParentUl.onmouseout=function(obj){return function(){obj.go =setInterval(function(obj,id,delay){return function(){obj.run(id,delay)};}(obj,id,delay),10);};}(this);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
rollText.start('box_www_wuming_ren','li',1000);
function clone(){};
clone.prototype= rollText;
var obj = new clone;
obj.start('img_wuming_ren','li',1000);
</script>
</body>
</html>


0
0
收藏0

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

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

回帖

实用文字和图片同时定时向上滚动特效 期待您的回复!

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

取消确定

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