最近发现诸如qq.com sina.com.cn sohu.com 都出现如下图所示的焦点图片新闻,查看其网页的源代码,发现它们都是通过一个 Flash 文件来调用图片,使图片交互切换。
分析整理出如下代码:
 源代码 1 <script type="text/javascript"> 2 <!-- 3 4 var focus_width = 375; // 图片宽度 5 var focus_height= 500; // 图片高度 6 var text_height = 20; // 显示的文字高度 7 var swf_height = focus_height + text_height; 8 9 var pics ="3643603.jpg|3644310.jpg|3647102.jpg|3649097.jpg|3646832.jpg|3649095.jpg|3649096.jpg"; 10 var links="3643603.jpg|3644310.jpg|3647102.jpg|3649097.jpg|3646832.jpg|3649095.jpg|3649096.jpg"; 11 var texts="3643603.jpg|3644310.jpg|3647102.jpg|3649097.jpg|3646832.jpg|3649095.jpg|3649096.jpg"; 12 13 document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '); 14 document.write('codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '); 15 document.write('width="'+ focus_width +'" '); 16 document.write('height="'+ swf_height +'">'); 17 document.write('<param name="allowScriptAccess" value="sameDomain">'); 18 document.write('<param name="movie" value="focus.swf">'); 19 document.write('<param name="quality" value="high">'); 20 document.write('<param name="bgcolor" value="#ffffff">'); 21 document.write('<param name="menu" value="false">'); 22 document.write('<param name=wmode value="opaque">'); 23 document.write('<param name="FlashVars" '); 24 document.write('value="pics='+pics); 25 document.write( '&links='+links); 26 document.write( '&texts='+texts); 27 document.write( '&borderwidth='+focus_width); 28 document.write( '&borderheight='+focus_height); 29 document.write( '&textheight='+text_height+'">'); 30 document.write('<embed src="focus.swf" '); 31 document.write('wmode="opaque" '); 32 document.write('FlashVars="pics='+pics); 33 document.write( '&links='+links); 34 document.write( '&texts='+texts); 35 document.write( '&borderwidth='+focus_width); 36 document.write( '&borderheight='+focus_height); 37 document.write( '&textheight='+text_height+'" '); 38 document.write('menu="false" '); 39 document.write('bgcolor="#ffffff" '); 40 document.write('quality="high" '); 41 document.write('width="'+ focus_width +'" '); 42 document.write('height="'+ focus_height +'" '); 43 document.write('allowScriptAccess="sameDomain" '); 44 document.write('type="application/x-shockwave-flash" '); 45 document.write('pluginspage="http://www.macromedia.com/go/getflashplayer" />'); 46 document.write('</object>'); 47 48 //--> 49 </script> 50
其中变量: pics: 指明交替的图片路径,以“|”进行分隔; links: 指明点击每幅图片打开的链接,以“|”进行分隔,与 pics 的图片一一对应; texts: 指明每幅图片的文字说明,以“|”进行分隔,与 pics 的图片一一对应; focus_width: 指明 Flash 中图片的宽度; focus_height: 指明 Flash 中图片的高度; text_height: 指明 Flash 中说明文字所占的高度; swf_height: 为 Flash 的高度。
经测试,图片只支持JPG格式的文件。
示例代码及focus.swf下载: 点击下载
|