用DIV+CSS布局,怎么做滚动的公告栏?

html-css017

用DIV+CSS布局,怎么做滚动的公告栏?,第1张

1、先给一个例子,下面再做详细讲解

<marquee scrollAmount=2 width=300>我钟意网页树树</marquee>

--这个例子是从左向左滚动

2、各参数详解:

a) scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

b) width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

c) direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

d) scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

e) behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

3、根据需要设置对应的参数,就可以实现滚动啦,把想要滚动的div标签包含在marquee标签里面。

加个style="border:solid 1px #ccc"

<marquee behavior="scroll" direction="up" loop="-1" width="200" onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="2" scrolldelay="0" truespeed="truespeed" style="border:solid 1px #ccc">

量a用来存放运算式的左数,b用来存放运算式的右数,c用来存放运算结果,串操作变量d用来存放运算种类(加减乘除),程序运行时随着用户点击0-9这10个按钮,程序判断此时是否已点了运算符,是则把用户点的按钮对应的值赋给b,否则赋给a。当用户点击4种操作符的按钮时,程序将运算种类赋给d。当用户按下等于的按纽时,程序根据d存放的运算种类来进行计算,结果赋给c。无论用户点了什么按纽,当前操作的结果都将在文本框中显示出来。此外,用户若点击清零按钮则文本框显示为0。 <br />

</marquee>

一楼的你做法错误的。你的这个跑马灯代码只能用于静态页面。

对于.net程序不支持的。

这个应该用JS脚本来做。

无间隙滚动

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth: 获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

-----------------------------------------------------------------------

向上无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

height: 100px

text-align: center

float: left

}

#demo img {

border: 3px solid #F2F2F2

display: block

}

-->

</style>

向上滚动

<div id="demo">

<div id="demo1">

<p>放入文字</p>

</div>

<div id="demo2"></div>

</div>

<script>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML//克隆demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

-->

</script>

------------------------------------------------------------

向下无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

height: 100px

text-align: center

float: left

}

#demo img {

border: 3px solid #F2F2F2

display: block

}

-->

</style>

向下滚动

<div id="demo">

<div id="demo1">

<p>放入文字</p>

</div>

<div id="demo2"></div>

</div>

<script>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML//克隆demo1为demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时

tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端

else{

tab.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

-->

</script>

--------------------------------------------------------

向左无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

width: 500px

}

#demo img {

border: 3px solid #F2F2F2

}

#indemo {

float: left

width: 800%

}

#demo1 {

float: left

}

#demo2 {

float: left

}

-->

</style>

向左滚动

<div id="demo">

<div id="indemo">

<div id="demo1">

<p>放入文字</p>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

-->

</script>

------------------------------------------------------

向右无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

width: 500px

}

#demo img {

border: 3px solid #F2F2F2

}

#indemo {

float: left

width: 800%

}

#demo1 {

float: left

}

#demo2 {

float: left

}

-->

</style>

向右滚动

<div id="demo">

<div id="indemo">

<div id="demo1">

<p>放入文字</p>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML

function Marquee(){

if(tab.scrollLeft<=0)

tab.scrollLeft+=tab2.offsetWidth

else{

tab.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

-->

</script>

如果你想后台绑定数据,可以编写一个方法获取数据!

希望以上的回答对你有所帮助!