]]>
msn鐨勬晥鏋滄埅鍥?br />
鍏ㄩ儴鏄痡s瀹炵幇鐨勶紝鏁堟灉榪樹笉閿欙紝鍙互IE7錛宖f3錛孋hrome涓婃甯歌繍琛?榪欓噷鏄痙emo[鏌ョ湅]
鍏朵腑浣跨敤浜唈query1.3.2[涓嬭澆]錛宩query.cycle.all.js[涓嬭澆] 鎵鏈夋枃浠跺湪榪欓噷[涓嬭澆]
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 12px;
4 font-style: normal;
5 line-height: normal;
6 font-weight: normal;
7 }
8 .clear{
9 clear:both;
10 height:0px;
11 }
12 .hot {
13 background-color: #F7F7F7;
14 height: 227px;
15 width: 302px;
16 border: 1px solid #DEDEDE;
17 padding-right:5px;
18 }
19
20 .hot_pic {
21 height: 190px;
22 width: 250px;
23 padding: 0;
24 margin: 0;
25 float:left;
26 clear:left;
27 }
28
29 .hot_pic img {
30 background-color: #eee;
31 width: 240px;
32 height: 180px;
33 top: 0;
34 left: 0 ;
35 padding: 5px;
36 }
37 .hot_thumb{
38 float:right;
39 clear:right;
40 height:190px;
41 width:52px;
42 }
43 .hot_thumb a { width: 52px; height:48px; display: block;padding-top:0px;margin-top:0px;}
44 .hot_thumb a.activeSlide {
45 background-image: url(activeSlide.png);
46 }
47 .hot_thumb a:focus { outline: none; }
48 .hot_thumb img { border: none; margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:8px;}
49
50 .hot_title p{margin:0 0;line-height:18px;padding-left:5px;}
51
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 12px;
4 font-style: normal;
5 line-height: normal;
6 font-weight: normal;
7 }
8 .clear{
9 clear:both;
10 height:0px;
11 }
12 .hot {
13 background-color: #F7F7F7;
14 height: 227px;
15 width: 302px;
16 border: 1px solid #DEDEDE;
17 padding-right:5px;
18 }
19
20 .hot_pic {
21 height: 190px;
22 width: 250px;
23 padding: 0;
24 margin: 0;
25 float:left;
26 clear:left;
27 }
28
29 .hot_pic img {
30 background-color: #eee;
31 width: 240px;
32 height: 180px;
33 top: 0;
34 left: 0 ;
35 padding: 5px;
36 }
37 .hot_thumb{
38 float:right;
39 clear:right;
40 height:190px;
41 width:52px;
42 }
43 .hot_thumb a { width: 52px; height:48px; display: block;padding-top:0px;margin-top:0px;}
44 .hot_thumb a.activeSlide {
45 background-image: url(activeSlide.png);
46 }
47 .hot_thumb a:focus { outline: none; }
48 .hot_thumb img { border: none; margin-top:4px;margin-right:4px;margin-bottom:4px;margin-left:8px;}
49
50 .hot_title p{margin:0 0;line-height:18px;padding-left:5px;}
51
1 <script type="text/javascript" >
2 $(document).ready(function(){
3
4 /*浣跨敤鏈嶅姟鍣ㄧ鐢熸垚浠ｇ爜,id瑕佷笌鍚庨潰鐨刢lass="hot_pic"鍐呯殑鍥劇墖瀵瑰簲*/
5 /*涔熷彲浠ュ彲浠ヤ嬌JSON*/
6 var data = [];
7 data['img_4'] ={'news_title':'浜湴閾?鍙風(fēng)嚎濂沖憳宸ュ緹?#8220;絀哄”','news_abs':'棣栨湯杞︽椂闂寸‘瀹氾紝8鏈堥個娌跨嚎灞呮皯璇曚箻','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8 data['img_3'] ={'news_title':'鍛ㄨ繀鍏ㄦ櫤璐ゆ儕鑹沖反榛庢椂瑁呭懆','news_abs':'涓ょ編濂沖悓閫夐粦鑹插皬紺兼湇錛屽懆榪呯孩鍞囨姠鐪?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9 data['img_1'] ={'news_title':' 榛勫織蹇犲仛瀹SN鏄熸湀瀵硅瘽(瑙嗛)','news_abs':' 緇忓吀鏉ㄧ珛浠侊紝鐩存挱鐜板満琛ㄦ紨澶╂觸蹇澘','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10 data['img_2'] ={'news_title':' 浠や漢鎯婂徆鐨勯噹鐢熶笘鐣?,'news_abs':' 浜旇壊楦熷畧鐫宸㈢┐錛岀編媧茶憊鍋風(fēng)閭誨眳','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
11
12 /*浣跨敤jQuery Cycle Plugin*/
13 $('.hot_pic').cycle({
14 fx: 'fade',
15 pause: 1 ,
16 pager: '.hot_thumb',
17 pagerAnchorBuilder: function(idx, slide) {
18 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
19 },
20 before:function onAfter() {
21 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">璇︾粏</a>]</p>');
22 }
23 });
24
25 });
26 </script>
2 $(document).ready(function(){
3
4 /*浣跨敤鏈嶅姟鍣ㄧ鐢熸垚浠ｇ爜,id瑕佷笌鍚庨潰鐨刢lass="hot_pic"鍐呯殑鍥劇墖瀵瑰簲*/
5 /*涔熷彲浠ュ彲浠ヤ嬌JSON*/
6 var data = [];
7 data['img_4'] ={'news_title':'浜湴閾?鍙風(fēng)嚎濂沖憳宸ュ緹?#8220;絀哄”','news_abs':'棣栨湯杞︽椂闂寸‘瀹氾紝8鏈堥個娌跨嚎灞呮皯璇曚箻','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
8 data['img_3'] ={'news_title':'鍛ㄨ繀鍏ㄦ櫤璐ゆ儕鑹沖反榛庢椂瑁呭懆','news_abs':'涓ょ編濂沖悓閫夐粦鑹插皬紺兼湇錛屽懆榪呯孩鍞囨姠鐪?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
9 data['img_1'] ={'news_title':' 榛勫織蹇犲仛瀹SN鏄熸湀瀵硅瘽(瑙嗛)','news_abs':' 緇忓吀鏉ㄧ珛浠侊紝鐩存挱鐜板満琛ㄦ紨澶╂觸蹇澘','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
10 data['img_2'] ={'news_title':' 浠や漢鎯婂徆鐨勯噹鐢熶笘鐣?,'news_abs':' 浜旇壊楦熷畧鐫宸㈢┐錛岀編媧茶憊鍋風(fēng)閭誨眳','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
11
12 /*浣跨敤jQuery Cycle Plugin*/
13 $('.hot_pic').cycle({
14 fx: 'fade',
15 pause: 1 ,
16 pager: '.hot_thumb',
17 pagerAnchorBuilder: function(idx, slide) {
18 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
19 },
20 before:function onAfter() {
21 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">璇︾粏</a>]</p>');
22 }
23 });
24
25 });
26 </script>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>鍥劇墖鍒囨崲</title>
6 <link href="index.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" language="JavaScript" src="jquery.js"></script>
8 <script type="text/javascript" language="JavaScript" src="jquery.cycle.all.js"></script>
9 <script type="text/javascript" >
10 $(document).ready(function(){
11
12 /*浣跨敤鏈嶅姟鍣ㄧ鐢熸垚浠ｇ爜,id瑕佷笌鍚庨潰鐨刢lass="hot_pic"鍐呯殑鍥劇墖瀵瑰簲*/
13 /*涔熷彲浠ュ彲浠ヤ嬌JSON*/
14 var data = [];
15 data['img_4'] ={'news_title':'浜湴閾?鍙風(fēng)嚎濂沖憳宸ュ緹?#8220;絀哄”','news_abs':'棣栨湯杞︽椂闂寸‘瀹氾紝8鏈堥個娌跨嚎灞呮皯璇曚箻','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16 data['img_3'] ={'news_title':'鍛ㄨ繀鍏ㄦ櫤璐ゆ儕鑹沖反榛庢椂瑁呭懆','news_abs':'涓ょ編濂沖悓閫夐粦鑹插皬紺兼湇錛屽懆榪呯孩鍞囨姠鐪?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17 data['img_1'] ={'news_title':' 榛勫織蹇犲仛瀹SN鏄熸湀瀵硅瘽(瑙嗛)','news_abs':' 緇忓吀鏉ㄧ珛浠侊紝鐩存挱鐜板満琛ㄦ紨澶╂觸蹇澘','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18 data['img_2'] ={'news_title':' 浠や漢鎯婂徆鐨勯噹鐢熶笘鐣?,'news_abs':' 浜旇壊楦熷畧鐫宸㈢┐錛岀編媧茶憊鍋風(fēng)閭誨眳','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
19
20 /*浣跨敤jQuery Cycle Plugin*/
21 $('.hot_pic').cycle({
22 fx: 'fade',
23 pause: 1 ,
24 pager: '.hot_thumb',
25 pagerAnchorBuilder: function(idx, slide) {
26 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
27 },
28 before:function onAfter() {
29 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">璇︾粏</a>]</p>');
30 }
31 });
32
33 });
34 </script>
35 </head>
36
37 <body>
38 <div class="hot">
39 <div class="hot_pic">
40 <img id="img_1" src="1.jpg" width="240" height="180" />
41 <img id="img_2" src="2.jpg" width="240" height="180" />
42 <img id="img_3" src="3.jpg" width="240" height="180" />
43 <img id="img_4" src="4.jpg" width="240" height="180" />
44 </div>
45 <div class="hot_thumb"></div>
46 <div class="clear"></div>
47 <div class="hot_title">
48 </div>
49 </div>
50 </body>
51 </html>
52
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>鍥劇墖鍒囨崲</title>
6 <link href="index.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" language="JavaScript" src="jquery.js"></script>
8 <script type="text/javascript" language="JavaScript" src="jquery.cycle.all.js"></script>
9 <script type="text/javascript" >
10 $(document).ready(function(){
11
12 /*浣跨敤鏈嶅姟鍣ㄧ鐢熸垚浠ｇ爜,id瑕佷笌鍚庨潰鐨刢lass="hot_pic"鍐呯殑鍥劇墖瀵瑰簲*/
13 /*涔熷彲浠ュ彲浠ヤ嬌JSON*/
14 var data = [];
15 data['img_4'] ={'news_title':'浜湴閾?鍙風(fēng)嚎濂沖憳宸ュ緹?#8220;絀哄”','news_abs':'棣栨湯杞︽椂闂寸‘瀹氾紝8鏈堥個娌跨嚎灞呮皯璇曚箻','news_url':'http://msn.china.ynet.com/view.jsp?oid=53769752'};
16 data['img_3'] ={'news_title':'鍛ㄨ繀鍏ㄦ櫤璐ゆ儕鑹沖反榛庢椂瑁呭懆','news_abs':'涓ょ編濂沖悓閫夐粦鑹插皬紺兼湇錛屽懆榪呯孩鍞囨姠鐪?,'news_url':'http://msn.ent.ynet.com/view.jsp?oid=53794257'};
17 data['img_1'] ={'news_title':' 榛勫織蹇犲仛瀹SN鏄熸湀瀵硅瘽(瑙嗛)','news_abs':' 緇忓吀鏉ㄧ珛浠侊紝鐩存挱鐜板満琛ㄦ紨澶╂觸蹇澘','news_url':'http://info.msn.com.cn/interview_subject/33718.shtml'};
18 data['img_2'] ={'news_title':' 浠や漢鎯婂徆鐨勯噹鐢熶笘鐣?,'news_abs':' 浜旇壊楦熷畧鐫宸㈢┐錛岀編媧茶憊鍋風(fēng)閭誨眳','news_url':'http://msn.tech.ynet.com/pic.jsp?oid=53794462'};
19
20 /*浣跨敤jQuery Cycle Plugin*/
21 $('.hot_pic').cycle({
22 fx: 'fade',
23 pause: 1 ,
24 pager: '.hot_thumb',
25 pagerAnchorBuilder: function(idx, slide) {
26 return '<a href="#"><img src="' + slide.src + '" width="40px" height="40px" /></a>';
27 },
28 before:function onAfter() {
29 $('.hot_title').html('<p style="font-weight:bold;"><a href="' + data[this.id].news_url + '">' + data[this.id].news_title + '</a></string></p><p>' + data[this.id].news_abs + '[<a href="' + data[this.id].news_url+ '">璇︾粏</a>]</p>');
30 }
31 });
32
33 });
34 </script>
35 </head>
36
37 <body>
38 <div class="hot">
39 <div class="hot_pic">
40 <img id="img_1" src="1.jpg" width="240" height="180" />
41 <img id="img_2" src="2.jpg" width="240" height="180" />
42 <img id="img_3" src="3.jpg" width="240" height="180" />
43 <img id="img_4" src="4.jpg" width="240" height="180" />
44 </div>
45 <div class="hot_thumb"></div>
46 <div class="clear"></div>
47 <div class="hot_title">
48 </div>
49 </div>
50 </body>
51 </html>
52
]]>