• jQuery模拟百度新闻不间断滚动效果,支持文字、图片水平垂直滚动


    一、jQuery.roll 插件使用说明

    jQuery.roll 是模拟百度新闻不间断滚动效果,并支持文字、图片水平垂直滚动,该函数使用方法为:

    /*
     * @作者 华子yjh http://www.cnblogs.com/yangjunhua/
     * @source 博客园
     * @module jQuery roll
     * @param: contentCls 内容容器className
     * @param: contentParentId 内容容器父元素节点ID
     * @param: configs 配置参数
     * 
     * @config: effect 滚动效果
     * @config: duration 滚动1个像素的运行时间(毫秒数)
     * @config: delay 开始滚动的延迟时间(毫秒数)
     *
     */
    
    jQuery.roll(contentCls, contentParentId, configs); 

    二、函数源码

     1 jQuery.extend({
     2     roll: function(contentCls, contentParentId, configs){
     3 
     4         var setTimeID, totalWidth = 0, totalHeight = 0,
     5             firstContent, secondContent, contents;
     6 
     7         (function(){
     8             var singleContent, cloneContent, nodeList;
     9 
    10             singleContent = $(contentCls, contentParentId);
    11             nodeList = singleContent.children();
    12 
    13             if (configs.effect === 'scrollX') {
    14                 $.each(nodeList, function(idx, itm) {
    15                     totalWidth += $(itm).outerWidth(true);
    16                 });
    17                 singleContent.css({ 'width': totalWidth + 'px' });
    18             }
    19             else if (configs.effect === 'scrollY') {
    20                 $.each(nodeList, function(idx, itm) {
    21                     totalHeight += $(itm).outerHeight(true);
    22                 });
    23                 singleContent.css({ 'height': totalHeight + 'px' });
    24             }
    25 
    26             cloneContent = singleContent.clone();
    27             cloneContent.appendTo(contentParentId);
    28 
    29             contents = $(contentCls, contentParentId);
    30             firstContent = contents[0];
    31             secondContent = contents[1];
    32             
    33             if (configs.effect === 'scrollX') {
    34                 $(firstContent).css({ 'left': 0 });
    35                 $(secondContent).css({ 'left': totalWidth + 'px' });
    36             }
    37             else if (configs.effect === 'scrollY') {
    38                 $(firstContent).css({ 'top': 0 });
    39                 $(secondContent).css({ 'top': totalHeight + 'px' });
    40             }
    41 
    42         })()
    43         
    44         function cssAnimate(){
    45             if (configs.effect === 'scrollX') {
    46                 $(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' });
    47                 $(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' });
    48             
    49                 $.each(contents, function(idx, itm) {
    50                     if (parseInt(itm.style.left,10) === -totalWidth) {
    51                         $(itm).css({ left: totalWidth + 'px' });
    52                     }
    53                 });
    54             }
    55             else if (configs.effect === 'scrollY') {
    56                 $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' });
    57                 $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' });
    58             
    59                 $.each(contents, function(idx, itm) {
    60                     if (parseInt(itm.style.top,10) === -totalHeight) {
    61                         $(itm).css({ top: totalHeight + 'px' });
    62                     }
    63                 });
    64             }
    65 
    66             setTimeId = setTimeout(cssAnimate, configs.duration);
    67         }
    68         
    69         function rollRun(){
    70             setTimeId = setTimeout(cssAnimate, configs.delay);
    71             return jQuery;
    72         }
    73         
    74         function rollStop(){
    75             clearTimeout(setTimeId);
    76             return jQuery;
    77         }
    78 
    79         return $.extend({
    80             rollRun: rollRun,
    81             rollStop: rollStop
    82         });
    83     }    
    84 });

    三、完整demo源码

    例3.1

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="description" content="jQuery实现无间隙滚动效果">
    <title>jQuery demo</title>
    <style>
    body { font: 12px/1.5 tahoma,"microsoft yahei","微软雅黑E\8F6F\96C5\9ED1"; }
    body, div, ul, li, h1 { margin: 0; padding: 0; }
    .news { margin: 100px 0 0 100px; }
    .news ul { list-style: none; }
    .news-box { width: 600px; margin-left: 20px; height: 24px; background-color: #fcfcfd; overflow: hidden; position: relative; _zoom: 1; }
    .news h1 {  margin-bottom: 15px; padding-left: 20px; color: #370188; }
    .news-list { position: absolute; }
    .news-list { float: left; }
    .news-list li { float: left; _display: inline; margin-right: 15px; height: 24px; line-height: 24px; overflow: hidden; word-wrap: normal; }
    .news-list li a { text-decoration: none; color: #000; }
    .news-list li a:hover {
        -webkit-transition: color .2s linear,background-color .3s linear;
        -moz-transition: color .2s linear,background-color .3s linear;
        -ms-transition: color .2s linear,background-color .3s linear;
        -o-transition: color .2s linear,background-color .3s linear;
        transition: color .2s linear,background-color .3s linear;
        color: #FF4400;
        text-decoration: underline;
    }
    .news-list li a:visited { color: #290065; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div id="J_news" class="news">
        <h1>文字列表滚动</h1>
        <div id="J_Roll_Container" class="news-box">
            <ul class="J_Roll_Content news-list">
                <li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机</a></li>
                <li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)</a></li>
                <li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战</a></li>
            </ul>    
        </div>
    </div>
    <script>
    // 这里引用jQuery.roll代码
    </script>
    <script>
    $(function(){
        var roll_jQuery, contents;
    
        roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollX', duration: 40, delay: 500 }).rollRun();
        contents = $('.J_Roll_Content');
    
        contents.bind('mouseenter', function(){
            roll_jQuery.rollStop();
        });
        contents.bind('mouseleave', function(){
            roll_jQuery.rollRun();
        });
    });
    </script>
    </body>
    </html>

    例3.2

    View Code
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="description" content="jQuery实现无间隙滚动效果">
    <title>jQuery demo</title>
    <style>
    body { font: 12px/1.5 tahoma, "microsoft yahei", "微软雅黑E\8F6F\96C5\9ED1"; }
    body, div, ul, li, h1 { margin: 0; padding: 0; }
    .news { margin: 100px 0 0 100px; }
    .news ul { list-style: none; }
    .news-box { padding: 20px; width: 310px; height: 192px; background-color: #fcfcfd; overflow: hidden; position: relative; }
    .news h1 { margin-bottom: 15px; padding-left: 20px; color: #370188; }
    .news-list { position: absolute; }
    .news-list li { width: 100%; height: 24px; line-height: 24px; overflow: hidden; word-wrap: normal; }
    .news-list li a { text-decoration: none; color: #000; }
    .news-list li a:hover {
        -webkit-transition: color .2s linear, background-color .3s linear;
        -moz-transition: color .2s linear, background-color .3s linear;
        -ms-transition: color .2s linear, background-color .3s linear;
        -o-transition: color .2s linear, background-color .3s linear;
        transition: color .2s linear, background-color .3s linear;
        color: #FF4400;
        text-decoration: underline;
    }
    .news-list li a:visited { color: #290065; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div id="J_news" class="news">
      <h1>文字列表滚动</h1>
      <div id="J_Roll_Container" class="news-box">
        <ul class="J_Roll_Content news-list">
          <li><a href="http://news.ifeng.com/world/detail_2013_01/11/21098447_0.shtml" target="_blank">在澳中国留学生涉嫌接送非法色情业者赚外快被罚</a></li>
          <li><a href="http://news.qq.com/a/20130111/000993.htm" target="_blank">印度北部等今冬遭遇极寒天气 已致数百人被冻死</a></li>
          <li><a href="http://news.qq.com/a/20130111/001251.htm" target="_blank">意大利警方禁止挂中国红灯笼 被指危险引燃物</a></li>
          <li><a href="http://news.sina.com.cn/c/2013-01-10/121926003955.shtml" target="_blank">日方否认将对中国巡航钓鱼岛飞机</a></li>
          <li><a href="http://news.hf365.com/system/2013/01/10/012875943.shtml" target="_blank">日本防卫省否认将对中国飞机警告射击(图)</a></li>
          <li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14338977.shtml" target="_blank">日否认警告射击中海监飞机 恐中日因夺岛开战</a></li>
          <li><a href="http://military.people.com.cn/n/2013/0110/c1011-20150261.html" target="_blank">传解放军举行长白山军演</a></li>
          <li><a href="http://news.21cn.com/world/guojisaomiao/2013/01/10/14335623.shtml" target="_blank">中国高新6号反潜机问世 反潜艇性能优于美军P-3C</a></li>
          <li><a href="http://opinion.huanqiu.com/opinion_world/2013-01/3467875.html" target="_blank">张建刚:2030年中国将圆海洋强国梦</a></li>
          <li><a href="http://news.hf365.com/system/2013/01/10/012873928.shtml" target="_blank">运-20现身试飞中心 可取代伊尔-76任何功能</a></li>
          <li><a href="http://mil.sohu.com/20130110/n362988784.shtml" target="_blank">东海舰队引入大批无人机 饱和攻击让日难以招架</a></li>
        </ul>
      </div>
    </div>
    <script>
    jQuery.extend({
        roll: function(contentCls, contentParentId, configs){
    
            var setTimeID, totalWidth = 0, totalHeight = 0,
                firstContent, secondContent, contents;
    
            (function(){
                var singleContent, cloneContent, nodeList;
    
                singleContent = $(contentCls, contentParentId);
                nodeList = singleContent.children();
    
                if (configs.effect === 'scrollX') {
                    $.each(nodeList, function(idx, itm) {
                        totalWidth += $(itm).outerWidth(true);
                    });
                    singleContent.css({ 'width': totalWidth + 'px' });
                }
                else if (configs.effect === 'scrollY') {
                    $.each(nodeList, function(idx, itm) {
                        totalHeight += $(itm).outerHeight(true);
                    });
                    singleContent.css({ 'height': totalHeight + 'px' });
                }
    
                cloneContent = singleContent.clone();
                cloneContent.appendTo(contentParentId);
    
                contents = $(contentCls, contentParentId);
                firstContent = contents[0];
                secondContent = contents[1];
                
                if (configs.effect === 'scrollX') {
                    $(firstContent).css({ 'left': 0 });
                    $(secondContent).css({ 'left': totalWidth + 'px' });
                }
                else if (configs.effect === 'scrollY') {
                    $(firstContent).css({ 'top': 0 });
                    $(secondContent).css({ 'top': totalHeight + 'px' });
                }
    
            })()
            
            function cssAnimate(){
                if (configs.effect === 'scrollX') {
                    $(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' });
                    $(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' });
                
                    $.each(contents, function(idx, itm) {
                        if (parseInt(itm.style.left,10) === -totalWidth) {
                            $(itm).css({ left: totalWidth + 'px' });
                        }
                    });
                }
                else if (configs.effect === 'scrollY') {
                    $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' });
                    $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' });
                
                    $.each(contents, function(idx, itm) {
                        if (parseInt(itm.style.top,10) === -totalHeight) {
                            $(itm).css({ top: totalHeight + 'px' });
                        }
                    });
                }
    
                setTimeId = setTimeout(cssAnimate, configs.duration);
            }
            
            function rollRun(){
                setTimeId = setTimeout(cssAnimate, configs.delay);
                return jQuery;
            }
            
            function rollStop(){
                clearTimeout(setTimeId);
                return jQuery;
            }
    
            return $.extend({
                rollRun: rollRun,
                rollStop: rollStop
            });
        }    
    });
    </script> 
    <script>
    $(function(){
        var roll_jQuery, contents;
    
        roll_jQuery = $.roll('.J_Roll_Content', '#J_Roll_Container', { effect: 'scrollY', duration: 40, delay: 500 }).rollRun();
        contents = $('.J_Roll_Content');
    
        contents.bind('mouseenter', function(){
            roll_jQuery.rollStop();
        });
        contents.bind('mouseleave', function(){
            roll_jQuery.rollRun();
        });
    });
    </script>
    </body>
    </html>

    转载请注明出处【作者:华子yjh原文链接 

  • 相关阅读:
    「小程序JAVA实战」java-sesion的状态会话与无状态会话(38)
    「小程序JAVA实战」小程序 loading 提示框与页面跳转(37)
    「小程序JAVA实战」小程序登录与后端联调(36)
    phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
    基于Bootstrap简单实用的tags标签插件
    html 中几次方,平方米,立方米,下标,上标,删除线等的表示方法
    如何做好App的引导页?(转)
    个推+DCLOUD,推送消息和透传消息
    AXURE在原型设计中的应用
    ***敏捷软件测试--初见
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/2856556.html
Copyright © 2020-2023  润新知