function Alex() {
//给予video.js的页面滚动到视频元素范围内自动播放/出范围暂停播放-----01
this.video_autoplay = function (box) {
var video_box = box.getElementsByTagName('video')[0];
//能否自动播放
var canAuto = true;
//元素距离顶部高度//上滚此距离元素完全出现
var top = box.offsetTop;
//元素高度
var height = parseFloat((window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle).height);
//网页可见区域高度
var _height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
//下滚此距离元素完全出现
var min_scroll_height = top - _height + height;
//下滚超过此距离元素完全消失
var max_scroll_height = top + height;
//上滚此距离元素完全出现
var up_max_height = max_scroll_height - height;
//上滚此距离元素完全消失
var up_min_height = top - _height;
//人为点击之后不再自动播放
box.addEventListener('click', function () {
canAuto = false;
});
//判断是上滚还是下滚
var scroll = function (fn) {
var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
fn = fn || function () {
};
window.addEventListener("scroll", function () {
var afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if (delta === 0) return false;
fn(delta > 0 ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
}
var video_scroll = function () {
//可以自动播放
scroll(function (direction) {
var _top = document.documentElement.scrollTop || document.body.scrollTop;
if ((direction == 'down') && (_top > min_scroll_height) && canAuto) {
video_box.play();
}
if ((direction == 'down') && (_top > max_scroll_height)) {
video_box.pause();
}
if ((direction == 'up') && (_top < up_max_height) && canAuto) {
video_box.play();
}
if ((direction == 'up') && (_top < up_min_height)) {
video_box.pause();
}
});
}
video_scroll();
};
//元素滚动到一定距离后固定在页面顶部------------------------------02
this.menu_fixed = function (menu_container) {
var _top = menu_container.offsetTop;
var scroll_div = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
if (top > _top) {
menu_container.style.position = 'fixed';
menu_container.style.top = '0';
} else if (top < _top) {
menu_container.style.position = 'relative';
menu_container.style.top = '0';
}
}
scroll_div();
}
}
var alex = new Alex();

调用方法

var box = document.querySelector('.index_video');
alex.video_autoplay(box);

整合常用功能的JS小组件库-v1.0的更多相关文章

  1. struct2json -- C结构体与 JSON 快速互转库V1.0发布

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zhutianlong/article/d ...

  2. 通知:逆天异常库 V1.0版本支持下载了~~

    百度网盘:http://pan.baidu.com/s/1bongheJ GitHub:https://github.com/dunitian/LoTDotNet

  3. 从零开发一款自己的小程序UI组件库(一)

    写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...

  4. 从零开发一款自己的小程序UI组件库(二)

    写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(bu ...

  5. vue 和 react 常用包(插件、组件 或 工具)

    vue 和 react  都可以使用的包(只是 纯 js 功能的包) 1.qs : https://blog.csdn.net/sansan_7957/article/details/82227040 ...

  6. 使用自定义验证组件库扩展 Windows 窗体

    使用自定义验证组件库扩展 Windows 窗体             1(共 1)对本文的评价是有帮助 - 评价此主题                          发布日期 : 8/24/20 ...

  7. 如何快速为团队打造自己的组件库(上)—— Element 源码架构

    文章已收录到 github,欢迎 Watch 和 Star. 简介 详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础. 如何快速为团队打 ...

  8. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  9. [js开源组件开发]localStorage-cache本地存储的缓存管理

    localStorage-cache本地存储的缓存管理 距离上次的组件开发有近三个月的时间了,最近一直在做一些杂事,无法静下心来写写代码,也是在学习emberjs,在emberjs中有一个很重要的东西 ...

随机推荐

  1. 6 线程threading

    1.第1种方式:threading模块 1)单线程执行 #-*- coding:utf-8 -*- import time def main(): print("我错了...") ...

  2. Java:内存泄露和内存溢出

    1. 内存溢出 (Memory Overflow) 是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就 ...

  3. 模拟登陆百度以及Selenium 的基本用法

    模拟登陆百度,需要依赖于selenium 模块,调用浏览器,执行python命令 先来说一下这个selenium模块啦...... 本文参考内容来自 Selenium官网 SeleniumPython ...

  4. logback.xml日志文件配置

    放在resources目录下面就可以自动读取<?xml version="1.0" encoding="UTF-8"?> <configura ...

  5. 面试遇到的订单表sql的解决方案

    对于以下需求:用户表:users (user_id  int)订单表:order_tb(user_id int, or_time  date, or_money double)求以下用户:一月下过单, ...

  6. 阿里云ECS下CentOS7.4 yum安装Python3.6环境

    一.安装EPEL和IUS软件源 二.安装Python3.6 三.创建python3软链接连接符 四.安装pip3 五.创建pip3链接符 六.进行验证是否安装成功 一.安装EPEL和IUS软件源 yu ...

  7. Python列表的深拷贝和浅拷贝

    1. Python列表的拷贝 对于python里面如果想要进行列表的拷贝和复制,具体的操作语句如下: 1) 深拷贝: M=[A,b,a,c] N=M[:] 2) 浅拷贝: N=M 有人说可以直接将M赋 ...

  8. tpo-08 C2 A strategy for attracting customers

    第 1 段 1.Listen to a conversation between a student and a business professor. 听一段学生和教授的对话. 第 2 段 1.So ...

  9. Mongo DB Java操作

    1.首先下载Mongo DB java 驱动 2.操作Mongo 增删改查 package com.sjjy.mongo; import java.util.ArrayList;import java ...

  10. 【第二章】Shell 变量

    一.什么是变量? 变量就是一个固定的字符串(也可以是字符.数字的组合)代替更多.更复杂的内容,该内容可能是变量.路径.字符串等其他内容. 变量就是程序中保存用户数据的一块内存空间,而变量名就是这块内存 ...