F-BLOG 傅唯一'BLOG http://www.fblog.net.cn F-BLOG 傅唯一'BLOG zh-cn F-BLOG v1.0 F-BLOG 傅唯一'BLOG http://www.fblog.net.cnimages/logos.gif http://www.fblog.net.cn F-BLOG 傅唯一'BLOG http://www.fblog.net.cn/readblog.asp?id=262 <![CDATA[跟随鼠标的提示框]]> unique627[at]gmail.com(傅唯一) 2009-3-12 http://www.fblog.net.cn/readblog.asp?id=262 这是从GOOGLE快照上找回来的一篇日志

主要就是用了一个隐藏层，当触发onmouseover事件后就调用显示该层，然后将提供的内容写入该层，也就显示了出来，跟着全是onmousemove事件，继续执行显示，当然该层的坐标随着鼠标的坐标而改变。

那这里就有一个问题，如果鼠标的坐标+层的宽度超过了浏览器的宽度的时候怎么办呢？如果不处理，该层会被缩小，直到不能再小的时候，就会出现横向滚动条，高度同理，所以在这里我们要处理一下，判断是否超出了宽度或高度，如果超出，就将层的坐标向左和上移，这样就可以了。[zy]

代码：

JavaScript代码
  1. function&nbsp;$(id){&nbsp;&nbsp;&nbsp;&nbsp;
  2. &nbsp;&nbsp;&nbsp;return&nbsp;document.getElementById(id);&nbsp;&nbsp;&nbsp;&nbsp;
  3. }&nbsp;&nbsp;&nbsp;&nbsp;
  4. function&nbsp;mousePos(e){&nbsp;&nbsp;&nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;var&nbsp;e=e||window.event;&nbsp;&nbsp;&nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;var&nbsp;x=e.clientX;&nbsp;&nbsp;&nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;var&nbsp;y=e.clientY;&nbsp;&nbsp;&nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).style.display=&quot;block&quot;;&nbsp;&nbsp;&nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;if(x+$(&quot;tps&quot;).offsetWidth&gt;document.body.scrollWidth){&nbsp;&nbsp;&nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).style.left=x-$(&quot;tps&quot;).offsetWidth+&quot;px&quot;;&nbsp;&nbsp;&nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;&nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).style.left=x+10+&quot;Px&quot;;&nbsp;&nbsp;&nbsp;&nbsp;
  13. &nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;
  14. &nbsp;&nbsp;&nbsp;if(y+$(&quot;tps&quot;).offsetHeight&gt;document.body.scrollHeight){&nbsp;&nbsp;&nbsp;&nbsp;
  15. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).style.top=x-$(&quot;tps&quot;).offsetHeight+&quot;px&quot;;&nbsp;&nbsp;&nbsp;&nbsp;
  16. &nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;&nbsp;&nbsp;
  17. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).style.top=y+10+&quot;px&quot;;&nbsp;&nbsp;&nbsp;&nbsp;
  18. &nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;
  19. }&nbsp;&nbsp;&nbsp;&nbsp;
  20. function&nbsp;mouseOn(obj,x){&nbsp;&nbsp;&nbsp;&nbsp;
  21. &nbsp;&nbsp;&nbsp;obj.onmousemove=function(e){&nbsp;&nbsp;&nbsp;&nbsp;
  22. &nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).innerHTML=obj.getAttribute(x);&nbsp;&nbsp;&nbsp;&nbsp;
  23. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mousePos(e);&nbsp;&nbsp;&nbsp;&nbsp;
  24. &nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;
  25. &nbsp;&nbsp;&nbsp;obj.onmouseout=function(){&nbsp;&nbsp;&nbsp;&nbsp;
  26. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;tps&quot;).style.display=&quot;none&quot;;&nbsp;&nbsp;&nbsp;&nbsp;
  27. &nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;
  28. }&nbsp;&nbsp;

XML/HTML代码
  1. &lt;div&gt;&lt;img&nbsp;src=&quot;1.jpg&quot;&nbsp;tips=&quot;我可爱的骑士&quot;&nbsp;alt=&quot;&quot;&nbsp;onmouseover=&quot;mouseOn(this,'tips')&quot;/&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  2. &lt;div&gt;&lt;p&gt;&lt;a&nbsp;href=&quot;#&quot;&nbsp;onmouseover=&quot;mouseOn(this,'s')&quot;&nbsp;tips=&quot;(*^&amp;*%&amp;$&amp;*&amp;^*&quot;&nbsp;s=&quot;HELLO&quot;&gt;F-BLOG&lt;/a&gt;&nbsp;&lt;a&nbsp;href=&quot;#&quot;&nbsp;onmouseover=&quot;mouseOn(this,'t')&quot;&nbsp;t=&quot;Come&nbsp;on!&quot;&gt;我的未来不是梦&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  3. &lt;div&nbsp;id=&quot;tps&quot;&nbsp;style=&quot;position:absolute;left:0px;top:0px;display:none;background-color:#ccc;padding:3px;border:2px&nbsp;solid&nbsp;#e7e7e7;&quot;&gt;&lt;/div&gt;&nbsp;&nbsp;

