js/css自定义滚动，聊天滚动，div滚动,video组件全屏事件监听
自定义滚动
目录
- 自定义滚动
-
- 由右向左滚动js
- 由下向上滚动js
- 由下向上滚动scss代码
- html代码
- 浏览器video组件全屏事件监听
优化：如果页面中有视频组件，能够全屏的，或者移动端横屏竖屏切换的组件，需要对自定义滚动进行优化，【在全屏时清除滚动定时器，退出全屏时重置各元素位置，创建新的定时器】
由右向左滚动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>
function markun(obj, delay, long, speed, height) {
var ddd = obj.length;
setTimeout(function () {
setInterval(function () {
for (var i = 0; i < obj.length; i++) {
if ($(obj[i]).position().top <= (height)) {
$(obj[i]).css('top', $(obj[i]).parent().height());
} else {
$(obj[i]).animate({
top: $(obj[i]).position().top -= long})
}
}
}, speed);
}, delay);
}
浏览器video组件全屏事件监听
function changeFull(){
// 全屏清除聊天滚动定时器，退出全屏时创建定时器
if (checkFull()) {
clearInterval(markunInterval)
} else {
var obj = $('.wtList .chat-cont');
// 需要重置 chat-cont的初始值 objCss是rem单位，进行转换
var objCss = [0.3, 1.8, 3.3, 4.8, 6.3, 7.8]
for (var i = 0; i < obj.length; i++) {
$(obj[i]).css('top', objCss[i]* topSize + 'px');
}
markun(obj, 0, topSize*1.5, 3000, -topSize*3.3);
}
}
// 监听视频全屏事件
document.addEventListener("webkitfullscreenchange", function(e) {
changeFull()
});
document.addEventListener("fullscreenchange", function(e) {
changeFull()
});
document.addEventListener("mozfullscreenchange", function(e) {
changeFull()
});
document.addEventListener("msfullscreenchange", function(e) {
changeFull()
});