zoukankan
html css js c++ java
JavaScript实现图片移动
JavaScript代码:
JavaScript代码
<
script type
=
"
text/javascript
"
defer
>
var
marquee_spd
=
25
;
//
滚动速度,数值越小越快
var
repeat
=
null
;
var
obj_marquee
=
document.getElementById(
"
ImgList
"
);
//
本例中的<div id=ImgList>
function
marquee_init()
{
var
obj_unit
=
obj_marquee.firstChild;
var
marquee_high
=
parseInt(obj_marquee.style.height);
var
marquee_wide
=
parseInt(obj_marquee.style.width);
var
unit_high
=
obj_unit.offsetHeight;
var
unit_wide
=
obj_unit.offsetWidth;
var
m
=
0
, n
=
0
, i
=
0
;
var
tmp
=
null
;
m
=
Math.ceil(marquee_wide
/
unit_wide);
n
=
Math.ceil(marquee_high
/
unit_high);
obj_unit.style.width
=
marquee_wide
*
(m
+
1
);
obj_unit.rows[
0
].cells[
0
].style.width
=
obj_marquee.style.width;
for
(i
=
0
; i
<
m; i
++
)
{
tmp
=
obj_unit.rows[
0
].insertCell(
-
1
);
tmp.innerHTML
=
obj_unit.rows[
0
].cells[
0
].innerHTML;
tmp.style.width
=
marquee_wide;
tmp
=
null
;
}
for
(i
=
0
; i
<
n; i
++
)
{
obj_marquee.appendChild(obj_unit.cloneNode(
true
));
}
return
;
}
function
marquee_show(direction)
{
switch
(direction)
{
case
"
up
"
:
if
(obj_marquee.scrollTop
>=
obj_marquee.children[
1
].offsetTop)
{
obj_marquee.scrollTop
-=
obj_marquee.firstChild.offsetHeight;
}
else
{
obj_marquee.scrollTop
++
;
}
break
;
case
"
down
"
:
if
(obj_marquee.scrollTop
<=
0
)
{
obj_marquee.scrollTop
+=
obj_marquee.firstChild.offsetHeight;
}
else
{
obj_marquee.scrollTop
--
;
}
break
;
case
"
left
"
:
if
(obj_marquee.scrollLeft
>=
obj_marquee.firstChild.rows[
0
].cells[
0
].offsetWidth)
{
obj_marquee.scrollLeft
-=
obj_marquee.firstChild.rows[
0
].cells[
0
].offsetWidth;
}
else
{
obj_marquee.scrollLeft
++
;
}
break
;
case
"
right
"
:
if
(obj_marquee.scrollLeft
<=
0
)
{
obj_marquee.scrollLeft
+=
obj_marquee.firstChild.rows[
0
].cells[
0
].offsetWidth;
}
else
{
obj_marquee.scrollLeft
--
;
}
break
;
default
:
break
;
}
return
;
}
function
marquee_doit()
{
var
direction
=
""
;
direction
=
obj_marquee.getAttribute(
"
direction
"
);
if
(direction
!=
null
) marquee_show(direction);
direction
=
obj_marquee.getAttribute(
"
direction2
"
);
if
(direction
!=
null
) marquee_show(direction);
return
;
}
function
startMove()
{
marquee_init();
repeat
=
setInterval(
"
marquee_doit()
"
, marquee_spd);
obj_marquee.onmouseover
=
function
()
{ clearInterval(repeat); }
obj_marquee.onmouseout
=
function
()
{ repeat
=
setInterval(
"
marquee_doit()
"
, marquee_spd); }
}
startMove();
</
script
>
DIV代码:
图片列表
<
div id
=
"
ImgList
"
direction
=
"
left
"
style
=
"
overflow:hidden;height:100px;700px
"
>
<
table width
=
"
1728
"
border
=
"
0
"
cellspacing
=
"
0
"
cellpadding
=
"
0
"
ID
=
"
Table1
"
>
<
tr
>
<
td
>
<
table cellspacing
=
0
cellpadding
=
0
border
=
0
align
=
"
center
"
ID
=
"
Table2
"
>
<
tbody
>
<
tr
>
<
td bordercolor
=
#ffffff width
=
"
102
"
height
=
"
108
"
>
<
div align
=
"
center
"
><
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
"
1.jpg
"
width
=
86
border
=
"
0
"
hspace
=
8
></
a
><
br
>
<
img src
=
"
space.gif
"
width
=
"
3
"
height
=
"
3
"
><
br
>
<
font color
=
"
#0000CC
"
>
图片1
</
font
></
div
>
</
td
>
<
td bordercolor
=
#ffffff width
=
"
102
"
height
=
"
108
"
>
<
div align
=
"
center
"
><
a href
=
"
#
"
target
=
"
_blank
"
><
img src
=
"
2.jpg
"
width
=
86
border
=
"
0
"
hspace
=
8
></
a
><
br
>
<
img src
=
"
space.gif
"
width
=
"
3
"
height
=
"
3
"
><
br
>
<
font color
=
"
#0000CC
"
>
图片2
</
font
></
div
>
</
td
>
</
tr
>
</
tbody
>
</
table
>
</
td
>
</
tr
>
</
table
>
</
div
>
---------20091113------------
原JS代码不兼容FF,我做了下修改。
Code
<
script type
=
"
text/javascript
"
defer
>
var marquee_spd
=
25
;
//
滚动速度,数值越小越快
var repeat
=
null
;
var obj_marquee
=
document.getElementById(
"
ImgList
"
);
//
本例中的<div id=ImgList>
function marquee_init()
{
var obj_unit
=
frist(obj_marquee);
//
obj_marquee.childNodes[1];
var marquee_high
=
parseInt(obj_marquee.style.height);
var marquee_wide
=
parseInt(obj_marquee.style.width);
var unit_high
=
obj_unit.offsetHeight;
var unit_wide
=
obj_unit.offsetWidth;
var m
=
0
, n
=
0
, i
=
0
;
var tmp
=
null
;
m
=
Math.ceil(marquee_wide
/
unit_wide);
n
=
Math.ceil(marquee_high
/
unit_high);
obj_unit.style.width
=
marquee_wide
*
(m
+
1
);
obj_unit.rows[
0
].cells[
0
].style.width
=
obj_marquee.style.width;
for
(i
=
0
; i
<
m; i
++
)
{
tmp
=
obj_unit.rows[
0
].insertCell(
-
1
);
tmp.innerHTML
=
obj_unit.rows[
0
].cells[
0
].innerHTML;
tmp.style.width
=
marquee_wide;
tmp
=
null
;
}
for
(i
=
0
; i
<
n; i
++
)
{
obj_marquee.appendChild(obj_unit.cloneNode(
true
));
}
return
;
}
function marquee_show(direction)
{
switch
(direction)
{
case
"
up
"
:
if
(obj_marquee.scrollTop
>=
frist(obj_marquee).offsetTop)
{
obj_marquee.scrollTop
-=
frist(obj_marquee).offsetHeight;
}
else
{
obj_marquee.scrollTop
++
;
}
break
;
case
"
down
"
:
if
(obj_marquee.scrollTop
<=
0
)
{
obj_marquee.scrollTop
+=
frist(obj_marquee).offsetHeight;
}
else
{
obj_marquee.scrollTop
--
;
}
break
;
case
"
left
"
:
if
(obj_marquee.scrollLeft
>=
frist(obj_marquee).rows[
0
].cells[
0
].offsetWidth)
{
obj_marquee.scrollLeft
-=
frist(obj_marquee).rows[
0
].cells[
0
].offsetWidth;
}
else
{
obj_marquee.scrollLeft
++
;
}
break
;
case
"
right
"
:
if
(obj_marquee.scrollLeft
<=
0
)
{
obj_marquee.scrollLeft
+=
frist(obj_marquee).rows[
0
].cells[
0
].offsetWidth;
}
else
{
obj_marquee.scrollLeft
--
;
}
break
;
default
:
break
;
}
return
;
}
function marquee_doit()
{
var direction
=
""
;
direction
=
obj_marquee.getAttribute(
"
direction
"
);
if
(direction
!=
null
) marquee_show(direction);
direction
=
obj_marquee.getAttribute(
"
direction2
"
);
if
(direction
!=
null
) marquee_show(direction);
return
;
}
function startMove()
{
marquee_init();
repeat
=
setInterval(
"
marquee_doit()
"
, marquee_spd);
obj_marquee.onmouseover
=
function()
{ clearInterval(repeat); }
obj_marquee.onmouseout
=
function()
{ repeat
=
setInterval(
"
marquee_doit()
"
, marquee_spd); }
}
function frist(obj)
{
if
(browser().ie)
return
obj.childNodes[
0
];
if
(browser().firefox)
return
obj.childNodes[
1
];
}
function browser()
{
var Sys
=
{}
;
var ua
=
navigator.userAgent.toLowerCase();
var s;
(s
=
ua.match(
/
msie ([\d.]
+
)
/
))
?
Sys.ie
=
s[
1
] :
(s
=
ua.match(
/
firefox\
/
([\d.]
+
)
/
))
?
Sys.firefox
=
s[
1
] :
(s
=
ua.match(
/
chrome\
/
([\d.]
+
)
/
))
?
Sys.chrome
=
s[
1
] :
(s
=
ua.match(
/
opera.([\d.]
+
)
/
))
?
Sys.opera
=
s[
1
] :
(s
=
ua.match(
/
version\
/
([\d.]
+
).
*
safari
/
))
?
Sys.safari
=
s[
1
] :
0
;
return
Sys;
}
startMove();
</
script
>
作者:
青羽
查看全文
相关阅读:
敌兵布阵(线段树单点更新+区间查询)
小明上学(CCF认证2018-12-1 )
There Are Two Types Of Burgers (Educational Codeforces Round 71)
Bad Prices ( Codeforces Round #582 )
Redis热点key优化
Redis big key处理
Redis的安全问题
Redis的flushall/flushdb误操作
Redis在linux系统中的优化
Redis之缓存设计
原文地址:https://www.cnblogs.com/tenghoo/p/524150.html
最新文章
HOG特征
sift算法
Gabor滤波原理和matlab实现
轨迹相似度计算,DTW
A. Many Equal Substrings(思维)
Naive Operations HDU
Naive Operations HDU
Can you answer these queries? HDU
Can you answer these queries? HDU
CCF 201609-4 交通规划(dij变形)
热门文章
CCF 201609-4 交通规划(dij变形)
CCF201604-4 游戏
CCF201604-4 游戏
D
Buy Watermelon (The Preliminary Contest for ICPC Asia Xuzhou 2019)
【XR-3】小道消息 (Comet OJ
I Hate It(线段树区间最值+更新区间)
Balanced Lineup(区间更新+查询)
Just a Hook(区间更新+区间和)
Simple Problem with Integers (线段树更新懒惰值+区间和)
Copyright © 2011-2022 走看看