zoukankan
html css js c++ java
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
>
查看全文
相关阅读:
阿里云:面向5G时代的物联网无线连接服务
走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相
Redis 5.0新功能介绍
阿里云发布 Redis 5.0 缓存服务:全新 Stream 数据类型带来不一样缓存体验
荣获“5G MEC优秀商用案例奖”,阿里云边缘计算发力新零售
阿里云亮相2019联通合作伙伴大会,边缘计算等3款云产品助力5G时代产业数字化转型
noip2014 寻找道路
noip2014 无线网络发射器选址
noip2014 联合权值
noip2013 华容道
原文地址:https://www.cnblogs.com/juan/p/1451355.html
最新文章
吴裕雄--天生自然GPU配置:查看本机显卡是否支持GPU
吴裕雄--天生自然深度学习TensorBoard可视化:projector_MNIST
吴裕雄--天生自然深度学习TensorBoard可视化:projector_data_prepare
吴裕雄--天生自然深度学习TensorBoard可视化:监控指标可视化
吴裕雄--天生自然深度学习TensorBoard可视化:改造后的mnist_train
吴裕雄--天生自然深度学习TensorBoard可视化:命名空间
HihoCoder1620: 股票价格3 (单调队列 or DP)
【转】ACM博弈知识汇总
【占位】HihoCoder1317 跳舞链
【整理】关于缩点的三种题型
热门文章
HihoCoder 1185 : 连通性·三(强连通缩点)
HihoCoder 1174 拓扑排序·一
【占位】HihoCoder 1160 : 攻城略地(并查集好题)
HihoCoder 1158 : 质数相关 (最大独立集)
HihoCoder 1053 : 居民迁移 二分+贪心+双指针(好题)
HiHoCoder1156 彩色的树(树值的记忆化ORZ+map强势出场)
阿里开源!轻量级深度学习端侧推理引擎 MNN
云原生的新思考,为什么容器已经无处不在了
洞见数据库前沿 集结阿里云数据库最强阵容 DTCC 2019 八大亮点抢先看
Kubernetes弹性伸缩全场景解读(五)
Copyright © 2011-2022 走看看