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>