js代码一共有3个函数，第一个不用说是用来返回对象的，第二个mousePos是用来让隐藏层跟随鼠标显示的，mouseOn则是用来解发的，mouseOn中有两个参数，第一个obj是触发对象，第二个x，是用来指定要提出的显示内容，例如下面的HTML代码，三个要提示的内容都是不一样的，第一个是tips，第二个是s，第三个是t，这都是通过这个x来指定的，我感觉这样可以灵活一点。

x+$(&quot;tps&quot;).offsetWidth&gt;document.body.scrollWidth就是用来判断，鼠标所在坐标的横坐标+提示框的宽度是否超过了浏览器的宽度，如果是$(&quot;tps&quot;).style.left=x-$(&quot;tps&quot;).offsetWidth+&quot;px&quot;;提示框的左位置就用鼠标的左位置减去它本身的宽度，如果不是$(&quot;tps&quot;).style.left=x+10+&quot;Px&quot;;提示框的左位置就等于鼠标的左位置+10PX，高度同理。是不是很简单。

PS：我这里有个问题，当鼠标移到目标上时，如果这时正好超出范围，提示框会正确的在左边显示，但如果一开始在右边显示的，在我们移动鼠标的过程中，超过了范围，它却不会自己跳到左边来，但如果移动速度够快，它又会自己跳过来，这里我不知道应该怎么去处理。查资料也不好查，郁闷了。

]]> http://www.fblog.net.cn/readblog.asp?id=261 <![CDATA[CakePHP调用FCKeditor]]> unique627[at]gmail.com(傅唯一) 2009-3-9 http://www.fblog.net.cn/readblog.asp?id=261 1、把fckeditor文件夹放到app/webroot/js里面

2、把fckeditor.php, fckeditor_php4.php, fckeditor_php5.php 复制到app/vendors下面

3、添加文件/app/views/helpers/fck.php，代码如下：

PHP代码
  1. App::import('Vendor','fckeditor'); &nbsp;&nbsp;
  2. class&nbsp;FckHelper&nbsp;extends&nbsp;AppHelper{ &nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;fckeditor($namepair,$content){ &nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$editor_name='data'; &nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;foreach&nbsp;($namepair&nbsp;as&nbsp;$name){ &nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$editor_name.=&quot;[&quot;.$name.&quot;]&quot;; &nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$oFCKeditor=new&nbsp;FCKeditor($editor_name); &nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$oFCKeditor-&gt;BasePath=/js/editor/'; &nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$oFCKeditor-&gt;Value=$content; &nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$oFCKeditor-&gt;Create(); &nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  13. }&nbsp;&nbsp;

注意$oFCKeditor-&gt;BasePath=/js/editor/';这句，如果你是放在一个二级目录里面，不要要忘了把你的文件夹名字加进去，例如我访问的地址为：http://localhost/cakephp/，那这句就要这么写：$oFCKeditor-&gt;BasePath='/cakephp/js/editor/';

4、在appcontroller添加FCK助手。

PHP代码
  1. var&nbsp;$helpers=array('Fck');&nbsp;&nbsp;

5、在视图中这样调用：

PHP代码
  1. echo&nbsp;$fck-&gt;fckeditor(array('Model','filed'),'');&nbsp;&nbsp;
]]> http://www.fblog.net.cn/readblog.asp?id=260 <![CDATA[Jquery和Prototype共存的解决方法]]> unique627[at]gmail.com(傅唯一) 2009-3-5 http://www.fblog.net.cn/readblog.asp?id=260 项目用的是cakephp，它的ajax用的是prototype，所以必须要加载，而我有几个功能实现要用Jquery，于是就出现了Jquery和Prototype共存的问题，Prototype我没用过，如果想用它来实现这几个功能，我怕又要学半天，时间有限啊。

于是上网搜了一下，解决了两个X共存的问题，方法如下：

1、将jquery.js放到prototype.js前面（这个是必须的!）。
2、在jquery.js后面将$变量重命名。
方法如下：

&lt;script type=&quot;text/javascript&quot;&nbsp; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var jQuery=$;
&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot; type=&quot;text/javascript&quot; src=&quot;prototype.js&quot;&gt;&lt;/script&gt;

3、将原来使用的$方法名一律替换为jQuery名，如$(&quot;obj&quot;)替换为jQuery(&quot;obj&quot;)。

原文地址：http://www.blogjava.net/beansoft/archive/2008/07/03/212407.html

]]> http://www.fblog.net.cn/readblog.asp?id=259 <![CDATA[CakePHP1.2通过添加组件实现验证码功能]]> unique627[at]gmail.com(傅唯一) 2009-2-27 http://www.fblog.net.cn/readblog.asp?id=259 昨天利用Kcaptcha在CakePHP中实现了验证码功能，但发现Kcaptcha验证码特大了，虽然可以调整大小，但会经常出现看不到的情况，而且在IE下很不清晰，在目前项目上用肯定会被KO掉。看了一下它在CakePHP的调用过程，其实就是向CakePHP添加了一个组件，于是我就想把自己的验证码程序也添加进去。SO 开始：

