STU网页设计

网页制作图片或文字滚动鼠标经过停止滚动效果

更新时间:2018-06-21   文章分类:网页技术课堂

方法一:MARQUEE是最简单的一种,把要想滚动的内容放到<marquee></marquee>中,代码如下:

<marquee behavior="scroll" align="middle" direction="right" onmouseover="this.stop()" onmouseout="this.start()">
这里可以放图片或者文字
</marquee>

标签内的direction="xxx"  可以替换为 up down left right


方法二:用js+div来写,稍微复杂些
<div id=cfdemo style="overflow: hidden; width: 100%; height: 120px">
<table cellspacing=0 cellpadding=0 align=left border=0 cellspace="0">
<tbody>
<tr>
<td id=cfdemo1>
要滚动的内容,这个滚动是不间隔的滚动
</td>
<td id=cfdemo2 width=10></td></tr></tbody></table></div>


<script>
var speed=20; //改变该数值可改变滚动速度,数值越小,速度越快
cfdemo2.innerhtml=cfdemo1.innerhtml
function cfmarquee(){
if(cfdemo2.offsetwidth-cfdemo.scrollleft<=0)
cfdemo.scrollleft-=cfdemo1.offsetwidth
else{
cfdemo.scrollleft++
}
}
var cfmar=setinterval(cfmarquee,speed)
cfdemo.onmouseover=function() {clearinterval(cfmar)}
cfdemo.onmouseout=function() {cfmar=setinterval(cfmarquee,speed)}
</script>

STU网页公众号

STU网页设计专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生dreamweaver网页成品...

qq code back_top

微信扫码咨询