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
>
查看全文
相关阅读:
k-means聚类JAVA实例
钓鱼站点以世界杯足球赛为饵,收集个人资料
南桥--特殊回文数
Oracle 数据文件管理
hihoCoder #1142 : 三分求极值
时间复杂度和空间复杂度[数据结构]
poj 3635 Full Tank? ( 图上dp )
FastQC结果详解
毕业设计常见问题
centos 查看USB接口的版本
原文地址:https://www.cnblogs.com/juan/p/1451355.html
最新文章
HTML5 progress元素的样式控制、兼容与实例
异步文件上传组件 Uploader
extjs tablepanel 高度自适应有关问题
ExtJs:收集基于ExtJs扩展的一些控件。
关于extjs中动态添加TabPanel的tab项并以iframe显示的整理
MyEclipse卡死解决
MyEclipse 编写 ExtJS 卡死问题解决方法
详解MyEclipse10 安装Spket 1.6.23(支持Extjs4.1.1及jQuery1.8)
ExtJs非Iframe框架加载页面实现
EXTJS中的grid显示实际行号
热门文章
maven 打包到本地库
mac brew 安装php扩展报错:parent directory is world writable but not sticky
mniGraffle常用快捷键
LoggerFactory is not a Logback LoggerContext but Logback is on the classpath. Either remove Logback or the competing implementation
【转】通过BeanNameAutoProxyCreator改变臃肿代码
AppMain
WebMvcConfig
Linux文件时间属性
Kubuntu(14.04)共享wifi(热点)
openlayers3 在地图上叠加WFS查询矢量图层
Copyright © 2011-2022 走看看