使用msclass.js插件来上下轮播中奖类信息

js插件:

msclass.js和jquery.js这些js都可以通过百度获取到,就不贴出获取方式了

先看一下效果图吧:


要求这里的信息是从下往上滚动的,这就用到了这个msclass.js插件

首先需要准备的html代码:

<div class="dynamic_list" id="Marquee">
            	<ul>
            		<li><span class="fr">刚刚</span>上海<em>张**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">11小时前</span>湖南省<em>欧阳**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">刚刚</span>上海<em>张**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">1小时前</span>湖南省<em>欧阳**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">刚刚</span>上海<em>张**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">1小时前</span>湖南省<em>欧阳**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">1小时前</span>湖南省<em>欧阳**同学</em>通过微信版完成志愿检测</li>
                    <li><span class="fr">1小时前</span>湖南省<em>欧阳**同学</em>通过微信版完成志愿检测</li>
            	</ul> 
            </div>

样式的话各位自己调整哈,最重要的是上面的id="Marquee",后面会用到;首先得有这么多条数据才会轮播,数据的长度不能小于轮播可视范围的高度,不然会无效,还有一点就是浏览器的的放大缩小页面功能的数值必须是100%,既是不放大也不缩小,这样才会没问题的轮播!注意事项就这么多。

接下来就是js代码啦:

/*页面查询记录滚动开始*/
				var Marquee1 = new Marquee("Marquee");
				Marquee1.Direction = "top";
				Marquee1.Step = 1;
				Marquee1.Width = 305;
				Marquee1.Height = 300;
				Marquee1.Timer = 50;
				Marquee1.DelayTime = 0;
				Marquee1.WaitTime = 500;
				Marquee1.ScrollStep = 48;
				Marquee1.Start();
				/*页面查询记录滚动结束*/

参数说明可以参考这个:http://img.jb51.net/online/jsgundong/test.htm,里面什么参数说明都有












猜你喜欢

转载自blog.csdn.net/zds12345sdfs/article/details/80785007
今日推荐