admin 发布：2024-05-31 13:34 137
本篇文章给大家谈谈html代码向上滑动，以及html向上滚动代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
在要实现滚动的地方,加入此代码:
marquee direction=up要输入的文字/marquee
UP是向上, DOWN是向下,Left向左,Right向右.
这两个属性决定文字滚动的速度（scrollamount）和延时（scrolldelay），参数值都是正整数。如下所示：
marquee scrollamount="100"我速度很快。/marquee
marquee scrollamount="50"我慢了些。/marquee
marquee scrolldelay="30"我小步前进。/marquee
marquee scrolldelay="1000" scrollamount="100"我大步前进。/marquee
按照自己的需要写代码吧，希望能够帮助你！
代码如下:
#47;script
$(function () {
$("ul li").hover(function () {
$("ul li").removeClass("liclass");
$(this).addClass("liclass");
})
})
#47;script
li
{
border: 1px solid #ABC;
display: block;
width: 100px;
height: 50px;
float: left;
margin: 10px;
text-align: center;
}
.liclass{ margin-top:-2px;}
marquee
scrollamount="1"
scrolldelay="60"
direction="up"
width="200"
height="230"div
align="center"brimg
src="这里加入图片地址"
border="0"
width="200"
brimg
src="这里加入图片地址"
border="0"
width="200"br
img
src="这里加入图片地址"
border="0"
width="200"br
img
src="这里加入图片地址"
border="0"
width="200"
/div/marquee
需要让几个图片向上移动就插入几张img
一般是：overflow:auto这个属性;
同时简单介绍几种HTML滚动条代码：
1、向右滚动代码：
div id="colee_right" style="overflow:hidden;width:760px;"
table cellpadding="0" cellspacing="0" border="0"
trtd id="colee_right1" valign="top" align="center"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
/tr
/table
/td
td id="colee_right2" valign="top"/td
/tr
/table
/div
script
var speed=30//速度数值越大速度越慢
//var colee_right2=document.getElementByIdx_x_x("colee_right2");
//var colee_right1=document.getElementByIdx_x_x("colee_right1");
//var colee_right=document.getElementByIdx_x_x("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.onmouseover=function() {clearInterval(MyMar4)}
colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
/script
!--向右滚动代码结束--
2、向左滚动代码：
!--下面是向左滚动代码--
div id="colee_left" style="overflow:hidden; width:760px;"
table cellpadding="0" cellspacing="0" border="0"
trtd id="colee_left1" valign="top" align="center"
table cellpadding="2" cellspacing="0" border="0"
tr align="center"
td
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
/tr
/table
/td
/tr
/table
/td
td id="colee_left2" valign="top"/td
/tr
/table
/div
script
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=30//速度数值越大速度越慢
//var colee_left2=document.getElementByIdx_x("colee_left2");
//var colee_left1=document.getElementByIdx_x("colee_left1");
//var colee_left=document.getElementByIdx_x("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
/script
!--向左滚动代码结束--
3、向上滚动代码：
!--向上滚动代码开始--
div id="colee" style="overflow:hidden;height:400px;width:550px;"
div id="colee1"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
/tr
/table
/div
div id="colee2"/div
/div
script
var speed=30;
//var colee2=document.getElementByIdx_x("colee2");
//var colee1=document.getElementByIdx_x("colee1");
//var colee=document.getElementByIdx_x("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
/script
!--向上滚动代码结束--
4、向下滚动代码：
div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"
div id="colee_bottom1"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
td style="padding-left:10px;"img src="aa.jpg" //td
/tr
/table
/div
div id="colee_bottom2"/div
/div
script
var speed=30
var colee_bottom2=document.getElementByIdx_x("colee_bottom2");
var colee_bottom1=document.getElementByIdx_x("colee_bottom1");
var colee_bottom=document.getElementByIdx_x("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
/script
同时注意还有其他滚动代码的分享：
一、向左滚动：marquee scrollAmount="2" direction="left" width="滚动区域宽度" height="滚动区域高度" onMouseOver="stop()" onMouseOut="start()"这里放滚动的内容/marquee
二、向上滚动：marquee scrollAmount="2" direction="up" width="滚动区域宽度" height="滚动区域高度" onMouseOver="stop()" onMouseOut="start()"这里放滚动的内容/marquee。
marquee只能作用于IE浏览器，下面的代码兼容所有浏览器 html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title向上无缝滚动/title
/headbody
div id=demo style="overflow:hidden; width:191px; height:140px;"
div id=demo1
table width="191" border="0" cellspacing="0" cellpadding="0"
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz1867-d7fd-469d-52e9 STYLE4"a href=/html/News/news_255.htmlCongratulations! some tools are free shipping now!/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzzd7fd-469d-52e9-b995 STYLE4"a href=/html/News/news_254.htmlTacho Universal without times limitation/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz469d-52e9-b995-433f STYLE4"a href=/html/News/news_253.htmlLatest version - Mercedes Benz Star 3/2009/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzzd0cc-32d1-5ed4-cbb0 STYLE4"a href=/html/News/news_252.htmlBMW GT1 suits for any computers now!/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz32d1-5ed4-cbb0-15d8 STYLE4"a href=/html/News/news_251.htmlNew comer - Nissan Consult III/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz5ed4-cbb0-15d8-4243 STYLE4"a href=/html/News/news_250.htmlUpdate software - X431 X431 TOOL 6/17/2009/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzzcbb0-15d8-4243-f6f1 STYLE4"a href=/html/News/news_249.htmlUpdated version - AK500 BENZ/BMW Key Programmer/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz15d8-4243-f6f1-fcb5 STYLE4"a href=/html/News/news_248.htmlLatest version - OP-COM v10/2008/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz4243-f6f1-fcb5-34ef STYLE4"a href=/html/News/news_247.htmlNew comer - Honda FLY100/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzzf6f1-fcb5-34ef-5fec STYLE4"a href=/html/News/news_246.htmlNew comer - Honda Airbag Resetter/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzzfcb5-34ef-5fec-3d76 STYLE4"a href=/html/News/news_245.htmlTOYOTA ITIS come out/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz34ef-5fec-3d76-083f STYLE4"a href=/html/News/news_244.htmlLatest version - VAG K CAN Commander 3.0/a/span/td
/tr
tr
td height="10"
/td
/tr
tr
td height="19" width="10" valign="top"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td height="19"img src="/images/dian.gif" width="4" height="4"//td
/tr
/table
/td
td align="left"span class="ahzz5fec-3d76-083f-1867 STYLE4"a href=/html/News/news_243.htmlLatest version - Lexia3 Citroen/Peugeot/a/span/td
/tr
tr
td height="10"
/td
/tr
/table
/div
div id=demo2/div
/div
script language="javascript"
var speed=40
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
/script
/body
/html
关于html代码向上滑动和html向上滚动代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
版权说明：如非注明，本站文章均为 AH站长 原创，转载请注明出处和附带本文链接；
