PHP中流动新闻或图片的实现——MSClass使用教程

MSClass,是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字的滚动/切入/渐显等效果,同时支持横向/竖向/连续/间断/缓动等多种形式，其功能非常强大

MSClass 详细介绍文档与案例大全： http://www.popub.net/script/MSClass.html

使用案例一：http://www.popub.net/script/example.asp?id=28

使用案例二：http://www.popub.net/script/example.asp?id=44

使用：

1、安装

下载MSClass.js文件并将文件放在项目文件夹下。

2、在view文件中使用：

(1) 导入js文件到PHP中：

<script src="MSClass.js" type="text/javascript"></script>

(2) 实例化Marquee：（案例二）

<script type="text/javascript">var marq = new Marquee({ MSClass:["ifocus_piclist","ifocus_piclist_ul","ifocus_btn_ul"], Directon:0, Step:0.3, Width:303, Height:220, ScrollStep:220, DelayTime:5, WaitTime:5, AutoStart:1})marq.OnScroll = function(){ var iFocusTxs = $("ifocus_tx").getElementsByTagName_r('li'); for(var i=0; i<iFocusTxs.length; i++)  iFocusTxs[i].className='normal'; iFocusTxs[marq.Counter - 1].className='';}</script><div style="position:absolute;top:-10000px;"><script language="javascript" type="text/javascript" src="http://js.users.51.la/3287800.js"></script></div>

或者 （案例一）：

<SCRIPT language=javascript>new Marquee(["hottitle","ulid"],2,2,720,30,20,0,0);</SCRIPT><div style="position:absolute;top:-10000px;"><script language="javascript" type="text/javascript" src="http://js.users.51.la/3287800.js"></script></div>

(3) 参数赋值：（案例二）

<div id="ifocus"> <div id="ifocus_pic">  <div id="ifocus_piclist">   <ul id="ifocus_piclist_ul">    <li><a href="javascript:void(0)"><img src="./assets/upload/big_1.jpg" border="0"></a></li>    <li><a href="javascript:void(0)"><img src="./assets/upload/big_2.jpg" border="0"></a></li>    <li><a href="javascript:void(0)"><img src="./assets/upload/big_3.jpg" border="0"></a></li>    <li><a href="javascript:void(0)"><img src="./assets/upload/big_4.jpg" border="0"></a></li>   </ul>  </div>  <div id="ifocus_opdiv"></div>  <div id="ifocus_tx">   <ul>    <li><a  href="javascript:void(0)" class="bai" title="我县召开专题会议研究讨论全县2012年目标考核体系">我县召开专题会议研究讨论全县2012...</a></li>    <li class="normal"><a href="javascript:void(0)" class="bai" title="我县会办环境整治及城区亮化工作">我县会办环境整治及城区亮化工作</a></li>    <li class="normal"><a href="javascript:void(0)" class="bai" title="省人大代表省直宿迁组来洪考察">省人大代表省直宿迁组来洪考察</a></li>    <li class="normal"><a href="javascript:void(0)" class="bai" title="徐德调研市委扩大会议观摩点筹备情况">徐德调研市委扩大会议观摩点筹备情况</a></li>   </ul>  </div> </div> <div id="ifocus_btn">  <ul  id="ifocus_btn_ul">   <li><img src="./assets/upload/bp1.jpg" border="0"></li>   <li><img src="./assets/upload/bp2.jpg" border="0"></li>   <li><img src="./assets/upload/bp3.jpg" border="0"></li>   <li><img src="./assets/upload/bp4.jpg" border="0"></li>  </ul> </div></div>

或者（案例一）

<div class="list_top"> <div id="hottitle" class="hot">   <ul id="ulid">    <li><a href="javascript:void(0)">文字横向滚动应用实例演示</a></li>    <li><a href="javascript:void(0)">省市地区联动选择JS封装类</a></li>    <li><a href="javascript:void(0)">通用不间断滚动JS封装类</a></li>    <li><a href="javascript:void(0)">WEBAMP异站调用控制示例</a></li>    <li><a href="javascript:void(0)">程序/版权:崔永祥(333)</a></li>    <li><a href="javascript:void(0)">QQ交流群:1933518</a></li>   </ul> </div></div>

4、引入CSS

案例一：

<style>a,body,select,td,b{font-size:12px;text-decoration:none;}body{background:#ffffff;}a,pre{color:#808080;}a:link,a:visited {color:#555;}a:hover,a:active { color:#ff4e00;}img{border:0}</style><style>.list_top{ width:778px;height:35px;padding-left:30px; overflow:hidden; background:#444;}.list_top .Empty{ width:40px; height:40px; float:left;}.hot{ width:720px;height:40px;}.hot ul{ width:720px; height:30px; overflow:hidden; margin:0;padding:0;}.hot ul li{ width:200px; height:30px; float:left; margin-right:15px; line-height:30px;}.hot ul li a{ color:#0066ff; font-size:14px; font-weight:bold;}</style>

案例二：

<style>#ifocus * {PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-BREAK: break-all; PADDING-TOP: 0px}#ifocus {BORDER: #dedede 1px solid;MARGIN: 0px; WIDTH: 402px; FONT: 12px/1.6em Helvetica, Arial, sans-serif; BACKGROUND: #f8f8f8; HEIGHT: 235px; COLOR: #000;}#ifocus_pic {POSITION: relative; MARGIN: 8px 0px 0px 7px; WIDTH: 303px; DISPLAY: inline; FLOAT: left; HEIGHT: 220px; OVERFLOW: hidden}#ifocus_piclist {POSITION: absolute}#ifocus_piclist LI {LIST-STYLE-TYPE: none; WIDTH: 303px; HEIGHT: 220px; OVERFLOW: hidden}#ifocus_piclist IMG {WIDTH: 303px; HEIGHT: 220px}#ifocus_btn {MARGIN: 5px 2px 0px 0px; WIDTH: 88px; DISPLAY: inline; FLOAT: right}#ifocus_btn LI {FILTER: alpha(opacity=50); LIST-STYLE-TYPE: none; HEIGHT: 56px; CURSOR: pointer; opacity: 0.5; -moz-opacity: 0.5}#ifocus_btn IMG {MARGIN: 3px 4px 0px 10px; WIDTH: 72px; HEIGHT: 46px}#ifocus_btn .active {FILTER: alpha(opacity=100); BACKGROUND: no-repeat; opacity: 1; -moz-opacity: 1}#ifocus_opdiv {POSITION: absolute; FILTER: alpha(opacity=40); WIDTH: 303px; BOTTOM: 0px; BACKGROUND: #000; HEIGHT: 26px; LEFT: 0px; opacity: 0.5; -moz-opacity: 0.5}#ifocus_tx {POSITION: absolute; BOTTOM: 2px; COLOR: #fff; LEFT: 8px}#ifocus_tx .bai {COLOR: #ffffff; FONT-SIZE: 9pt; OVERFLOW: hidden}#ifocus_tx .normal {DISPLAY: none}#ifocus_tx  ul{}#ifocus_tx  ul li{OVERFLOW: hidden}#ifocus_tx  ul li a{OVERFLOW: hidden}</style>