zoukankan
html css js c++ java
图片翻页滚动效果(JavaScript)
<
html
><
head
>
<
meta http
-
equiv
=
'Content
-
Type' content
=
'text
/
html; charset
=
gb2312'
>
<
script language
=
'JavaScript'
>
var
scrollerheight
=
160
;
//
定义每个区域显示的高度
var
html,total_area
=
0
,wait_flag
=
true
;
//
初始化html串,总显示区域数,是否等待.
var
bMouseOver
=
1
;
//
鼠标放上去就不滚动了,这里硬编码为true
var
scrollspeed
=
5
;
//
滚动速度,其实是每次向上移动的象素数,值越大看起来越快
var
waitingtime
=
5000
;
//
每次翻动的等待时间,单位毫秒
var
s_tmp
=
0
//
初始移动次数
var
s_amount
=
32
;
//
它的值是由每次需要移动的象素除以scrollspeed换算出来的
var
scroll_content
=
new
Array();
//
声明一个数组
var
startPanel
=
0
, n_panel
=
0
, i
=
0
;
//
声明初始区域,区域个数和循环变量
//
********************************************
//
这是我做的一个跟踪变量函数
//
在需要使用跟踪变量的地方直接调用trace()函数就可以了.
var
newwin;
var
isDebug
=
1
;
function
trace(s)
{
if
(isDebug)
{
try
{
newwin.document.write(s
+
"
<BR>
"
);
}
catch
(e)
{
newwin
=
window.open(
""
,
"
trace
"
);
newwin.document.write(s
+
"
<BR>
"
);
}
}
}
//
**********************************************
//
初始化滚动函数
function
startscroll()
{
//
随机获取初始区域
//
startPanel是0到scroll_content下标的任意数
i
=
0
;
for
(i
in
scroll_content)n_panel
++
;
n_panel
=
n_panel
-
1
;
startPanel
=
Math.round(Math.random()
*
n_panel);
//
如果初始区域是第一个元素,
//
调用insert_area把scroll_content里所有元素都装到DIV里
if
(startPanel
==
0
)
{
i
=
0
;
for
(i
in
scroll_content)
insert_area(total_area, total_area
++
);
}
else
//
如果初始区域是最后一个元素
//
先把最后一个装进DIV,然后依次把其它元素装进DIY
if
(startPanel
==
n_panel)
//
如果是最后一个元素
{
insert_area(startPanel, total_area);
total_area
++
;
for
(i
=
0
; i
<
startPanel; i
++
)
{
insert_area(i,total_area);
total_area
++
;
}
}
else
//
如果初始区域不是第一个,也不是最后一个
//
先把当前区域装进DIV,
//
然后再把当前区域之前和之后的区域装进DIV
if
((startPanel
>
0
)
||
(startPanel
<
n_panel))
{
insert_area(startPanel,total_area);
total_area
++
;
for
(i
=
startPanel
+
1
; i
<=
n_panel; i
++
)
{
insert_area(i,total_area);
total_area
++
;
}
for
(i
=
0
; i
<
startPanel; i
++
)
{
insert_area(i,total_area);
total_area
++
;
}
}
//
每隔waitingtime的时间调用一次scrolling()函数
window.setTimeout('scrolling()',waitingtime);
}
//
滚动函数
function
scrolling()
{
//
判断鼠标是否放上去,并且是否在等待
if
(bMouseOver
&&
wait_flag)
{
trace(
"
----------------------------
"
);
for
(i
=
0
;i
<
total_area;i
++
)
{
//
每次所有区域同意向上移动scrollspeed个象素
tmp
=
document.getElementById('scroll_area'
+
i).style;
tmp.top
=
parseInt(tmp.top)
-
scrollspeed;
if
(i
==
0
)trace(
"
第一个区域的顶部
"
+
parseInt(tmp.top));
//
如果从屏幕种移出1个区域的话,被移出的区域从底部出现
if
(parseInt(tmp.top)
<=
-
scrollerheight)
{
tmp.top
=
scrollerheight
*
(total_area
-
1
);
}
trace(
"
移动次数:
"
+
s_tmp);
//
s_tmp是向上移动的次数,按理说应该移动到正好要移动的象素就该停止了
//
因为一次向上移动scrollspeed个象素,本例子中一次翻动要移动的象素就是scrollerheight
//
当然你也可以一次翻动两个scrollerheight
//
所以要移动scrollerheight/scrollspeed次,s_amount就是这样算出来的.
//
因为s_tmp是从0初始化的,所以减去1后才是真正一次翻动要移动的次数
//
但是呢,因为执行一次scrolling()函数,s_tmp就会增加scroll_content.length多次,
//
所以移动的次数应当是(s_amount-1)*scroll_content.length),
//
当翻动次数大于我们算出来的值的时候就要停止,也就是把向上移动的必要条件去调
//
这从跟踪变量的输出可以看出来
if
(s_tmp
++
>
(s_amount
-
1
)
*
scroll_content.length)
{
trace(
"
(s_amount-1)*scroll_content.length=
"
+
(s_amount
-
1
)
*
scroll_content.length)
wait_flag
=
false
;
//
进入等待
//
等待waitingtime,再消除等待,并且吧s_tmp归零.
window.setTimeout('wait_flag
=
true
;s_tmp
=
0
;',waitingtime);
}
}
}
//
设置1秒钟执行1000次本函数
window.setTimeout('scrolling()',
1
);
}
function
insert_area(idx, n)
{
html
=
'
<
div style
=
"
left: 0px; 100%; position: absolute; top: '+(scrollerheight*n)+'px
"
id
=
"
scroll_area'+n+'
"
>
';
html
+=
scroll_content[idx]
+
'';html
+=
'
</
div
>
';document.write(html);
}
//
下面的部分可以由asp循环生成
scroll_content[
0
]
=
'
<
table height
=
140
align
=
center border
=
0
width
=
300
id
=
0
><
tr
><
td
><
a href
=
# target
=
_blank
><
IMG SRC
=
http:
//
onlytiancai/bak/77love/UploadAdPic/200572695027151.gif width=307 height=140 border=0></a></td></tr></table>';
scroll_content[
1
]
=
'
<
table height
=
140
align
=
center border
=
0
width
=
300
id
=
1
><
tr
><
td
><
a href
=
# target
=
_blank
><
IMG SRC
=
http:
//
onlytiancai/bak/77love/UploadAdPic/200572694642351.jpg width=307 height=140 border=0></a></td></tr></table>';
scroll_content[
2
]
=
'
<
table height
=
140
align
=
center border
=
0
width
=
300
id
=
2
><
tr
><
td
><
a href
=
# target
=
_blank
><
IMG SRC
=
http:
//
onlytiancai/bak/77love/UploadAdPic/200572694652122.jpg width=307 height=140 border=0></a></td></tr></table>';
startscroll();
</
script
>
From:
http://onlytiancai.cnblogs.com/archive/2005/07/27/201013.html
查看全文
相关阅读:
如何设置PPT,演示者能看到备注而观众看不到
面向对象的设计原则-类设计原则
C#路径
MyEclipse汉化
XML
C#读取Excel文件
预处理指令
c/c++有些函数之前有export
动态内存
模板
原文地址:https://www.cnblogs.com/xiaodi/p/371641.html
最新文章
Mysql with nolock 查询
异步Task捕获异常
MongoDB找出子集数据并输出结果
Angular中数组与字典循环写法
centos7 nginx安装启动与配置通用Nginx.conf
Nginx最简单的nginx.conf配置与说明(centos7)
Owin Nuget 包解释
性能优化第1节课
.Net Core
.NET Core基础理论
热门文章
线程原理篇——>第7章 线程
线程原理篇——>第9章 死锁应对之哲学原理
锁的进化——金鱼生存
线程同步的目的
夯实根基
线程原理篇——>第8章 线程同步
为什么要同步
编程面试十大算法
JAVA super的用法
面向对象方法中的数据库设计
Copyright © 2011-2022 走看看