zoukankan      html  css  js  c++  java
  • 同时包含图片及文字的跑马灯代码

    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	<div id="roll1" style="OVERFLOW:hidden; WIDTH:450px;">
    		<table>
    			<tr>
    				<td id="rollleft1">
    					<table>
    						<tr>
    							<td><div><a href="#"><img/>1111111111111111</a></div></td>
    							<td>2222222222222222</td>
    							<td>3333333333333333</td>
    							<td>4444444444444444</td>
    						</tr>      
    					</table>
    				</td>
    				<td id="rollright1"> </td>
    			</tr>
    		</table>
    	</div>
    	<script language="JavaScript" type="text/JavaScript">
    		var speed1 = 22;
                    var rollright1 = document.getElementById("rollright1");
                    var rollleft1 = document.getElementById("rollleft1");
                    var roll1 = document.getElementById("roll1");
    		rollright1.innerHTML = rollleft1.innerHTML;
    		function Marquee1() {
    			if (rollright1.offsetWidth - roll1.scrollLeft <= 0) {
    				roll1.scrollLeft -= rollleft1.offsetWidth;
    			} else {
    				roll1.scrollLeft++;
    			}
    		}
    		var MyMar1 = setInterval(Marquee1, speed1);
    		roll1.onmouseover = function() {clearInterval(MyMar1);}
    		roll1.onmouseout = function() {MyMar1 = setInterval(Marquee1, speed1);}
    	</script>                       
    </body>
    </html>
    

    由于该段代码是以id=rollleft1的td为整体平移,因此在该td下可加div框架,如此就可实现同时包含图片及文字的跑马灯效果

    PS:之前没有注意W3C标准的问题,要符合W3C标准,必须严格定义每一个变量,因此要增加var rollright1 = document.getElementById("rollright1");等代码

  • 相关阅读:
    用Eclipse做J2Me开发的前期配置
    cglib和asm相关的文章
    bcp命令详解
    Oracle/PLSQL AFTER DELETE Trigger
    Mybatis(九)分页插件PageHelper使用
    Mybatis(八)逆向工程
    Mybatis(四)关联映射
    Mybatis(三)返回值四.注解配置
    Mybatis(二)参数(Parameters)传递
    Mybatis(一)实现单表的增删改查
  • 原文地址:https://www.cnblogs.com/eagley/p/1769901.html
Copyright © 2011-2022 走看看