浙江 杭州

jQuery仿新浪微博首页滚动留言板插件

系统分类: 网页特效 - jquery插件 - jQuery参数处理/Cookie 2015-06-29

人气42232

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款仿新浪微博首页的jQuery文字滚动留言板插件。这款留言板插件使用户发布的信息不断的滚动显示,并且无缝衔接,效果非常不错。

这款jQuery仿新浪微博首页滚动留言板插件代码非常简洁。

HTML结构

<div id="con">
    <div class="bottomcover" style="z-index:2;"></div>
    <ul>
        <li>
            <div class="div_left"><a href="http://www.htmleaf.com/"><img src="images/head.jpg" title="Jarvis_风"></a></div>
            <div class="div_right">
                <a href="http://www.htmleaf.com/" target="_blank">Jarvis_风</a>:...
                <div class="twit_item_time">3分钟前</div>
            </div>
        </li>
        ...
    </ul>
</div>
                

调用插件

首先要引入jQuery和jquery.pause.min.js文件。

$(function () {
    var scrtime;
    var $ul = $("#con ul");
    var liFirstHeight = $ul.find("li:first").height();//第一个li的高度
    $ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将第一个li隐藏在列表上方     因li的上下padding:10px所以要-20
    $("#con").hover(function () {
        $ul.pause();//暂停动画
        clearInterval(scrtime);
    }, function () {
        $ul.resume();//恢复播放动画   
        scrtime = setInterval(function scrolllist() {
            //动画形式展现第一个li
            $ul.animate({ top: 0 + "px" }, 1500, function () {
                //动画完成时
                $ul.find("li:last").prependTo($ul);//将ul的最后一个剪切li插入为ul的第一个li
                liFirstHeight = $ul.find("li:first").height();//刚插入的li的高度
                $ul.css({ top: "-" + liFirstHeight - 20 + "px" });//利用css的top属性将刚插入的li隐藏在列表上方  因li的上下padding:10px所以要-20                 
            });
        }, 3300);
    }).trigger("mouseleave");//通过trigger("mouseleave")函数来触发hover事件的第2个函数
});
               

查看演示
下载资源:43
下载资源
错误提交:

格式:zip 大小:44.66KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1041.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery仿新浪微博首页滚动留言板插件

我当前G币余额:0 已下载次数:43

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有10 评论)

1 2