兼容IE和Firefox火狐的上下、左右循环滚动JS代码
分类:程序开发 Tags: 兼容浏览器 javascript 评论:1 浏览:6073 最近更新时间:2010/7/9 22:28:25
html里的marqueen也能实现内容的滚动,但滚动是间断的,在滚动一个周期中,会有一段空白出现。如果滚动的区域比较大,空间的出现,会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观,实现无间断的滚动。
上下循环滚动代码:
文字左右循环滚动代码:
上下循环滚动代码:
- <div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)" style="overflow:hidden; height:60px">
- <div id="demo1">
- 111111111111111<br>
- 222222222222222<br>
- 333333333333333<br>
- 444444444444444<br>
- 555555555555555
- </div>
- <div id="demo2"></div>
- </div>
- <script>
- var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show");
- var inter;
- t2.innerHTML=t1.innerHTML;
- function qswhMarquee(){
- if(t2.offsetTop<=t.scrollTop)
- t.scrollTop-=t1.offsetHeight;
- else
- t.scrollTop++;
- }
- inter=setInterval(qswhMarquee,30);
- function getid(id){
- return document.getElementById(id);
- }
- </script>
文字左右循环滚动代码:
- <style type="text/css" media="all">
- .d1{
- margin:10px auto;
- width:200px;
- background-color:#CCCCCC;
- height:20px;
- overflow:hidden;
- white-space:nowrap;
- }
- .d2{
- margin:0px auto;
- background-color:#FF9933;
- }
- .div2{
- width:auto;
- height:20px;
- font-size:12px;
- }
- </style>
- <script language="javascript" type="text/javascript">
- var s,s2,s3,s4,timer,i=0;
- function init(){
- s=getid("div1");
- s2=getid("div2");
- s3=getid("div3");
- s4=getid("div4");
- s4.innerHTML=s3.innerHTML;
- s2.style.width=s.offsetWidth+"px";
- s2.style.height=s.offsetHeight+"px";
- timer=setInterval(mar,30)
- }
- function mar(){
- //s2.innerHTML=s.scrollLeft;
- if(s3.offsetWidth<=s.scrollLeft){
- s.scrollLeft-=s3.offsetWidth;
- }else{s.scrollLeft++;}
- }
- function getid(id){
- return document.getElementById(id);
- }
- window.onload=init;
- </script>
- <div class="d1" id="div1">
- <span class="div2" id="div3"> 余志国网站设计工作室提供专业的外贸网站建站服务。</span>
- <span id="div4" class="div2"></span>
- </div>
- <div class="d2" id="div2"></div>
本文地址:/477/
-
• ASP连接Access数据库绝对路径代码
• ASP在后一页刷新前一页代码
• asp导出excel文件方法
• ASP网页过滤HTML代码的多种方法
• 一个表单中如何实现多个按钮提交的方法代码
• 通用ASP生成HTML代码,无需读取模版
• asp检测email地址是否有效函数
• 把Access 2010 .accdb文件格式转换为Access 2003 .mdb操作方法
• 兼容ie,火狐,chrome,safari,360,qq,遨游,搜狗等浏览器的设为首页和加入收藏代码
• 利用ASP显示当前网站在线人数代码