1、图片向上滚动（每次可显示多个图片）

  <div id=demo style="OVERFLOW: hidden; HEIGHT: 235px">
                <div id=demo1>
                  <table cellspacing=1 cellpadding=0 width="100%" border=0>
                    <tbody>
                      <tr>
                        <td style="height:60px;"><a href="Special/2006_10/Index.html" target=_blank><img height=58 src="Banner/sjds.jpg" width=178 border=0></a></td>
                      </tr>
                      <tr>
                        <td style="height:60px;"><a href="http://vote.dc.cqit.edu.cn" target=_blank><img height=58 src="Banner/hx.gif" width=178 border=0></a></td>
                      </tr>
                      <tr>
                        <td style="height:60px;"><a href="http://vote.dc.cqit.edu.cn/Index.aspx?projectNo=281" target=_blank><img height=58 src="Banner/hhc.gif" width=178 border=0></a></td>
                      </tr>
                      <tr>
                        <td style="height:60px;"><a href="http://dmamh.cqit.edu.cn" target=_blank><img height=58 src="Banner/dmamh.gif" width=178 border=0></a></td>
                      </tr>
                      <tr>
                        <td style="height:60px;"><a href="http://rsc.cqit.edu.cn/ModuleWithItem.aspx?subModuleCode=5160&amp;ModuleCode=4788" target=_blank><img height=58 src="Banner/cpyc.jpg" width=178 border=0></a></td>
                      </tr>
                     
                    </tbody>
                  </table>
                </div>
                <div id=demo2></div>
              </div>
     <script>
var speed=30
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

2、图片向上滚动（每次只显示一个图片）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---　图片上下循环滚动的公告导航</title>

<script language="JavaScript">
<!--
/*设置下面的参数。 设置scrollerwidth和scrollerheight参数，设置成滚动显示的图片中尺寸最大的。*/
var scrollerwidth=178
var scrollerheight=60
var displayImgAmount=4 //视区窗口可显示个数
var scrollerbgcolor='white'
//修改下面的每个图间暂停时间，本例为3秒。
var pausebetweenimages=200
//改变下面的图像地址，如果希望logo都是带连接的，只要将#改为相应的链接地址。
var slideimages=new Array()
slideimages[0]='<a href=#><img src="Banner/rdhy.jpg" border=0"></a>'
slideimages[1]='<a href=#><img src="Banner/hx.gif" border=0"></a>'
slideimages[2]='<a href=#><img src="Banner/rdhy.jpg" border=0"></a>'
slideimages[3]='<a href=#><img src="Banner/hx.gif" border=0"></a>'

//下面的行不要编辑///
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}}
function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}}
window.οnlοad=startscroll
//-->
</script>
<ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};">
<layer id="first" left="0" top="1" width="&{scrollerwidth};">
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</head>

<body>

</layer>
<layer id="second" left="0" top="0" width="&{scrollerwidth};" visibility="hide">
<script
language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<p><script language="JavaScript1.2">
<!--
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
//--></script>

</body>

</html>

3、图片向作滚动（每次可显示多个图片）

<script language="JavaScript">
imgArr=new Array()
imgArr[0]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/01.jpg border=0></a>"
imgArr[1]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/02.jpg border=0></a>"
imgArr[2]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/03.jpg border=0></a>"
imgArr[3]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/04.jpg border=0></a>"
imgArr[4]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/05.jpg border=0></a>"
imgArr[5]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/06.jpg border=0></a>"
imgArr[6]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/07.jpg border=0></a>"
imgArr[7]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/08.jpg border=0></a>"
imgArr[8]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/09.jpg border=0></a>"
imgArr[9]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/10.jpg border=0></a>"
imgArr[10]="<a href='http://www.cqit.edu.cn/xxgk/xyfg.html' target='_blank' onmouseMove='javascript:outHover=true' title='校园风光' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=Images/pic/11.jpg border=0></a>"
var moveStep=3 //步长，单位：pixel
var moveRelax=100 //移动时间间隔，单位：ms

ns4=(document.layers)?true:false

var displayImgAmount=4 //视区窗口可显示个数

var divWidth=130 //每块图片占位宽

var divHeight=84 //每块图片占位高

var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false

var startDivClipLeft
var nextDivClipRight

function initDivPlace(){
if (ns4){
for (i=0;i<displayImgAmount;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
}
}else{
for (i=0;i<displayImgAmount;i++){
eval("document.all.divAds"+i+".style.left="+divWidth*i)
}
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
}
}
}

function mvStart(){
timeID=setTimeout(moveLeftDiv,moveRelax)
}

function mvStop(){
clearTimeout(timeID)
}

function moveLeftDiv(){
if (ns4){
for (i=0;i<=displayImgAmount;i++){
eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
}

startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

if (startDivClipLeft+moveStep>divWidth){
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)

eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")

startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
}else{
for (i=0;i<=displayImgAmount;i++){
eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
}

startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))

if (startDivClipLeft+moveStep>divWidth){
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")

eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)

