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
>
查看全文
相关阅读:
横向技术分析C#、C++和Java优劣
XML数据流主动服务系统的设计与实现
ASP.NET 状态管理
Oracle中如何从BasicFile迁移到SecureFile
让UpdatePanel支持上传文件
C#和Visual Basic渐行渐远之匿名类型
wpf 移动变换
WPF 样式学习总结
临江仙
wpf 动画效果
原文地址:https://www.cnblogs.com/juan/p/1451355.html
最新文章
一些有创意的SQL语句
ASP.NET中常用的三十三种代码
无限级分类的数据库设计思考
asp.net相对路径的问题
torbrowse
Linux安装msoffice
ubuntu改镜像源
sql注入代码分析及预防
sql注入之报错注入and boolean注入
centos更改镜像源
热门文章
计算机视觉基础3——内部参数描述
共面点成像——planar homography
马尔可夫模型及隐马尔可夫模型(HMM)
计算机视觉基础1——视差与深度信息
计算机视觉基础5——本质矩阵与基本矩阵(Essential and Fundamental Matrices)
Zdenek Kalal的TLD Tracker
计算机视觉基础4——对极几何(Epipolar Geometry)
计算机视觉基础2——相机成像的几何描述
预编译程序集强命名
Oracle与SQL Server事务处理的比较
Copyright © 2011-2022 走看看