js/css自定义滚动，聊天滚动，div滚动,video组件全屏事件监听

刺骨的言语ヽ痛彻心扉 2022-12-01 14:21 113阅读 0赞

# 自定义滚动 #

### 目录 ###

*  自定义滚动
 *   *  由右向左滚动js
     *  由下向上滚动js
     *  由下向上滚动scss代码
     *  html代码
     *  浏览器video组件全屏事件监听

优化：如果页面中有视频组件，能够全屏的，或者移动端横屏竖屏切换的组件，需要对自定义滚动进行优化，【在全屏时清除滚动定时器，退出全屏时重置各元素位置，创建新的定时器】

![在这里插入图片描述][20200827170918142.gif_pic_center]

## 由右向左滚动js ##

// 右 -> 左
    function markun(obj, delay, long, speed) { 
      var ddd = obj.length;
      setTimeout(function () { 
        setInterval(function () { 
          for (var i = 0; i < obj.length; i++) { 
            if ($(obj[i]).position().left <= (-500)) { 
              $(obj[i]).css('left', $(obj[i]).parent().width());
            } else { 
              $(obj[i]).css('left', $(obj[i]).position().left -= long);
            }
          }
        }, speed);
      }, delay);
    }
    var obj = $('.wtList .chat-cont');
    markun([obj[0], obj[1]], 200, 1, 50);
    markun([obj[2], obj[3]], 3000, 1, 30);
    markun([obj[4], obj[5]], 100, 1, 20);
    markun([obj[6]], 2000, 1, 30);

## 由下向上滚动js ##

//自定义滚动
    function markun(obj, delay, long, speed) { 
      var ddd = obj.length;
      setTimeout(function () { 
        setInterval(function () { 
          for (var i = 0; i < obj.length; i++) { 
            if ($(obj[i]).position().top <= (-280)) { 
              $(obj[i]).css('top', $(obj[i]).parent().height() + 60);
            } else { 
              $(obj[i]).css('top', $(obj[i]).position().top -= long);
            }
    
          }
        }, speed);
      }, delay);
    }
    var obj = $('.wtList .chat-cont');

## 由下向上滚动scss代码 ##

.problem-block {
          position: relative;
          width: 1000px;
          height: 885px;
          background: url("../images/pc/mainbg.png") no-repeat center;
          background-size: 100% 100%;
          overflow: hidden;
          h1 {
            position: absolute;
            top: 136px;
            left: 200px;
            font-size: 38px;
            color: $mainColor;
            background: url("../images/pc/bg-wt-title.png") no-repeat center;
            background-size: 100%;
            padding-left: 10px;
          }
          .wtList {
            position: relative;
            width: 650px;
            height: 260px;
            margin: 240px auto 0;
            overflow: hidden;
            border: 7px solid #ffd4a2;
            border-radius: 40px;
            padding: 30px 40px;
            box-sizing: border-box;
            @mixin positionTop($top) {
              top: $top
            }
            .align-right{
              justify-content: flex-end;
              right: 36px;
            }
            .chat-cont {
              position: absolute;
              display: flex;
              align-items: center;
              left: 36px;
              img {
                width: 64px;
                height: 64px;
              }
              .chat-left-point {
                width: 0;
                height: 0;
                border-top: 13px solid transparent;
                border-right: 20px solid #ffecd4;
                border-bottom: 13px solid transparent;
                margin-left: 0.13rem;
              }
              .chat-right-point {
                width: 0;
                height: 0;
                border-top: 13px solid transparent;
                border-left: 20px solid #ffecd4;
                border-bottom: 13px solid transparent;
                margin-right: 10px;
              }
              .chat-text {
                width: 425px;
                background: #ffecd4;
                border-radius: 7px;
                color: #87520e;
                padding: 18px;
                box-sizing: border-box;
                font-size: 20px;
              }
              &:nth-child(1){
                @include positionTop(38px)
              }
              &:nth-child(2){
                @include positionTop(140px)
              }
              &:nth-child(3){
                @include positionTop(240px)
              }
              &:nth-child(4){
                @include positionTop(315px)
              }
              &:nth-child(5){
                @include positionTop(390px)
              }
              &:nth-child(6){
                @include positionTop(465px)
              }
            }
          }
        }

## html代码 ##

<div class="problem-block">
    			<h1>高会评审,你是否也有这些疑问？</h1>
    			<div class="wtList">
    				<div class="chat-cont">
    					<img src="images/m/01.png" alt="">
    					<div class="chat-left-point"></div>
    					<div class="chat-text">如果明年参加评审，论文集中准备可以吗？如果不好会有什么影响？</div>
    				</div>
    				<div class="chat-cont align-right">
    					<div class="chat-text">高会评审是必须要在高会实务考试地区评审，还是工作所在地，还是与户籍有关呢？</div>
    					<div class="chat-right-point"></div>
    					<img src="images/m/02.png" alt="">
    				</div>
    				<div class="chat-cont">
    					<img src="images/m/01.png" alt="">
    					<div class="chat-left-point"></div>
    					<div class="chat-text">高级会计师评审是否需要学位证？</div>
    				</div>
    				<div class="chat-cont align-right">
    					<div class="chat-text">集团下面分公司财务经理有难度吗？</div>
    					<div class="chat-right-point"></div>
    					<img src="images/m/02.png" alt="">
    				</div>
    				<div class="chat-cont">
    					<img src="images/m/01.png" alt="">
    					<div class="chat-left-point"></div>
    					<div class="chat-text">高级会计师评审是否需要学位证？</div>
    				</div>
    				<div class="chat-cont align-right">
    					<div class="chat-text">业绩资料怎么写？普通单位的科员/税务师实务所的主管会计，怎样写业绩呀？</div>
    					<div class="chat-right-point"></div>
    					<img src="images/m/02.png" alt="">
    				</div>
    		</div>

![在这里插入图片描述][20200827171128599.png_pic_center]  
![在这里插入图片描述][20200827171128590.png_pic_center]  
![在这里插入图片描述][20200827171128598.png_pic_center]  
![在这里插入图片描述][20200827171128598.png_pic_center]  
![在这里插入图片描述][20200827171128592.png_pic_center]  
![在这里插入图片描述][20200827171128581.png_pic_center]

## 浏览器video组件全屏事件监听 ##

[20200827170918142.gif_pic_center]: /images/20221123/10a13011e1d049f587bc827d5da806d7.png
[20200827171128599.png_pic_center]: /images/20221123/765167f89b204eaba64e00c8994d9d43.png
[20200827171128590.png_pic_center]: /images/20221123/e640e62dd6de4b62b097ae3002857c86.png
[20200827171128598.png_pic_center]: /images/20221123/5f03843129a74384a284521b1ea9183c.png
[20200827171128592.png_pic_center]: /images/20221123/242ce17395a34cc1a49ddc5bfac0854a.png
[20200827171128581.png_pic_center]: /images/20221123/c03d923962ed4f0184819eb74041a57b.png