图片滚动奇效实现方法的分析(JavaScript)
转载请标明是引用于 http://blog.****.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/网站下可以看到这要的自动播放效果：
2、分析
（1）它在HTML中的是一个table。
（2）通过以下两句中的id来引用到JavaScript代码：
<tr><td align="center" valign="top" id="colee_left1">
<td width="70" valign="top" id="colee_left2"></td>
（3）javaScript的定义就在主页的源码中的底部：（它是实现特效的关键所在）
以上getElementById("colee_left2");中的colee_left2 是从哪里来的呢？我猜想是从外部链接的.js文件中来的，后来发现它就是在我们的页面中指定了：
3、用于的javaScript说明
3、1 document 对象
http://www.phpx.com/man/dhtmlcn/objects/obj_document.html
属性： title ; bgColor ; url; ( 使用： document.title)
方法：
|
focus |
使得元素得到焦点并执行由 onfocus事件指定的代码。 |
|
getElementById |
获取对 ID标签属性为指定值的第一个对象的引用。 |
|
getElementsByName |
根据 NAME标签属性的值获取对象的集合。 |
|
getElementsByTagName |
获取基于指定元素名称的对象集合。 |
3、2 document . getElementById 的用法，如下：
A ： 语法：
oElement = document . getElementById ( sID )
参数：
sID : 必选项。字符串 (String) 。
返回值：
oElement : 对象 (Element) 。
说明：
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象 ，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null 。
B ：有一个例子可以很好的说明：
****************************************************************************
* *
* 这个函数中最关键的地方是 document.getElementById ，他是什么呢？ *
* *
* 关于 document.getElementById ，是这样的： *
* *
* 如： document.getElementById('hdrPageHeader_lblTitle') *
* *
* 表示的意思是：获取 ID 为 :hdrPageHeader_lblTitle 的对象
*
* *
* <a id="hdrPageHeader_lblTitle0">aa</a> *
* <a id="hdrPageHeader_lblTitle">bb</a> *
* <a id="hdrPageHeader_lblTitle1">cc</a> *
* <script language="javascript"> *
* <!-- *
* var idtext=document.getElementById('hdrPageHeader_lblTitle') *
* alert(idtext.innerText) *
* //--> *
* </script> *
* *
****************************************************************************
C ：另外还得到一个细节：
http://bbs.cnitn.cn/dispbbs.asp?boardid=20&id=12957，内容是：
① document.getElementById 有时会抓 name 放过了 id ，据说是 IE 的一个 BUG ；
页面中有
<input type="hidden" id="hello8" name="category_id" value="2" />
<select id="category_id" onchange="al();">
一个是 name="category_id" 一个是 id="category_id"
用 document.getElementById 取第二个，可是，取到的却是第一个 name=category_id。
在 IE 中 getElementById 竟然不是先抓 id 而是先找 name 相同的物件 ...
兩個 form, 每個 form 有兩個 textbox, 兩個 form 中的 textbox 是相同的 name, 但 id 都不同 ...
這樣在 Firefox 是沒問題的 ... 但在 IE 卻只抓得到第一個出現的 name 資料
4、收获
知道了滚动物资的实现，以后我们可以从别人的网站上把特效代码给copy过来使用了。