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
>
作者:
青羽
查看全文
相关阅读:
[CSP-S模拟测试]:影子(并查集+LCA)
[CSP-S模拟测试]:夜鹰与玫瑰(数学)
[CSP-S模拟测试]:抛硬币(DP)
[CSP-S模拟测试]:影魔(树状数组+线段树合并)
[CSP-S模拟测试]:队长快跑(DP+离散化+线段树)
[CSP-S模拟测试]:玄学题/c(数学)
[CSP-S模拟测试]:卡常题/b(基环树+DP)
[CSP-S模拟测试]:工业题/a(数学)
BZOJ5297 [Cqoi2018]社交网络 【矩阵树定理】
BZOJ5300 [Cqoi2018]九连环 【dp + 高精】
原文地址:https://www.cnblogs.com/tenghoo/p/524150.html
最新文章
学习:内存断点
学习:CC断点
实现:笑脸_Crack
实现:汇编指令实现循环
学习:跳转指令
学习:CMP/TEST比较指令
学习:逻辑指令
学习:数学指令
不用加减乘除做加法
求1+2+3+...+n
热门文章
圆圈中最后剩下的数字
扑克牌的顺子
n 个骰子的点数
滑动窗口的最大值(队列的最大值)
翻转单词顺序(左旋转字符串)
和为 s 的两个数字(和为 s 的连续正数序列)
数组中只出现一次的数字(数组中唯一只出现一次的数字)
二叉树的深度(平衡二叉树)
[CSP-S模拟测试]:时间机器(贪心+set)
[CSP-S模拟测试]:世界线(DFS+bitset)
Copyright © 2011-2022 走看看