原生js一屏一滚怎么用

2024-09-03

js控制页面每次滚动一屏，和楼梯效果

我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的  <ul class="louti"> <li class="active">第1屏</li> <li>第2屏</li> <li>第3屏</li> <li>第4屏</li> <li>第

原生 js 录屏功能

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>在线屏幕录制</title> <style> body{ font-family: Arial; margin: 4vh auto; width: 90vw; max-width: 600px; text-align: center; }

思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动显示. 页面显示的不是第一平时,当鼠标指针滑动到页面的头部区域,导航栏向右滑出:鼠标指针移出头部区域时,导航栏向左滑动隐藏. 当视口尺寸小于768px时,切换页面不隐藏导航条,但是导航条的项目要隐藏,通过点击按钮来显示和隐藏项目. 本篇代码是重构前的代码. HTML代码: <!DOCTYPE htm

移动终端学习2：触屏原生js事件及重力感应

如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增加到 51.1%:2014年中国智能手机用户已超过5亿,2018年将超过7亿) 1. 触屏手势随着大屏幕时代的到来,物理键盘逐渐退化,只剩下今天可见的 home 或 return 等少数按键.大部分的手机操控都依赖触屏完成. 现在触屏操作主要依靠电容式触摸屏传感器,可以实现多点触控.触屏手势参考如

HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 perspective: 800px;(景深)和使立方体呈3d效果展示的transform-style:preserve-3d来实现: 全屏的雪花飘落用原生js来实现(随机的大小,透明度的变化等),有详细注释: html5主要是实现背景音乐和头部的字体卷动效果. < audio src="music.

原生js实现单屏滚动

类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100%;} html: <div style="background:#FEE;"></div> <div style="background:#EFE;"></div> <div style="backgro

利用tween，使用原生js实现模块回弹动画效果

最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回其实这个效果css3就可以很轻松实现,但是公司要求最低兼容ie7,只能说是无缘了后来,利用jq的animate也能够实现,但是不知道怎么回事当滚回去时有延迟,好几秒后才能隐藏不见. 最终使用tween能够完美实现,只能说原生js的强大了. tween其实是一个函数库,里面都是些公式,比如说运动轨迹的算数公式. 实现效果:其实就是一个小方块弹啊弹. 首先给

关于最近在做的一个js全屏轮播插件

最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用margin-left的值不断变化,来改变显示哪张照片,当达到最后一张的时候,将第一张照片appendChild到最后一张照片的后面,如果有左右移动的话,当到达第一张照片时,还要继续左移动的话,就将最后一张照片利用insertBefore,将最后一张照片放在第一张照片的前面,这两个方法都只是改变子元素

原生js轮播以及setTimeout和setInterval的理解

下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生JS图片轮播</title> <style> * {margin: 0;padding: 0;} #box {width: 520px;height: 280px;margin: 100px aut

使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视频的播放 2.pause()控制视频的停止 3.currentTime控制视频的当前时间 4.muted控制视频是否静音(赋值true or false) 5.volume控制音量的大小(赋值0-1) 6.duration视频的总时间 7.ontimeupdate事件(当前播放位置改变时执行,使用时

瀑布流的三种实现方式（原生js+jquery+css3）

前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <st

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

原生JS实现弹幕效果

纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道. 每一个通道是从左到右的一条,高度固定,这样不同通道的弹幕不会相互覆盖. 弹幕滑动就是简单设置CSS属性 transition 实现.开始使用 left 改变弹幕的位置,后来改为 transform ,性能确实提高很多. 设置10条弹幕通道,每个通道有一个DOM池,每一次发射弹幕就从DOM池中拿

搭建前端监控系统（六）JS截屏和录屏篇

怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决. 当然,这些问题并非不能克服,让我们来一起看看如何去监控并定位线上的问题吧. 这是搭建前端监控系统的第六章,主要是介绍如何使用js进行页面截屏和录屏,跟着我一步步做,你也能搭建出一个属于自己的前端监控系统. =============================================

原生js实现拖拽效果

面向对象 + 原生js拖拽拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function(Move_fn){ function Move_img() { } Move_img.prototype = { constructor:Move_img, pageInit: function(imgEle, imgContent) { this.Ele = imgEle; this.Box =

用原生JS实现爱奇艺首页导航栏

以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> <meta charset="utf-8"> <style type="text/css"> * { padding: 0; margin: 0; } .wrap { height: 520px; background-color: #000; widt

原生JS实现简单留言板功能

原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS 实现留言板功能</title> <style> * { padding: 0; margin: 0; }

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

常用原生JS方法总结（兼容性写法）

经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(typ

原生JS实现"旋转木马"效果的图片轮播插件

一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF