js实现图片滚动效果

2023-04-11 01:46:02JavaScript017

js实现图片滚动效果,第1张

var speed=50//设置滚动速度

demo2.innerHTML=demo1.innerHTML //复制dome1为dome2

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至dome1与dome2交界时

demo.scrollTop-=demo1.offsetHeight //dome跳到最顶端

else{

demo.scrollTop++

}

var MyMar=setInterval(Marquee,speed) //设置定时器

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

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动

</SCRIPT>

</div>

</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Marquee 替代 -- 无间滚动</title>

<!--

* {padding: 0margin: 0}

body {margin: 3emfont: 12px Tahomabackground: #EAEAEAcolor: #333333line-height: 20px}

input, textarea {font: 12px Tahomacolor: #666666padding: 2pxborder: solid 1px #DBDBDB}

textarea {padding: 5pxline-height: 20px}

p {margin: 1em 0}

ul {}

li {height: 1%overflow: hiddenlist-style-type: none}

a {color: #666666text-decoration: none}

a:hover {color: #333333}

.r {float: right}

.l {float: left}

.b {font-weight: bold}

.gray {color: #666666margin-top: 8px}

.light {color:#FF6600margin: 0 5px}

.case {display: blockpadding: 0 2em 2em 2emborder: solid 1px #EAEAEAbackground: #FFFFFFmargin-bottom: 2emheight: 1%overflow: hidden}

.title {display:blockpadding: .5em 2em .5em 1emmargin: 0 -2em 2em -2emfont-weight: boldcolor: #000000background: #FAFAFAborder-bottom: solid 1px #EAEAEA}

.call {display:block}

.key {display: blockwidth: 8emfloat: left}

.type {display: blockwidth: 6emfloat: left}

.info {padding-left: 2em}

.demo {margin-bottom: 2em}

-->

</style>

<!--

#MyMarqueeX {width: 98%height: 150pxoverflow: hiddenmargin: 0 auto 0 auto}

#MyMarqueeX img {width: 185pxheight: 125pxborder: 2px solid #e6e6e6padding: 1pxmargin: 5px}

#MyMarqueeY {width: 205pxheight: 420pxoverflow: hidden}

#MyMarqueeY img {width: 185pxheight: 125pxborder: 2px solid #e6e6e6padding: 1pxmargin: 5px}

-->

</style>

//<!--

// 附带函数

var

// 用ID获取元素

$ = function(element) {

return typeof(element) == 'object' ? element : document.getElementById(element)

// 生成随机数

RandStr = function(n, u){

var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789"

var Len = tmStr.length

var Str = ""

for(i=1i<n+1i++){

Str += tmStr.charAt(Math.random()*Len)

}

return (u ? Str.toUpperCase() : Str)

}

//-->

</script>

//<!--

/*******************************************

- Marquee 替代 -- 无间滚动

- By Mudoo 2008.8

- http://hi.baidu.com/mt20

********************************************

new Marquee({

obj : 'myMarquee', // 滚动对象（必须）

name : 'MyMQ_1', // 实例名（可选，不指定则随机）

mode : 'x',// 滚动模式（可选，x=水平, y=垂直，默认x）

speed : 10,// 滚动速度（可选，越小速度越快，默认10）

autoStart : true,// 自动开始（可选，默认True）

movePause : true// 鼠标经过是否暂停（可选，默认True）

})

********************************************/

var MyMarquees = new Array()

// 获取检测实例名

function getMyMQName(mName) {

var name = mName==undefined ? RandStr(5) : mName

var myNames = ','+ MyMarquees.join(',') +','

while(myNames.indexOf(','+ name +',')!=-1) {

name = RandStr(5)

}

return name

}

function Marquee(inits) {

var _o = this

var _i = inits

if(_i.obj==undefined) return

_o.mode= _i.mode==undefined ? 'x' : _i.mode // 滚动模式(x:横向, y:纵向)

_o.mName = getMyMQName(_i.name) // 实例名

_o.mObj = $(_i.obj)// 滚动对象

_o.speed = _i.speed==undefined ? 10 : _i.speed // 滚动速度

_o.autoStart= _i.autoStart==undefined ? true : _i.autoStart// 自动开始

_o.movePause= _i.movePause==undefined ? true : _i.movePause// 鼠标经过是否暂停

_o.mDo = null // 计时器

_o.pause = false // 暂停状态

// 无间滚动初始化

_o.init = function() {

if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth &&_o.mode=='x') &&(_o.mObj.scrollHeight<=_o.mObj.offsetHeight &&_o.mode=='y')) return

MyMarquees.push(_o.mName)

// 克隆滚动内容

_o.mObj.innerHTML = _o.mode=='x' ? (

'<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+

' <tr>'+

' <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+

' <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+

' </tr>'+

'</table>'

) : (

'<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+

'<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'

)

// 获取对象、高宽

_o.mObj1 = $('MYMQ_'+ _o.mName +'_1')

_o.mObj2 = $('MYMQ_'+ _o.mName +'_2')

_o.mo1Width = _o.mObj1.scrollWidth

_o.mo1Height = _o.mObj1.scrollHeight

// 初始滚动

if(_o.autoStart) _o.start()

}

// 开始滚动

_o.start = function() {

_o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed)

if(_o.movePause) {

_o.mObj.onmouseover = function() {_o.pause = true}

_o.mObj.onmouseout = function() {_o.pause = false}

}

// 停止滚动

_o.stop = function() {

clearInterval(_o.mDo)

_o.mObj.onmouseover = function() {}

_o.mObj.onmouseout = function() {}

}

// 水平滚动

_o.moveX = function() {

if(_o.pause) return

var left = _o.mObj.scrollLeft

if(left==_o.mo1Width){

_o.mObj.scrollLeft = 0

}else if(left>_o.mo1Width) {

_o.mObj.scrollLeft = left-_o.mo1Width

}else{

_o.mObj.scrollLeft++

}

// 垂直滚动

_o.moveY = function() {

if(_o.pause) return

var top = _o.mObj.scrollTop

if(top==_o.mo1Height){

_o.mObj.scrollTop = 0

}else if(top>_o.mo1Height) {

_o.mObj.scrollTop = top-_o.mo1Height

}else{

_o.mObj.scrollTop++

}

_o.init()

}

//-->

</script>

</head>

<body>

<div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>

<div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause})</div>

<li><span class="key">obj：</span><span class="type">Object</span>滚动对象 (*必须)</li>

<li><span class="key">name：</span><span class="type">String</span>实例名 (*可选，默认随机)</li>

<li><span class="key">mode：</span><span class="type">String</span>滚动模式(x=水平, y=垂直) (*可选,默认为x)</li>

<li><span class="key">speed：</span><span class="type">Number</span>滚动速度，越小速度越快 (*可选，默认10)</li>

<li><span class="key">autoStart：</span><span class="type">Boolean</span>自动开始 (*可选，默认True)</li>

<li><span class="key">movePause：</span><span class="type">Boolean</span>鼠标经过是否暂停 (*可选，默认True)</li>

</ul>

</div>

<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>

<tr>

</tr>

</table>

</div>

<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>

</div>

//<!--

/*********************************************

- Marquee 演示

*********************************************/

new Marquee({

obj : 'MyMarqueeX',

movePause : false

})

new Marquee({

obj : 'MyMarqueeY',

mode : 'y'

})

//-->

</script>

</body>

</html>

各种滚动都有

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：css字体上下的距离用什么代码

# 下一篇：JS避免全局变量污染是什么意思

推荐阅读

热门文章

最新发布

标签列表

js实现图片滚动效果

给您推荐相同类型的内容：