日期:2014-05-16  浏览次数:20381 次

图片滚动特效实现方法的分析(JavaScript)

 

 转载请标明是引用于 http://blog.csdn.net/chenyujing5678 

欢迎拍砖!

 一、第一种特效

1、待分析的特效

http://www.bdqn.cn/网站下可以看到这要的自动播放效果

2、分析

打开主页的源文件,找到此模块的代码:

<!--左侧图片广告开始-->
        <div class="flash">
             <script type="text/javascript">
					             var swf_width=338;
					 			var swf_height=250;
                                var config='5|0xffffff|0x666666|80|0xffffff|0xFF9900|0x000000';	//-- config 参数设置 -- 自动播放时间(秒)|文字颜色|文字背景色|文字背景透明度|按键数字颜色|当前按键颜色|普通按键色彩 --
                                var files='',links='', texts='';
                                                                files+='|http://www.bdqn.cn/admin/uploads/2012/05/24/4fbe063fc1e5f.jpg';links+='|http://www.bdqn.cn/xczb';texts+='|';
                                                                files+='|http://www.bdqn.cn/admin/uploads/2012/05/24/4fbe064b7a999.jpg';links+='|http://www.bdqn.cn/topic/index2.html';texts+='|';
                                                                files+='|http://www.bdqn.cn/admin/uploads/2012/05/24/4fbe06558fd44.jpg';links+='|http://www.bdqn.cn/news/info/id/1892.html';texts+='|';
                                                                files+='|http://www.bdqn.cn/admin/uploads/2012/05/24/4fbe06703c4d3.jpg';links+='|http://www.bdqn.cn/topic/index1.html';texts+='|';
                                                                files+='|http://www.bdqn.cn/admin/uploads/2012/05/24/4fbe06674845f.jpg';links+='|http://home.bdqn.cn/client_down.php';texts+='|';
                                                                files=files.substring(1);links=links.substring(1);texts=texts.substring(1);
                                document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
                                document.write('<param name="movie" value="media/focus.swf" />');
                                document.write('<param name="quality" value="high" />');
                                document.write('<param name="menu" value="false" />');
                                document.write('<param name=wmode value="opaque" />');
                                document.write('<param name="FlashVars" value="config='+config+'&bcastr_flie='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'" />');
                                document.write('<embed src="media/focus.swf" wmode="opaque" FlashVars="config='+config+'&bcastr_flie='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
                                document.write('</object>');
              </script>
        
      </div>


1)、<div class="flash">

它表从引入的.css文件中读取样式flash,如下:

.flash{ border:1px solid #ccc; height:250px;}

2)、

前面是变量定义:swf_width、 swf_height、config、files、links、texts

二、第二种特效

1、待分析的特效

http://www.bdqn.cn/网站下可以看到这要的自动播放效果