zoukankan      html  css  js  c++  java
  • 内容循环滚动/内容一条一条显示

    <!--最新智能报价-->
                <div class="m-quote-newst">
                    <p class="count" style="color:#777c7c;">今天已有<{$everyday+$todaytendersnum}>位业主发布招标</p>
                    <div class="quote-list" style="border:1px solid #ebebeb;background: #fff;">
                        <div class="list-tit" style="border-bottom: 1px solid #ebebeb;">
                            <span style="134px;color:#28c2b3;">城市</span>
                            <span style="134px;color:#28c2b3;">业主</span>
                            <span style="134px;color:#28c2b3;">面积</span>
                            <span style="134px;color:#28c2b3;">预算</span>
                            <span style="134px;color:#28c2b3;">日期</span>
                        </div>
                        <ul id="marquee1">
                            <{foreach $tendersitemstwo as $item}>
                            <li>
                                <span style="134px;color:#000000;"><{$item.city_name}></span>
                                <span style="134px;color:#000000;"><{$item.contact|default:"--"}></span>
                                <span style="134px;color:#000000;"><{$item.house_mj}>㎡</span>
                                <span style="134px;color:#000000;"><{$item.zongyusuan}></span>
                                <span style="134px;color:#000000;"><{$item.dateline|format:"m-d"}></span>
                            </li>
                            <{/foreach}>
                        </ul>
                    </div>
                </div>
                <!--最新智能报价 end-->

    滚动js:

     //marquee
        function startmarquee(lh,speed,delay,id,slip) {
            var t;
            var p = false;
            var o = document.getElementById(id);
            if (o == null) return false;
            o.innerHTML += o.innerHTML;
            o.onmouseover = function () {
                p = true;
            };
            o.onmouseout = function () {
                p = false;
            };
            o.scrollTop = 0;
            function start() {
                t = setInterval(scrolling, speed);
                if (!p) {
                    o.scrollTop += slip;
                } else {
                    o.scrollTop == o.scrollTop;
                }
            }
    
            function scrolling() {
                if (o.scrollTop % lh != 0) {
                    o.scrollTop += slip;
                    if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
                } else {
                    clearInterval(t);
                    setTimeout(start, delay);
                }
            }
            setTimeout(start, delay);
        };
        //发布招标内容循环滚动
        if($('#marquee1')['0']){
            startmarquee(44,100,0,"marquee1",4);
        }
        //签单快报滚动
        if($('#bulletin-con')['0']){
            startmarquee(44,100,0,"bulletin-con",4);
        }
    <!--签单快报-->
            <div class="m-bulletin">
                <div class="tit">最新动态</div>
                <div class="bulletin-con" id="bulletin-con">
                    <ul id="bubbleScroll">
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="qiandan_title">恭喜签单</div>
                                <div class="qiandan_list">庆祝<span style="color:rgb(255, 102, 0);"><{$item.company_name}></span>成功签下业主<{$item.contact}>的装修订单!</div>
                            </li>
                            <li>
                                <div class="welcome_title">欢迎加入</div>
                                <div class="welcome_list"><span style="font-weight: 700;">厦门有家装饰</span></br>入驻有其屋(<span style="color:rgb(40, 200, 180);">厦门有其屋</span>)</div>
                            </li>
                    </ul>
                </div>
                <a href="http://www.youqiwu.net.cn/pc_zhaoshang1708/" target="_blank" class="metoo">我也要出现在这里</a>
            </div>
            <!--签单快报 end-->

    一条一条显示js:

     //签单快报滚动(最初版)start
        // function autoScrollBubble(){
        //     var conHeight = $('.bulletin-con').height();  //获取包裹层的高度,若列表的高度超过包裹层的高度,则改为底部对齐
        //     var $ul = $('#bubbleScroll');
        //     $ul.show();
        //     var bubbleLength = $ul.find('li').length;
        //     var bubbleArr = [];
        //     for(var i = 0; i < bubbleLength; i++){  //将列表的元素加入数组
        //         bubbleArr.push($ul.find('li').eq(i));
        //     }
        //     $ul.html('');
        //     var delayTime = 3000;
        //     var appendIndex = 0;
        //     function appendBubble(){  //将li元素添加到列表函数
        //         $ul.append(bubbleArr[appendIndex]);
        //         var ulHeight = $ul.height();
        //         if(ulHeight >= conHeight){
        //             $ul.css({'top':'auto','bottom':0});
        //         }
        //         if(appendIndex >= bubbleLength-1){
        //             appendIndex = 0;
        //         }else{
        //             appendIndex++;
        //         }
        //         setTimeout(appendBubble,delayTime);
        //         if(delayTime == 20000){
        //             delayTime = 3000;
        //         }else{
        //             delayTime = 20000;
        //         }
        //     }
        //     appendBubble();
        // }
        // if($('.bulletin-con')['0']){
        //     autoScrollBubble();
        // }
        //签单快报滚动(最初版)end

     

  • 相关阅读:
    代表行为已成为习惯的信号有哪些?
    Java使用JDBC连接Oracle数据库
    JS正则表达式
    java实现内网通信
    纯前端代码实现美团外卖页面
    HTML绘制表格
    教你如何使用谷歌浏览器,亲测可用!
    Java 多线程实现多窗口同时售票简单功能
    实现获取命令行的返回结果
    HTML模仿实现京东登录页面
  • 原文地址:https://www.cnblogs.com/yongwang/p/7837596.html
Copyright © 2011-2022 走看看