startDnum=(++startDnum)%imgArr.length
nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
}else{
startDivClipLeft+=moveStep
nextDivClipRight+=moveStep
}
eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
}

if (outHover){
mvStop()
}else{
mvStart()
}

}

function writeDivs(){
if (ns4){
document.write("<ilayer name=divOuter width=500 height="+divHeight+">")

for (i=0;i<imgArr.length;i++){
document.write("<layer name=divAds"+i+">")
document.write(imgArr[i]+" ")
document.write("</layer>")
}
document.write("</ilayer>")
document.close()
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.divOuter.document.divAds"+i+".clip.right=0")
}
}else{
document.write("<div id=divOuter style='position:relative' width=500 height="+divHeight+">")

for (i=0;i<imgArr.length;i++){
document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
document.write(imgArr[i]+" ")
document.write("</div>")
}
document.write("</div>")
for (i=displayImgAmount;i<imgArr.length;i++){
eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
}
}
}
</script>

<body οnlοad="javascript:mvStart()">

在相应td位置，输入以下语句：<SCRIPT language="JavaScript">writeDivs();initDivPlace();</SCRIPT>

Set Scrolling Pictrues in the WebPage相关推荐

  1. Cocos2d:使用 CCCamera 做滚动效果 （Four Ways of Scrolling with Cocos2D）

    原版的:http://www.koboldtouch.com/display/IDCAR/Four+Ways+of+Scrolling+with+Cocos2D There are two class ...

  2. (转载)Nutch2 WebPage 字段解释

    版本: Nutch2.2.1 nutch/conf/gora-hbase-mapping.xml内有webpage表结构 <class name="org.apache.nutch.s ...

  3. 30个让人兴奋的视差滚动（Parallax Scrolling）效果网站

    30个让人兴奋的视差滚动(Parallax Scrolling)效果网站 转载于:https://www.cnblogs.com/momomo/archive/2012/03/02/2377683.h ...

  4. Android之提示Cannot call this method while RecyclerView is computing a layout or scrolling

    1 问题 java.lang.IllegalStateException: Cannot call this method while RecyclerView is computing a layo ...

  5. 视差滚动（Parallax Scrolling）技术在网页中应用的精美案例

    视差滚动(Parallax Scrolling)是一种独特的网页内容表现形式,其基本原理是让多层背景以不同的速度移动,形成立体的运动效果,带来出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站 ...

  6. Andorid Scrolling Activity（CoordinatorLayout详情）

    1.new project -> Scrolling Activity 2.Layout xml code activity_scrolling.xml 1 <?xml version=& ...

  7. CSS: 解决100% 高度失效 height 100% is not working when scrolling down page

    原代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

  8. jquery：临时禁止鼠标滚动 How to disable scrolling temporarily?

    1. 代码: // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, ...

  9. 视差滚动(Parallax Scrolling)效果的原理和实现

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 可以先看看效果: ...

  10. 让人兴奋的视差滚动（Parallax Scrolling）效果网站分享

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术.今天这篇文章就与大 ...

最新文章

  1. 《css世界》的那些实用技巧
  2. 第三模块：面向对象（目录）
  3. c语言文件归并问题_C语言 | 选择法对10个数排序
  4. 恢复联想键盘F1-F12标准模式
  5. mysql Insert on duplicate引发的死锁
  6. mysql long类型_怒肝两个月MySQL源码，我总结出这篇2W字的MySQL协议详解（超硬核干货）！！...
  7. 腾讯 tars java_腾讯TARS开源团队郑苏波：腾讯微服务开发框架的源码剖析
  8. SpringMvc-HandlerMapping/RequestCondition
  9. 2006年上半年开发心得
  10. qt使用QZxing生成二维码
  11. 计算机系统的基本组成
  12. 服务器搭建centos7系统操作过程（使用系统盘搭建centos7系统）
  13. 项目中 前后台接口 请求项目移植的问题
  14. PHP小V脸蛋白线,HPH小v脸蛋白线好不好用？HPH小v脸蛋白线怎么用
  15. N-Tiers开发方式(为何使用COM+组件的撰写商业逻辑层)
  16. C#图像处理：在图片上写字，文字位置居中问题
  17. 备考网规第一章非网络基础
  18. LeetCode报错：Line 923: Char 9: runtime error: reference binding to null pointer of type ‘std::__cxx11:
  19. 对话京东安全首席架构师：电商平台构建安全防护体系关键点
  20. R12 AR INVOICE 接口表导入

热门文章

  1. VBS隐藏bat窗口
  2. 2020安洵杯参赛感言
  3. 计算机科学的拉丁文,拉丁字母A-Z在计算机中对应的二进制编码
  4. 小白怎样使用EXCEL导入MATLAB画出图像
  5. canvas-缤纷小球
  6. 百度劫持有哪些特征，百度快照劫持处理方法及流程？
  7. android 程序启动监听,监听开机自动启动应用
  8. Dubbo Monitor 分析
  9. 【夜读】自我提升的8个好习惯，迷茫时看一看
  10. C++ Templates中文版 p61页的一个问题