网站建设
在线留言 客服中心 诚聘英才 联系我们
点击这里给我发消息 点击这里给我发消息
网站建设
推广概述  
技术文章  
首页网站推广技术文章 最专业的推广顾问,让您的网站广为人知!
网页设计中图片或文字上下左右滚动
来源:转自网络    点击:5231   [ 打印 ]  [ 关闭本页 ]

图片或文字上下左右滚动【JS向上滚动、JS向下滚动、JS向左滚动、JS向右滚动

注:上下滚动时,单元格demo1里面的内容高度要大于demo设置的高度才能无限滚动
       左右滚动时,单元格demo1里面的内容宽度要大于demo设置的宽度才能无限滚动
一、上下滚动

1.显示的内容
<div style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 100px; ">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
   <td id="demo1"><table width="100%" height="99" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>一</td>
          </tr>
          <tr>
            <td>二</td>
          </tr>
          <tr>
            <td>三</td>
          </tr>
        </table></td>
</tr>
<tr>
   <td id="demo2"></td>
</tr>
</table>
</div>

2.向上滚动JS

<SCRIPT>
var speed=30
var MyMarh=setInterval(Marqueeh,speed)
demo2.innerHTML=demo1.innerHTML
//原理是不断的向demoh2中填入demoh1中的内容,然后将已经看不见的清除
//用一个两行一列的表格,上一列再放一个装填有内容的表格,定义为demoh1,下一列是空的TD,定义为demoh2
//SPEED是用来控制速度的。
demo.onmouseover=function(){ clearInterval(MyMarh) }
demo.onmouseout=function(){ MyMarh=setInterval(Marqueeh,speed) }
function Marqueeh(){
if(demo2.offsetHeight-demo.scrollTop<=0)
   demo.scrollTop-=demo1.offsetHeight
else{
   demo.scrollTop++
}
}
</SCRIPT>

3.向下滚动JS

<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
var MyMar=setInterval(Marquee,speed)


demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
   demo.scrollTop+=demo2.offsetHeight
else{
   demo.scrollTop--
}
}
</script>

二、左右滚动

1.显示内容

<div id="demo" style="overflow:hidden;height:100px;width:200px;">
<table cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1"><table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>一</td>
      <td>二</td>
      <td>三</td>
    </tr>
</table></td>
<td id="demo2"></td>
</tr>
</table>
</div>

2.向左滚动JS

<script>
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
else{
   demo.scrollLeft++
}
}
</script>

3.向右滚动JS

<script>
var speed=30
var MyMar=setInterval(Marquee,speed)
demo2.innerHTML=demo1.innerHTML
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo.scrollLeft<=0)
   demo.scrollLeft+=demo2.offsetWidth
else{
   demo.scrollLeft--
}
}
</script>

上一篇: 网站优化中搜索引擎site命令的运用技巧
下一篇: 网站只允许自己能够访问,不允许别人访问

首页 上页 下页 尾页 页次:/页 共有条记录 转到

网站建设
网站建设
网站建设
关于我们 | 金牌套餐 | 在线留言 | 付款方式 | 联系我们 | 网站地图
业务咨询:010-67671346 67623992 13911967827 邮编:100075  京ICP备:07006130号  
地址:北京市南三环中路67号北京国际玩具城5号楼1301  Email:bjhjtx@163.com    常年法律顾问:陈娜律师
网站建设 北京网站建设 网站制作 北京网站制作 网站制作公司 北京网站建设公司 网站建设公司 网页设计 做网站
北京做网站 网站推广 网站优化 seo 网站设计 网站设计公司 北京网站制作公司 网站开发 建网站 北京建网站