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,里面什么参数说明都有