利用iframe加入另一網頁,並透過javascript讓網頁呈現跑馬燈效果(由上往下捲動)
最近小舖網友問到這個問題....如標題.....
小弟去找了很多網站,,,剛好找到一個網站有做到此效果...
就給它偷偷看了一下程式碼...分享給大家呀...
我把它包裝成一個範例...c#
iframe.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="iframe.aspx.cs" Inherits="iframescroll" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>iframe</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 <iframe src="scroll.aspx"></iframe>
12 </div>
13 </form>
14 </body>
15 </html>
16
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>iframe</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 <iframe src="scroll.aspx"></iframe>
12 </div>
13 </form>
14 </body>
15 </html>
16
scroll.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="scroll.aspx.cs" Inherits="scroll" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>scroll</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 四月南风大麦黄，枣花未落桐叶长。<br />
12 青山朝别暮还见，嘶马出门思故乡。<br />
13 陈侯立身何坦荡，虬须虎眉仍大颡。<br />
14 腹中贮书一万卷，不肯低头在草莽。<br />
15 东门酤酒饮我曹，心轻万事皆鸿毛。<br />
16 醉卧不知白日暮，有时空望孤云高。<br />
17 长河浪头连天黑，津口停舟渡不得。<br />
18 郑国游人未及家，洛阳行子空叹息。<br />
19 闻道故林相识多，罢官昨日今如何？</div>
20 </form>
21 </body>
22 </html>
23
24 <script language="JavaScript" type="text/javascript">
25 var scrollY = 0;
26 var maxY=150; //捲動畫面最大高度
27 var direction=0
28
29 function scrollWindow()
30 {
31 if (direction == 0)
32 {
33 window.scrollBy(0,+1);
34 if ( scrollY > maxY )
35 {
36 direction=1;
37 }
38 else
39 scrollY=scrollY + 2; //每次捲動的單位
40 }
41 else//表示超出捲動的範圍
42 {
43 window.scrollBy(0,-200);
44 direction = 0;
45 scrollY = 0;
46 }
47 }
48 function initialize()
49 {
50 timer=setInterval("scrollWindow()",180); //速度調適，數字愈小捲動越快。
51 }
52 function sc()
53 {
54 clearInterval(timer);
55 }
56 initialize();
57 document.onmouseover=sc
58 document.onmouseout=initialize
59 </script>
60
61
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>scroll</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 四月南风大麦黄，枣花未落桐叶长。<br />
12 青山朝别暮还见，嘶马出门思故乡。<br />
13 陈侯立身何坦荡，虬须虎眉仍大颡。<br />
14 腹中贮书一万卷，不肯低头在草莽。<br />
15 东门酤酒饮我曹，心轻万事皆鸿毛。<br />
16 醉卧不知白日暮，有时空望孤云高。<br />
17 长河浪头连天黑，津口停舟渡不得。<br />
18 郑国游人未及家，洛阳行子空叹息。<br />
19 闻道故林相识多，罢官昨日今如何？</div>
20 </form>
21 </body>
22 </html>
23
24 <script language="JavaScript" type="text/javascript">
25 var scrollY = 0;
26 var maxY=150; //捲動畫面最大高度
27 var direction=0
28
29 function scrollWindow()
30 {
31 if (direction == 0)
32 {
33 window.scrollBy(0,+1);
34 if ( scrollY > maxY )
35 {
36 direction=1;
37 }
38 else
39 scrollY=scrollY + 2; //每次捲動的單位
40 }
41 else//表示超出捲動的範圍
42 {
43 window.scrollBy(0,-200);
44 direction = 0;
45 scrollY = 0;
46 }
47 }
48 function initialize()
49 {
50 timer=setInterval("scrollWindow()",180); //速度調適，數字愈小捲動越快。
51 }
52 function sc()
53 {
54 clearInterval(timer);
55 }
56 initialize();
57 document.onmouseover=sc
58 document.onmouseout=initialize
59 </script>
60
61
執行結果：
捲動完後，會再跳到網頁的最上方再往下捲動