zoukankan      html  css  js  c++  java
  • 向上循环滚动 / 滚动到固定位置停2秒继续滚动

     1 <div style="background-color:#fff;margin-bottom: 10px;">
     2         <p style="margin:0 10px;height: 40px;line-height: 40px;
     3                     font-size: 16px;
     4                     color: #000;
     5                     border-bottom: 1px solid #f2f2f2;">
     6             <span>{php echo count($usertuan);}</span>人在拼单,可直接参与
     7             <span class="checkMore" style="float: right; color: #9c9c9c;">查看更多 </span>
     8         </p>
     9 
    10         <div class="list_lh" id=lan27_com_top style="height:40px;overflow: hidden;">
    11             <div id=lan27_com_top1>
    12                 <ul id="marquees">
    13                 {loop $usertuan $item}
    14                 <li class="ctMsg" style="margin: 0 10px; overflow: hidden;
    15                         height: 40px;
    16                         display: flex;
    17                         border-bottom: 1px solid #f2f2f2;justify-content: space-between;">
    18                     <img src="{$item['avatar']}" alt="" 
    19                        style="30px;height:30px;border-radius: 50%; margin: 5px -25px 0 0;">
    20                     <span style="line-height: 40px;font-size: 14px;
    21                                  74px;
    22                                 overflow: hidden;">
    23                         {$item['realname']}
    24                     </span>
    25                     <div>
    26                         <p style=" color: #000;">
    27                             还差
    28                             <span style="color: red;margin: 0 -3px;">1人</span>
    29                             拼成
    30                         </p>
    31                         <p style="color: #000;margin-top: -2px;">
    32                             剩余
    33                             <span>11:25:2.0</span>
    34                         </p>
    35                     </div>
    36                     <a href="javascript:;" onclick="qubuy(this,{$item['user_id']})" style=" 68px;
    37                                     height: 28px;
    38                                     background-color: red;
    39                                     margin-top: 6px;
    40                                     text-align: center;
    41                                     line-height: 28px;
    42                                     border-radius: 10px;
    43                                     font-size: 14px;
    44                                     color: white;">
    45                         去拼单
    46                     </a>
    47                 </li>
    48                 {/loop}
    49             </ul>
    50             </div>
    51             
    52             <div  id='lan27_com_top2'></div>
    53         </div> 
    54            <!-- 参团滚动 -->
    55         <div style="display: none;">
    56             移动的高度<input id="height" ><br>
    57             倒计时<input id="time" ><br>
    58         </div>  
    59     </div>
     1 <script type="text/javascript" src="js/jquery.js"></script>
     2 <script type="text/javascript" src="js/scroll.js"></script>
     3 
     4 //循环滚动不停
     5 $(function(){
     6     $("div .list_lh").myScroll({
     7         speed:70, //数值越大,速度越慢
     8         rowHeight:40 //li的高度
     9     });
    10 });
     1 // 第二种
     2 // 循环滚动停顿2秒 --(在服务器只能整体循环两次,不知道为毛)
     3     var speed=35
     4     var MarqueeHeight=0;//保存滚动的高度
     5     var stoptime=0;//倒计时的时间
     6     var jianshao=0;//一个标志,当为1时才开始倒计时
     7     lan27_com_top2.innerHTML=lan27_com_top1.innerHTML //克隆lan27_com_top1为lan27_com_top2
     8     function Marquee1(){
     9         //当滚动至lan27_com_top1与lan27_com_top2交界时
    10         if(lan27_com_top2.offsetTop-lan27_com_top.scrollTop<=0){
    11             lan27_com_top.scrollTop-=lan27_com_top1.offsetHeight //lan27_com_top跳到最顶端
    12         }
    13         else{
    14             lan27_com_top.scrollTop++;
    15         }
    16         MarqueeHeight++;//保存移动的高度
    17         document.getElementById("height").value=MarqueeHeight//给高度文本框赋值
    18         document.getElementById("time").value=stoptime/1000 //给倒计时文本框赋值
    19         
    20         if(MarqueeHeight==40){//当滚动的高度达到50 也即是2行的时候停止滚动
    21             clearInterval(MyMar1);
    22             MarqueeHeight=0;
    23             stoptime=2000;//倒计时2秒
    24             jianshao=1;
    25             document.getElementById("height").value=MarqueeHeight
    26             document.getElementById("time").value=stoptime/1000
    27         }
    28     }
    29 
    30     var MyMar1=setInterval(Marquee1,speed)//设置定时器
    31     var MyMar2=setInterval(daojishi,100)
    32     //鼠标移上时清除定时器达到滚动停止的目的
    33     lan27_com_top.onmouseover=function() {clearInterval(MyMar1)}
    34     //鼠标移开时重设定时器
    35     lan27_com_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
    36     function daojishi(){
    37         if(jianshao==1){
    38             stoptime=stoptime-100;
    39             if(stoptime<0){
    40                 stoptime=0
    41                 jianshao=0
    42                 MyMar1=setInterval(Marquee1,speed)
    43             }
    44             document.getElementById("height").value=MarqueeHeight
    45             document.getElementById("time").value=stoptime/1000
    46         }
    47     }
  • 相关阅读:
    css应用视觉设计
    HTML中name、id、class的区别介绍
    css怎么选择父元素下的某个元素?
    css权重如何计算的?
    如何更有效的消灭watchdogs挖矿病毒?华为云DCS Redis为您支招
    分布式缓存Redis应用场景解析
    【云速建站】让你轻轻松松建立属于自己的网店
    一张图读懂什么是专属分布式存储
    【深度学习系列】卷积神经网络CNN原理详解(一)——基本原理(2)
    【深度学习系列】卷积神经网络CNN原理详解(一)——基本原理(1)
  • 原文地址:https://www.cnblogs.com/llying/p/9642817.html
Copyright © 2011-2022 走看看