1、第一步和Kcaptcha有很大区别，因为不用下载。在/app/vendors目录下建立一个vcode目录

2、在vcode目录下建立vcode.php文件，内容为你生成验证码的程序段，当然可能需要修改一下，反正我这里是按照Kcaptcha的方式写的。内容如下：

PHP代码
  1. class&nbsp;VCODE{ &nbsp;&nbsp;
  2. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;VCODE(){ &nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ob_start(); &nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$width=65; &nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$height=20; &nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$sourcestrings=&quot;0123456789aqwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM&quot;; &nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$image=imagecreate($width,$height); &nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$colorarrs=array( &nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagecolorallocate($image,255,255,255),//white &nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagecolorallocate($image,0&nbsp;&nbsp;,0&nbsp;&nbsp;,&nbsp;&nbsp;0)//black &nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unset($this-&gt;sessionval); &nbsp;&nbsp;
  13. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagesetthickness($image,3); &nbsp;&nbsp;
  14. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//随机得到字符串个数 &nbsp;&nbsp;
  15. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$strsize=rand(3,5); &nbsp;&nbsp;
  16. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagefill($image,0,0,$colorarrs[0]); &nbsp;&nbsp;
  17. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//一个个的写字符串到图片 &nbsp;&nbsp;
  18. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for($i=0;$i&lt;$strsize;$i++){ &nbsp;&nbsp;
  19. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$i_temp=rand(1,62); &nbsp;&nbsp;
  20. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;sessionval&nbsp;.=$sourcestrings[$i_temp]; &nbsp;&nbsp;
  21. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$fontcolor=imagecolorallocate($image,rand(0,155),rand(0,155),rand(0,155)); &nbsp;&nbsp;
  22. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$y_i&nbsp;=&nbsp;$height/2&nbsp;+&nbsp;$font_size&nbsp;/3&nbsp;; &nbsp;&nbsp;
  23. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagechar($image,5,&nbsp;1+&nbsp;$i&nbsp;*&nbsp;$width&nbsp;/$strsize,5,$sourcestrings[$i_temp],$fontcolor); &nbsp;&nbsp;
  24. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  25. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//写入session,以后验证用 &nbsp;&nbsp;
  26. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//unset($_SESSION['vCode']); &nbsp;&nbsp;
  27. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//$_SESSION['vCode']&nbsp;=&nbsp;$sessionval; &nbsp;&nbsp;
  28. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//添加杂点 &nbsp;&nbsp;
  29. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for($i=0;$i&lt;$width&nbsp;/$height&nbsp;*2;$i++) &nbsp;&nbsp;
  30. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;$i_x=rand(0,$width); &nbsp;&nbsp;
  31. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$i_y=rand(0,$height); &nbsp;&nbsp;
  32. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$pixelcolor=imagecolorallocate($image,rand(0,255),rand(0,255),rand(0,255)); &nbsp;&nbsp;
  33. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagesetpixel($image,$i_x,$i_y,$pixelcolor); &nbsp;&nbsp;
  34. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  35. &nbsp;&nbsp;
  36. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ob_clean(); &nbsp;&nbsp;
  37. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header('content-type:image/png'); &nbsp;&nbsp;
  38. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagepng($image); &nbsp;&nbsp;
  39. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imagedestroy($image); &nbsp;&nbsp;
  40. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  41. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getKeyString(){ &nbsp;&nbsp;
  42. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$this-&gt;sessionval; &nbsp;&nbsp;
  43. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  44. }&nbsp;&nbsp;

3、在/app/controllers/components目录下建立Vcode.php文件，内容如下： [zy]

PHP代码
  1. class&nbsp;VcodeComponent&nbsp;extends&nbsp;Object{ &nbsp;&nbsp;
  2. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;startup($controller){ &nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;controller=$controller; &nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  5. &nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;render(){ &nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;App::import('Vendor','vcode/vcode'); &nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$vcode=new&nbsp;VCODE(); &nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;controller-&gt;Session-&gt;write('vcode',$vcode-&gt;getKeyString()); &nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  11. }&nbsp;&nbsp;

4、在你想在调用的controllers中加入，如indexController

PHP代码
  1. var&nbsp;$components=array('Session','Vcode');&nbsp;&nbsp;

5、再在这个controllers中加入一个调用方法：

PHP代码
  1. function&nbsp;vcode(){ &nbsp;&nbsp;
  2. &nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;Vcode-&gt;render(); &nbsp;&nbsp;
  3. }&nbsp;&nbsp;

好了，准备工作就完成了，下面就是在view里用了。

6、在你要调用的view里写上：

XML/HTML代码
  1. &lt;img&nbsp;src=&quot;&lt;?php&nbsp;echo&nbsp;$html-&gt;url('/index/vcode');?&gt;&quot;&nbsp;style=&quot;cursor:pointer;&quot;&nbsp;onclick=&quot;document.getElementById('vcode').src='&lt;?php&nbsp;echo&nbsp;$html-&gt;url('/index/vcode');?&gt;?'+Math.random();&quot;&nbsp;id=&quot;vcode&quot;&nbsp;/&gt;&nbsp;&nbsp;

刷新一下页面看看，OK了！！

]]> http://www.fblog.net.cn/readblog.asp?id=258 <![CDATA[cakephp1.2使用kcaptcha制作验证码]]> unique627[at]gmail.com(傅唯一) 2009-2-26 http://www.fblog.net.cn/readblog.asp?id=258 前提：kcaptcha需要在PHP v. 4.0.6或以上版本，还需要有GD库支持

1、从http://captcha.ru/en/kcaptcha/下载kcapcha，解压后放到/app/vendors目录下

2、在/app/controllers/components下建立文件captcha.php。内容如下：

PHP代码
  1. class&nbsp;CaptchaComponent&nbsp;extends&nbsp;Object &nbsp;&nbsp;
  2. { &nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;startup(&amp;$controller) &nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;controller&nbsp;=&nbsp;$controller; &nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  7. &nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;render() &nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;{&nbsp; &nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;App::import('Vendor','kcaptcha/kcaptcha'); &nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$kcaptcha&nbsp;=&nbsp;new&nbsp;KCAPTCHA(); &nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;controller-&gt;Session-&gt;write('captcha',$kcaptcha-&gt;getKeyString()); &nbsp;&nbsp;
  13. &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  14. }&nbsp;&nbsp;

3、在你要用的controller中加入：[zy]

PHP代码
  1. var&nbsp;$components&nbsp;=&nbsp;array&nbsp;(&quot;Captcha&quot;);&nbsp;&nbsp;

4、并建一个方法输出图片:

PHP代码
  1. function&nbsp;captcha() &nbsp;&nbsp;
  2. { &nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;$this-&gt;Captcha-&gt;render(); &nbsp;&nbsp;
  4. }&nbsp;&nbsp;

5、在view中显示图片:

XML/HTML代码
  1. &lt;img&nbsp;src=&quot;&lt;?php&nbsp;echo&nbsp;$html-&gt;url('/yourcontroller/captcha');?&gt;&quot;&nbsp;style=&quot;width:100px;height:40px;cursor:pointer;&quot;&nbsp;onclick=&quot;document.getElementById('vcode').src='&lt;?php&nbsp;echo&nbsp;$html-&gt;url('/yourcontroller/captcha');?&gt;?'+Math.random();&quot;&nbsp;id=&quot;vcode&quot;&nbsp;/&gt;&nbsp;&nbsp;

6、验证：

用$this-&gt;Session-&gt;read('captcha');可以读取到验证码的值，怎么验证就不用说了。

]]> http://www.fblog.net.cn/readblog.asp?id=257 <![CDATA[DIV卷帘效果]]> unique627[at]gmail.com(傅唯一) 2009-2-25 http://www.fblog.net.cn/readblog.asp?id=257 无聊，写了一个简单的DIV卷帘效果，并小打理了一下

测试：点我展开/关闭

1、对海量数据分析、挖掘有浓厚兴趣，沉稳厚重

2、熟悉PHP、JavaScript、HTML设计开发

3、了解HTTP协议，对程序性能优化有一定经验

4、精通MySQL数据库，能熟练地运用SQL语言

将就了一下前面滚动的方法，再加上上次那个图片轮转的一点缓冲效果，就整成这样了。

示例：http://www.fblog.net.cn/codeshow/divscroll/

代码很简单就不做解释了，就说下当div在展开和合拢的过程，为了不让它乱套，继续点击div是没有效果的，只有当它停止后，点击才会生效。在这个地方我用了一个变量b来控制，程序中的控制条件有两一个，if(a==0&amp;&amp;b==0)和if(a==1&amp;&amp;b==0)，a==0和a==1分别代表了合拢状态和展开状态，而b==0和b==1则代表了停止的状态和动画的状态，所以默认下b是等于0的，当点击div后，置b==1那前面两个if条件都不会成立了，当动画停止，也就是clearInterval后，又置b==0，那两个if条件又成立了，这样就防止了不停的点击div造成的不良情况。

代码如下：[zy]

XML/HTML代码
  1. &lt;!DOCTYPE&nbsp;HTML&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;HTML&nbsp;4.01&nbsp;Transitional//EN&quot;&gt;&nbsp;&nbsp;
  2. &lt;html&gt;&nbsp;&nbsp;
  3. &nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;DIV卷帘效果示例-F-BLOG&lt;/title&gt;&nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;http-equiv=&quot;Content-Type&quot;&nbsp;content=&quot;text/html;&nbsp;charset=UTF-8&quot;&gt;&nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;&lt;style&nbsp;type=&quot;text/css&quot;&gt;&nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#box{overflow:hidden;height:25px;border:1px&nbsp;solid&nbsp;#666;width:300px;background-color:#ccc;}&nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p{padding:0px;margin:0px;line-height:25px;}&nbsp;&nbsp;
  9. &nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#demo2{overflow:hidden;height:30px;border:1px&nbsp;solid&nbsp;#666;width:400px;background-color:#ff0000;}&nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h4{padding:0px;margin:0px;height:30px;line-height:30px;}&nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;&nbsp;&nbsp;
  13. &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;&nbsp;&nbsp;
  14. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;reBox(Fid,defaultHeight,speed){&nbsp;&nbsp;
  15. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bheight=defaultHeight;&nbsp;&nbsp;
  16. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;doScroll;&nbsp;&nbsp;
  17. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;a=0,b=0;&nbsp;&nbsp;
  18. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$=function(id){&nbsp;&nbsp;
  19. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;document.getElementById(id);&nbsp;&nbsp;
  20. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  21. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;createBox=&quot;&lt;div&nbsp;id='&quot;+Fid+&quot;cbox'&gt;&quot;+$(Fid).innerHTML+&quot;&lt;/div&gt;&quot;;&nbsp;&nbsp;
  22. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(Fid).innerHTML=createBox;&nbsp;&nbsp;
  23. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(Fid).onclick=function(){&nbsp;&nbsp;
  24. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(a==0&amp;&amp;b==0){&nbsp;&nbsp;
  25. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b=1;&nbsp;&nbsp;
  26. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doScroll=setInterval(function(){&nbsp;&nbsp;
  27. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(bheight&lt;$(&quot;&quot;+Fid+&quot;cbox&quot;).offsetHeight){&nbsp;&nbsp;
  28. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dist=Math.ceil(($(&quot;&quot;+Fid+&quot;cbox&quot;).offsetHeight-bheight)/10);&nbsp;&nbsp;
  29. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bheightbheight=bheight+dist;&nbsp;&nbsp;
  30. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(Fid).style.height=bheight+&quot;px&quot;;&nbsp;&nbsp;
  31. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;
  32. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(doScroll);&nbsp;&nbsp;
  33. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a=1;&nbsp;&nbsp;
  34. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b=0;&nbsp;&nbsp;
  35. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  36. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},speed);&nbsp;&nbsp;
  37. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  38. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(a==1&amp;&amp;b==0){&nbsp;&nbsp;
  39. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b=1;&nbsp;&nbsp;
  40. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doScroll=setInterval(function(){&nbsp;&nbsp;
  41. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(bheight&gt;defaultHeight){&nbsp;&nbsp;
  42. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dist=Math.ceil((bheight-defaultHeight)/10);&nbsp;&nbsp;
  43. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bheightbheight=bheight-dist;&nbsp;&nbsp;
  44. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(Fid).style.height=bheight+&quot;px&quot;;&nbsp;&nbsp;
  45. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{&nbsp;&nbsp;
  46. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(doScroll);&nbsp;&nbsp;
  47. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a=0;&nbsp;&nbsp;
  48. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b=0;&nbsp;&nbsp;
  49. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  50. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},speed);&nbsp;&nbsp;
  51. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  52. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  53. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  54. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload=function(){&nbsp;&nbsp;
  55. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reBox(&quot;box&quot;,25,30);&nbsp;&nbsp;
  56. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reBox(&quot;demo2&quot;,30,10);&nbsp;&nbsp;
  57. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
  58. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp;&nbsp;
  59. &nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp;
  60. &nbsp;&nbsp;&lt;body&gt;&nbsp;&nbsp;
  61. &nbsp;&nbsp;&nbsp;&nbsp;&lt;P&gt;纵向，目标div：box，默认高度：25px，速度：30毫秒，调用：reBox(&quot;box&quot;,25,30)&lt;/P&gt;&nbsp;&nbsp;
  62. &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;box&quot;&gt;&nbsp;&nbsp;
  63. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;高级Web程序员&lt;/p&gt;&nbsp;&nbsp;
  64. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;1、了解HTTP协议，对Web程序性能优化有一定经验&lt;/p&gt;&nbsp;&nbsp;
  65. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;2、精通MySQL数据库，能熟练地运用SQL语言，有丰富的数据建模经验，&nbsp;熟悉SQL语句调优和数据库调优&lt;/p&gt;&nbsp;&nbsp;
  66. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;3、熟练使用至少一种版本(CVS,SVN)控制工具&lt;/p&gt;&nbsp;&nbsp;
  67. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;4、熟悉PHP语言及常见扩展（如mysql、pcre、xml等）&lt;/p&gt;&nbsp;&nbsp;
  68. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;5、熟悉面向对象(OO)程序设计&lt;/p&gt;&nbsp;&nbsp;
  69. &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;
  70. &nbsp;&nbsp;&nbsp;&nbsp;&lt;P&gt;纵向，目标div：demo2，默认高度：30px，速度：10毫秒，调用：reBox(&quot;demo&quot;,30,10)&lt;/P&gt;&nbsp;&nbsp;
  71. &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;demo2&quot;&gt;&nbsp;&nbsp;
  72. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;数据挖掘工程师&lt;/h4&gt;&nbsp;&nbsp;
  73. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;1、对海量数据分析、挖掘有浓厚兴趣，沉稳厚重&lt;/p&gt;&nbsp;&nbsp;
  74. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;2、熟悉PHP、JavaScript、HTML设计开发&lt;/p&gt;&nbsp;&nbsp;
  75. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;3、了解HTTP协议，对程序性能优化有一定经验&lt;/p&gt;&nbsp;&nbsp;
  76. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;4、精通MySQL数据库，能熟练地运用SQL语言&lt;/p&gt;&nbsp;&nbsp;
  77. &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;
  78. &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;PS:从效果看，速度为10毫秒比较好&lt;/p&gt;&nbsp;&nbsp;
  79. &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;By：傅唯一&nbsp;2009-1-26&lt;/p&gt;&nbsp;&nbsp;
  80. &nbsp;&nbsp;&lt;/body&gt;&nbsp;&nbsp;
  81. &lt;/html&gt;&nbsp;&nbsp;
]]> http://www.fblog.net.cn/readblog.asp?id=256 <![CDATA[无缝滚动原理及一个简单的封装]]> unique627[at]gmail.com(傅唯一) 2009-2-25 http://www.fblog.net.cn/readblog.asp?id=256 无缝滚动的代码网上一搜一大堆，但基本上都是只给了一堆代码，没有说明一下它的原理和实现的思路，这里就先简单的说下。

对了先看看示例，其实看得都很多了，不过美女还是可以看看的：

http://www.fblog.net.cn/codeshow/scroll/

滚动主要用到的是offsetWidth,offsetHeight,scrollLeft,scrollTop，根据字面意思就很好理解，向左、向右滚用到的肯定是offsetWidth和scrollLeft，向上、向下滚自然用的是offsetHeight和scrollTop。至于它们的意思，可以查下手册，或在网上搜一下就明白了。

为了好讲，这里就以左滚动为例。左滚动其实就是利用对包含要滚动对象的大容器的scrollLeft的控制来实现，在普通情况下，我们利用JS不断的增加大容器的scrollLeft，那需要滚动的对象就动了起来，但是这样，滚动对象始终会到头，也就是滚动完或者叫滚出了范围，那就不是无缝了。如何做到无缝，一般的做法是复制一次要滚动的对象让它和滚动对象相邻的排在一起，然后控制大容器的scrollLeft让它们一起滚动起来，当滚动到第一个滚动对象的边界的时候，让scollLeft归零，也就是让滚动对象跳回到初始位置，由于滚动对象和复制的对象一模一样，所以跳的那一瞬间是看不出来的，接着它继续滚动，这样就实现了无缝滚动。

说起来有点不清楚，边看代码边说就清楚了。[zy]

首先要准备一个大容器，也就是包含滚动对象的大家伙

&lt;div id=&quot;demo&quot; style=&quot;overflow:hidden;width:300px;height:100px;&quot;&gt;&lt;/div&gt;

它的宽高都固定了，再用overflow:hidden把多余的内容都隐藏掉，不然哪有滚动的必要呢。

接下来就是滚动的内容了，最终的HTML代码如下：
XML/HTML代码
  1. &lt;div&nbsp;id=&quot;demo&quot;&nbsp;style=&quot;overflow:hidden;width:300px;height:100px;&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  2. &nbsp;&nbsp;&nbsp;&nbsp;&lt;table&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&nbsp;id=&quot;abox&quot;&gt;&nbsp;&nbsp;//这里就是要滚动的内容&nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;me.jpg&quot;&nbsp;style=&quot;width:200px;height:100px;&quot;&nbsp;alt=&quot;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;mm.jpg&quot;&nbsp;style=&quot;width:200px;height:100px;&quot;&nbsp;alt=&quot;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&nbsp;id=&quot;bbox&quot;&gt;&lt;/td&gt;&nbsp;&nbsp;//这里就是用来复制abox里面的内容的&nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;&lt;/table&gt;&nbsp;&nbsp;&nbsp;&nbsp;
  13. &lt;/div&gt;&nbsp;&nbsp;&nbsp;

复制abox里的内容到bbox里，用document.getElementById(&quot;bbox&quot;).innerHTML=document.getElementById(&quot;abox&quot;).innerHTML就可以了。

要让图片排成一排不要忘了让li向左浮动起来，定义一下css就行了，如：
ul{list-style:none;padding:0px;margin:0px;}
li{float:left;}

下面就是让它动起来了，利用setInterval来不断的执行程序，让demo的scrollLeft不断的增加，abox和bbox里的内容就滚动了起来，再做个判断，当demo.scrollLeft==abox.offsetWidth的时候，让demo.scrollLeft=0，也就是让滚动对象回到初始位置。代码如下：

JavaScript代码
  1. function&nbsp;Marquee(){&nbsp;&nbsp;&nbsp;&nbsp;
  2. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;demo=document.getElementById(&quot;demo&quot;);&nbsp;&nbsp;&nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;abox=document.getElementById(&quot;abox&quot;);&nbsp;&nbsp;&nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bbox=document.getElementById(&quot;bbox&quot;);&nbsp;&nbsp;&nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;bbox.innerHTML=abox.innerHTML;//先复制对象到bbox里&nbsp;&nbsp;&nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;if(demo.scrollLeft==abox.offsetWidth)&nbsp;demo.scrollLeft=0;//判断abox是否滚动到头，如果是，将demo.scrollLeft置为0,让它回到初始位置&nbsp;&nbsp;&nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;demo.scrollLeft++;//不断增加它的值，达到滚动的目的&nbsp;&nbsp;&nbsp;&nbsp;
  8. }&nbsp;&nbsp;&nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;
  10. var&nbsp;doScroll=setInterval(Marquee,30);//执行setInterval，让它每30毫秒执行一次Marquee函数，也就是让它动起来&nbsp;&nbsp;
简单吧，再加上鼠标的onMouseOver和onMouseOut就更好了：
JavaScript代码
  1. demo.onmouseover=function(){clearInterval(doScroll)};//清除setInterval，让滚动停下来。&nbsp;&nbsp;&nbsp;&nbsp;
  2. demo.onmouseout=function(){Marquee()};//让滚动继续。&nbsp;&nbsp;&nbsp;

但是这样程序的局限性很多，第一，demo,abox,bbox都是指定的，如果想改一下，有点小麻烦，在网上看到一个比较好的办法，就是用js给一个变量附值为&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt; /td&gt;&lt;/tr&gt;&lt;/table&gt;，并将对象复制到两个TD里，如:var scrollBox_x=&quot;&lt;table&gt;&lt;tr&gt;&lt;td id='abox'&gt;&quot;+demo.innerHTML+&quot;&lt;/td&gt;&lt;td id='bbox'&gt;&quot;+demo.innerHTML+&quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;;然后再将demo的内容替换为scrollBox_x的值，如：demo.innerHTML=scrollBox_x;这样就实现了上面的页面结构，而且我们可以控制到abox和bbox。其实不好讲，下面是简单封装的程序：

XML/HTML代码
  1. &lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&nbsp;&nbsp;
  2. &lt;html&nbsp;xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&nbsp;lang=&quot;utf-8&quot;&gt;&nbsp;&nbsp;
  3. &nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;&nbsp;&nbsp;
  4. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;http-equiv=&quot;Content-Type&quot;&nbsp;content=&quot;text/html;&nbsp;charset=utf-8&quot;&nbsp;/&gt;&nbsp;&nbsp;
  5. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;无缝滚动图片示例-F-BLOG&lt;/title&gt;&nbsp;&nbsp;
  6. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&nbsp;type=&quot;text/css&quot;&gt;&nbsp;&nbsp;
  7. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ul{list-style:none;padding:0px;margin:0px;} &nbsp;&nbsp;
  8. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#demo1&nbsp;ul,#demo2&nbsp;ul{width:400px;} &nbsp;&nbsp;
  9. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#demo1&nbsp;li,#demo2&nbsp;li{float:left;} &nbsp;&nbsp;
  10. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;&nbsp;&nbsp;
  11. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;&nbsp;&nbsp;
  12. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;$(id){ &nbsp;&nbsp;
  13. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;document.getElementById(id); &nbsp;&nbsp;
  14. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  15. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;Marquee(id,toFollow,speed) &nbsp;&nbsp;
  16. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;
  17. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;doScroll; &nbsp;&nbsp;
  18. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;scrollBox_x=&quot;&lt;table&nbsp;cellpadding='0'&nbsp;cellspacing='0'&gt;&lt;tr&gt;&lt;td&nbsp;id='&quot;+id+&quot;abox'&gt;&quot;+$(id).innerHTML+&quot;&lt;/td&gt;&lt;td&nbsp;id='&quot;+id+&quot;bbox'&gt;&quot;+$(id).innerHTML+&quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;; &nbsp;&nbsp;
  19. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;scrollBox_y=&quot;&lt;table&nbsp;cellpadding='0'&nbsp;cellspacing='0'&gt;&lt;tr&gt;&lt;td&nbsp;id='&quot;+id+&quot;abox'&gt;&quot;+$(id).innerHTML+&quot;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&nbsp;id='&quot;+id+&quot;bbox'&gt;&quot;+$(id).innerHTML+&quot;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;; &nbsp;&nbsp;
  20. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;begin=function(){ &nbsp;&nbsp;
  21. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(toFollow){ &nbsp;&nbsp;
  22. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;&quot;left&quot;: &nbsp;&nbsp;
  23. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).innerHTML=scrollBox_x; &nbsp;&nbsp;
  24. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doScroll=setInterval(function(){ &nbsp;&nbsp;
  25. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($(id).scrollLeft==$(id+&quot;abox&quot;).offsetWidth)&nbsp;$(id).scrollLeft=0; &nbsp;&nbsp;
  26. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).scrollLeft++; &nbsp;&nbsp;
  27. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},speed); &nbsp;&nbsp;
  28. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;
  29. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;&quot;right&quot;: &nbsp;&nbsp;
  30. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).innerHTML=scrollBox_x; &nbsp;&nbsp;
  31. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doScroll=setInterval(function(){ &nbsp;&nbsp;
  32. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($(id).scrollLeft&lt;=0)&nbsp;$(id).scrollLeft=$(id+&quot;bbox&quot;).offsetWidth; &nbsp;&nbsp;
  33. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).scrollLeft--; &nbsp;&nbsp;
  34. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},speed); &nbsp;&nbsp;
  35. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;
  36. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;&quot;top&quot;: &nbsp;&nbsp;
  37. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).innerHTML=scrollBox_y; &nbsp;&nbsp;
  38. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doScroll=setInterval(function(){ &nbsp;&nbsp;
  39. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($(id).scrollTop==$(id+&quot;abox&quot;).offsetHeight)&nbsp;$(id).scrollTop=0; &nbsp;&nbsp;
  40. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).scrollTop++; &nbsp;&nbsp;
  41. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},speed); &nbsp;&nbsp;
  42. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;
  43. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;&quot;bottom&quot;: &nbsp;&nbsp;
  44. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).innerHTML=scrollBox_y; &nbsp;&nbsp;
  45. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doScroll=setInterval(function(){ &nbsp;&nbsp;
  46. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($(id).scrollTop&lt;=0)&nbsp;$(id).scrollTop=$(id+&quot;bbox&quot;).offsetHeight; &nbsp;&nbsp;
  47. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).scrollTop--; &nbsp;&nbsp;
  48. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},speed); &nbsp;&nbsp;
  49. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;
  50. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  51. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  52. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;begin(); &nbsp;&nbsp;
  53. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).onmouseover=function()&nbsp;{clearInterval(doScroll);} &nbsp;&nbsp;
  54. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(id).onmouseout=function()&nbsp;{begin();} &nbsp;&nbsp;
  55. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  56. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload=function(){ &nbsp;&nbsp;
  57. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marquee(&quot;demo2&quot;,&quot;left&quot;,30); &nbsp;&nbsp;
  58. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marquee(&quot;demo1&quot;,&quot;right&quot;,20); &nbsp;&nbsp;
  59. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marquee(&quot;demo3&quot;,&quot;top&quot;,30); &nbsp;&nbsp;
  60. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marquee(&quot;demo4&quot;,&quot;bottom&quot;,30); &nbsp;&nbsp;
  61. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;
  62. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
  63. &lt;/script&gt;&nbsp;&nbsp;
  64. &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp;
  65. &lt;body&gt;&nbsp;&nbsp;
  66. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;demo1&quot;&nbsp;style=&quot;overflow:hidden;height:100px;width:300px;&quot;&gt;&nbsp;&nbsp;
  67. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;&nbsp;&nbsp;
  68. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;mm.jpg&quot;&nbsp;mce_src=&quot;mm.jpg&quot;&nbsp;style=&quot;height:100px;width:200px;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;
  69. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;me.jpg&quot;&nbsp;mce_src=&quot;me.jpg&quot;&nbsp;style=&quot;height:100px;width:200px;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;
  70. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;&nbsp;&nbsp;
  71. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;
  72. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;
  73. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;demo2&quot;&nbsp;style=&quot;overflow:hidden;height:100px;width:300px;&quot;&gt;&nbsp;&nbsp;
  74. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;&nbsp;&nbsp;
  75. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;mm.jpg&quot;&nbsp;mce_src=&quot;mm.jpg&quot;&nbsp;style=&quot;height:100px;width:200px;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;
  76. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;me.jpg&quot;&nbsp;mce_src=&quot;me.jpg&quot;&nbsp;style=&quot;height:100px;width:200px;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;
  77. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;&nbsp;&nbsp;
  78. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;
  79. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;
  80. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;demo3&quot;&nbsp;style=&quot;overflow:hidden;height:150px;width:200px;&quot;&gt;&nbsp;&nbsp;
  81. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;&nbsp;&nbsp;
  82. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;mm.jpg&quot;&nbsp;mce_src=&quot;mm.jpg&quot;&nbsp;style=&quot;height:100px;width:200px;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;
  83. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;img&nbsp;src=&quot;me.jpg&quot;&nbsp;mce_src=&quot;me.jpg&quot;&nbsp;style=&quot;height:100px;width:200px;&quot;&nbsp;/&gt;&lt;/li&gt;&nbsp;&nbsp;
  84. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;&nbsp;&nbsp;
  85. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;
  86. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br/&gt;&nbsp;&nbsp;
  87. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id=&quot;demo4&qu