• 信息滚动


    文字无缝信息滚动:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>信息滚动</title>
    	<style type="text/css">
    *{margin: 0px;padding: 0px;}
    ul{list-style: none;}
    #hh{ 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;}
    
    	</style>
    </head>
    <body>
    <div id="hh">
    	<ul id="con1">
    		<li>1、大叔过一会你就是昆明大理石密度法规和女的名称是</li>
    		<li>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
    		<li>3、是水水水水水水水水水水水水水水水水</li>
    		<li>4、人人人人人人人人人人人人人人人人人人人人人人人</li>
    		<li>5、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
    		<li>6、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
    		<li>7、天天天天天天天天天天天天天天天天天天天天天</li>
    		<li>8、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
    		<li>9、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
    		<li>10、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
    		<li>11、天天天天天天天天天天天天天天天天天天天天天</li>
    		<li>12、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
    	</ul>
    	<ul id="con2"></ul>
    </div>	
    <script type="text/javascript">
    var hh=document.getElementById('hh');
    var con1=document.getElementById('con1');
    var con2=document.getElementById('con2');
    var time=50;
    
    hh.scrollTop=0;
    con2.innerHTML=con1.innerHTML;
    
    function scrollUp(){
    
    	if (hh.scrollTop>=con1.offsetHeight) {
    		hh.scrollTop=0;
    	}else{
    		hh.scrollTop++;
    	}
    }
    
    
    var myScroll=setInterval('scrollUp()',time);
    
    hh.onmouseover=function(){
    	clearInterval(myScroll);
    }
    hh.onmouseout=function(){
    	 myScroll=setInterval('scrollUp()',time);
    }
    
    	</script>
    </body>
    </html>
    

      

    间歇性信息滚动:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>间歇性信息滚动</title>
    	<style type="text/css">
    *{margin: 0px;padding: 0px;}
    ul{list-style: none;}
    #hh{ 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;}
    
    	</style>
    </head>
    <body>
    <div id="hh">
    	<ul id="con1">
    		<li>1、大叔过一会你就是昆明大理石密度法规和女的名称是</li>
    		<li>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
    		<li>3、是水水水水水水水水水水水水水水水水</li>
    		<li>4、人人人人人人人人人人人人人人人人人人人人人人人</li>
    		<li>5、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
    		<li>6、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
    		<li>7、天天天天天天天天天天天天天天天天天天天天天</li>
    		<li>8、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
    		<li>9、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
    		<li>10、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
    		<li>11、天天天天天天天天天天天天天天天天天天天天天</li>
    		<li>12、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
    	</ul>
    	<ul id="con2"></ul>
    </div>	
    <script type="text/javascript">
    var hh=document.getElementById('hh');
    var con1=document.getElementById('con1');
    var con2=document.getElementById('con2');
    var time=50;
    var liheight=24;
    hh.scrollTop=0;
    con2.innerHTML=con1.innerHTML;
    
    function starMove(){
    	hh.scrollTop++;
    	 myScroll=setInterval('scrollUp()',time);
    }
    
    function scrollUp(){
       // hh.scrollTop++;
       if(hh.scrollTop%liheight==0){
       	clearInterval(myScroll);
       	setTimeout('starMove()',2000);
       }else{
       	hh.scrollTop++;
       	if (hh.scrollTop>=hh.scrollHeight/2) {
       		hh.scrollTop=0;
       	}
       }
    }
    
     setTimeout('starMove()',2000);
    
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    C库中与时间相关的函数
    读书笔记之: 程序员的自我修养——链接,装载与库(第1,2部分)
    STL中常用的一些算法
    C++ STL中的迭代器技术
    程序员面试宝典2(数据结构与算法)
    C/C++程序员面试宝典2
    读书笔记之: 数据库系统概论(第4版)
    C库中重要字符串函数的简要分析及实例
    程序员求职成功路(3)
    C库中对函数的可变参数的支持
  • 原文地址:https://www.cnblogs.com/td-tkzc/p/5800101.html
Copyright © 2020-2023  润新知