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
查看全文
相关阅读:
Average of Levels in Binary Tree
Maximum Average Subarray I
Integer Replacement
Add Digits
Binary Tree Level Order Traversal II
Majority Element II
Majority Element
匿名函数
Django的Template不支持range()函数的问题解决办法
python文件对比利用difflib库实现文件夹下详细内容对比
原文地址:https://www.cnblogs.com/xiaodi/p/371641.html
最新文章
MYSQL遇到的乱码问题
分支限界法解决01背包问题
Lambda表达式(1)
java注解(1)
快速排序
JDBC访问数据库步骤
N皇后问题(递归回溯)
Oracle取整的函数
怎样通过DMZ实现公网互联
Oracle按数字大小排序
热门文章
Oracle表添加字段命令
设置Oracle密码永不过期
Oracle自动增长序号
Oracle中文转拼音
Oracle创建表空间
手动在电脑上创建Wifi
Oracle空表导出解决方法
559. Maximum Depth of N-ary Tree
558. Quad Tree Intersection
1-bit and 2-bit Characters
Copyright © 2011-2022 走看看