投稿
  1. 首页
  2. 随笔

html图片滚动代码

电力系统分析 • 2023-3-15 • 随笔 • 阅读 58

html图片滚动代码,第1张

调用“图片”栏目图片的向左滚动代码 （效果演示）

以下是首页模板最新图片部分代码

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

<tr>

<td class=main_title_575><B>最新图片</B></td>

</tr>

<tr>

<td class=main_tdbg_575 vAlign=center align=middle height=131>

<!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--></td>

</tr>

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

<!--滚动代码开始-->

<div id=demo style="OVERFLOW: hiddenWIDTH: 560pxHEIGHT: 120px">

<table cellPadding=0 align=left border=0 cellspace="0">

<tr>

<td id=demo11 vAlign=top>

<!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--></td>

<td id=demo12 vAlign=top></td>

</tr>

</table>

</div>

<SCRIPT>

var speed=15

demo12.innerHTML=demo11.innerHTML

function Marquee11(){

if(demo12.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo11.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar1=setInterval(Marquee11,speed)

demo.onmouseover=function() {clearInterval(MyMar1)}

demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}

</SCRIPT>

<!--滚动代码结束-->

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

注意滚动图片数不要太大，这会影响页面下载速度。

<html>

<head>

<title>单行的JS文字滚动条</title>

<meta http-equiv="content-Type" content="text/htmlcharset=gb2312">

<STYLE>A {

COLOR: #aa0000

}

A:hover {

COLOR: #ff0000

}

</STYLE>

</head>

<body onload="initiate()">

<SCRIPT language="JavaScript1.2">

var message= new Array()

// message[indexnumber]="标题|说明|网址"

message[0]="CodeFans.net|CodeFans.net是一个学习型源码站"

message[1]="源码爱好者|源码爱好者欢迎您！"

message[2]="今天有更新了|今天有更新，请注意查看！"

// 卷轴高

var scrollerheight=25

// 标题宽

var titlezonewidth=80

// 说明宽

var copyzonewidth=340

// 距离窗口顶

var scrollertop=20

// 距离窗口左

var scrollerleft=20

var scrollerborder=2

// 标题背景色

var titlezonebg="330066"

// 文字的背景色

var copyzonebg="CC0000"

// 卷轴的背景色

var scrollbg="AAAAAA"

// 目标窗口

var targetlink="_blank"

// 标题的字体属性

var font_titleface="宋体"

var font_titlecolor="FFFFFF"

var font_titlesize=2

// 说明的字体属性

var font_copyface="宋体"

var font_copycolor="FFFFFF"

var font_copysize=2

// s设置 1 标题为粗体, 0 为正常

var titlebold=1

// 说明

var copybold=1

// 设置 'right', 'left' or 'center' 标题对齐方式

var titlealign="right"

// 说明

var copyalign="left"

// 停顿时间

var standstill=4000

var pre_titlebold

var after_titlebold

var pre_copybold

var after_copybold

var cliptop=0

var clipbottom=0

var clipleft=0

var clipright=titlezonewidth+copyzonewidth

var i_message=0

var mes_joined

var mes_split

var contenttext

var contentbg=""

var step=1

var pause=20

if (titlebold==1) {

pre_titlebold="<b>"

after_titlebold="</b>"

}

else if (titlebold==0) {

pre_titlebold=""

after_titlebold=""

}

if (copybold==1) {

pre_copybold="<b>"

after_copybold="</b>"

}

else if (copybold==0) {

pre_copybold=""

after_copybold=""

}

function initiate() {

mes_joined=message[i_message]

mes_split=mes_joined.split("|")

contenttext="<table cellpadding=4 cellspacing=0 border=0>"

contenttext+="<tr valign='top'>"

contenttext+="<td align="+titlealign+" width="+titlezonewidth+" height='"+scrollerheight+"' bgcolor='"+titlezonebg+"'>"

contenttext+="<a href='"+mes_split[2]+"' target='"+targetlink+"'>"

contenttext+="<font face='"+font_titleface+"' color='"+font_titlecolor+"' size='"+font_titlesize+"'>"

contenttext+=pre_titlebold

contenttext+=mes_split[0]

contenttext+=after_titlebold

contenttext+="</font></a></td>"

contenttext+="<td align="+copyalign+" width="+copyzonewidth+" height='"+scrollerheight+"' bgcolor='"+copyzonebg+"'>"

contenttext+="<font face='"+font_copyface+"' color='"+font_copycolor+"' size='"+font_copysize+"'>"

contenttext+=pre_copybold

contenttext+=mes_split[1]

contenttext+=after_copybold

contenttext+="</font></td></tr>"

contenttext+="</table>"

var bg_width=titlezonewidth+copyzonewidth+2*scrollerborder

var bg_height=scrollerheight+2*scrollerborder

contentbg="<table width="+bg_width+" height='"+bg_height+"' cellpadding=0 cellspacing=0 border='"+scrollerborder+"'><tr><td bgcolor='"+scrollbg+"'></td></tr></table>"

if (document.all) {

scrollertext.innerHTML=contenttext

scrollerbg.innerHTML=contentbg

document.all.scrollertext.style.posTop=scrollertop+scrollerheight

document.all.scrollertext.style.posLeft=scrollerleft

document.all.scrollerbg.style.posTop=scrollertop-scrollerborder

document.all.scrollerbg.style.posLeft=scrollerleft-scrollerborder

document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

scrollin()

}

if (document.layers) {

document.scrollertext.document.write(contenttext)

document.scrollertext.document.close()

document.scrollerbg.document.write(contentbg)

document.scrollerbg.document.close()

document.scrollertext.top=scrollertop+scrollerheight

document.scrollertext.left=scrollerleft

document.scrollerbg.top=scrollertop-scrollerborder

document.scrollerbg.left=scrollerleft-scrollerborder

document.scrollertext.clip.left=clipleft

document.scrollertext.clip.right=clipright

document.scrollertext.clip.top=cliptop

document.scrollertext.clip.bottom=clipbottom

scrollin()

}

}

function scrollin(){

if (document.all){

if (document.all.scrollertext.style.posTop>scrollertop) {

clipbottom+=step

document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.scrollertext.style.posTop-=step

var timer=setTimeout("scrollin()",pause)

}

else {

clearTimeout(timer)

var timer=setTimeout("scrollout()",standstill)

}

}

if (document.layers){

if (document.scrollertext.top>scrollertop) {

clipbottom+=step

document.scrollertext.clip.left=clipleft

document.scrollertext.clip.right=clipright

document.scrollertext.clip.top=cliptop

document.scrollertext.clip.bottom=clipbottom

document.scrollertext.top-=step

var timer=setTimeout("scrollin()",pause)

}

else {

clearTimeout(timer)

var timer=setTimeout("scrollout()",standstill)

}

}

}

function scrollout(){

if (document.all){

if (document.all.scrollertext.style.posTop>(scrollertop-scrollerheight)) {

cliptop+=step

document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.scrollertext.style.posTop-=step

var timer=setTimeout("scrollout()",pause)

}

else {

clearTimeout(timer)

changemessage()

}

}

if (document.layers){

if (document.scrollertext.top>(scrollertop-scrollerheight)) {

cliptop+=step

document.scrollertext.clip.left=clipleft

document.scrollertext.clip.right=clipright

document.scrollertext.clip.top=cliptop

document.scrollertext.clip.bottom=clipbottom

document.scrollertext.top-=step

var timer=setTimeout("scrollout()",pause)

}

else {

clearTimeout(timer)

changemessage()

}

}

}

function changemessage(){

i_message++

if (i_message>message.length-1) {i_message=0}

mes_joined=message[i_message]

mes_split=mes_joined.split("|")

cliptop=0

clipbottom=0

contenttext="<table cellpadding=4 cellspacing=0 border=0>"

contenttext+="<tr valign='top'>"

contenttext+="<td align="+titlealign+" width="+titlezonewidth+" height='"+scrollerheight+"' bgcolor='"+titlezonebg+"'>"

contenttext+="<a href='"+mes_split[2]+"' target='"+targetlink+"'>"

contenttext+="<font face='"+font_titleface+"' color='"+font_titlecolor+"' size='"+font_titlesize+"'>"

contenttext+=pre_titlebold

contenttext+=mes_split[0]

contenttext+=after_titlebold

contenttext+="</font></a></td>"

contenttext+="<td align="+copyalign+" width="+copyzonewidth+" height='"+scrollerheight+"' bgcolor='"+copyzonebg+"'>"

contenttext+="<font face='"+font_copyface+"' color='"+font_copycolor+"' size='"+font_copysize+"'>"

contenttext+=pre_copybold

contenttext+=mes_split[1]

contenttext+=after_copybold

contenttext+="</font></td></tr>"

contenttext+="</table>"

if (document.all) {

scrollertext.innerHTML=contenttext

document.all.scrollertext.style.posTop=scrollertop+scrollerheight

document.all.scrollertext.style.posLeft=scrollerleft

document.all.scrollertext.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

scrollin()

}

if (document.layers) {

document.scrollertext.document.write(contenttext)

document.scrollertext.document.close()

document.scrollertext.top=scrollertop+scrollerheight

document.scrollertext.left=scrollerleft

document.scrollertext.clip.left=clipleft

document.scrollertext.clip.right=clipright

document.scrollertext.clip.top=cliptop

document.scrollertext.clip.bottom=clipbottom

scrollin()

}

}

</SCRIPT>

<DIV id="scrollerbg" style="POSITION: absoluteTOP: -1000px"></DIV>

<DIV id="scrollertext" style="POSITION: absoluteTOP: -1000px"></DIV>

</body>

</html>

向上滚动CSS+js滚动

<html>

<head>

<title>不间断循环向上滚动的文本特效</title>

</head>

<body>

<div id="marquees">

<a href="http://51wisdom.com.cn" _fcksavedurl="#">http://51wisdom.com.cn/杭州平面设计欢迎您1</a><br>

<br>

<a href="#" _fcksavedurl="#">http://51wisdom.com.cn/杭州平面设计欢迎您2</a><br>

<br>

<a href="#" _fcksavedurl="#">http://51wisdom.com.cn/杭州平面设计欢迎您3</a><br>

<br>

<a href="#" _fcksavedurl="#">http://51wisdom.com.cn/杭州平面设计欢迎您4</a><br>

<br>

</div>

<script language="JavaScript">

marqueesHeight=50//设置滚动区域高度

stopscroll=false

with(marquees){

style.width=0

style.height=marqueesHeight

style.overflowX="visible"

style.overflowY="hidden"

noWrap=true

onmouseover=new Function("stopscroll=true")

onmouseout=new Function("stopscroll=false")

}

document.write('<div id="templayer" style="position:absolutez-index:1visibility:hidden"></div>')

preTop=0currentTop=0

function init(){

templayer.innerHTML=""

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML

setInterval("scrollUp()",10)

}

document.body.onload=init

function scrollUp(){

if(stopscroll==true) return

preTop=marquees.scrollTop

marquees.scrollTop+=1

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight

marquees.scrollTop+=1

}

}

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6110505.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
电力系统分析 电力系统分析 一级用户组
0 0
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表（0条）

保存