原生JS实现7中简单效果
2024-05-18 12:57:03
1. 轮播图
- 描述:
- 每隔固定事件会自动换图
- 点击向左键或者向右键后转到相应的图片上
- 点击下面原点会转到相应图片
- 效果图:
代码:
- HTML
<div id="box"><ul class="list"><li><img src="./img/1.jpg" alt=""></li><li><img src="./img/2.jpg" alt=""></li><li><img src="./img/3.jpg" alt=""></li><li><img src="./img/4.jpg" alt=""></li><li><img src="./img/5.jpg" alt=""></li></ul><span class="left"><</span><span class="right">></span><ul class="iconList"><li class="current"></li><li></li><li></li><li></li><li></li></ul></div>- CSS
*{margin:0;padding: 0;}li{list-style: none;}img{display: block;width: 100%;height: 100%;}#box{width: 2452px;height: 920px;position: relative;margin: 50px auto;overflow: hidden;cursor: pointer;}#box span{width: 100px;height: 150px;position: absolute;top: 40%;font-size: 100px;text-align: center;background-color: aqua;}#box .left{left: 0;}#box .right{right: 0;}#box .iconList{position: absolute;left:40%;transform: translateY(-50%);bottom: 1px;overflow: hidden;}.iconList li {width: 80px;height: 80px;border-radius: 50%;margin-right:10px ;float: left;background-color: aliceblue;}.iconList li.current{background-color: cornflowerblue;}- Javascript
var box = document.querySelector("#box");var span = document.querySelectorAll("span");//鼠标移入box.onmouseenter = function(){for(var i=0;i<span.length;i++){span[i].style.opacity = 1;}}//鼠标移出box.onmouseleave = function(){for(var i=0;i<span.length;i++){span[i].style.opacity = 0;}}//点击点，图片一起变动 iconListvar img = document.querySelectorAll(".list>li");var btn = document.querySelectorAll(".iconList>li");var ind = 0; //保持同步的索引var sign = null;//定时器在一个函数当中function setInt(ind){sign = setInterval(function(){//排他for(var j=0;j<btn.length;j++){btn[j].style.backgroundColor="aliceblue";img[j].style.display = "none";}//设置一个位置btn[ind].style.backgroundColor = "cornflowerblue";img[ind].style.display = "block";ind<btn.length-1 ? ind++ : ind = 0;},2000);}//需要一个定时器window.onload = function(){setInt(ind);//3秒转动一次 ///*加入定时器执行到1500毫秒的时候,我任意点击了一张图片，那么图片默认还剩下500毫秒的预览时间*/}//循环绑定事件for(var i=0;i<btn.length;i++){btn[i].index = i; //给li标签绑定一个index属性btn[i].onclick = function(){ clearInterval(sign);//使用排他思想//图片联动 : 点的数量和图片的数量时一致的//那么索引是相同for(var j=0;j<btn.length;j++){btn[j].style.backgroundColor="aliceblue";img[j].style.display = "none";}this.style.backgroundColor = "cornflowerblue";img[this.index].style.display = "block";ind = this.index;setInt(ind)}}var left = document.querySelector(".left");var right = document.querySelector(".right");left.onclick = function(){clearInterval(sign);//索引位置一起变ind>0 ? ind-- : ind = btn.length-1;//排他for(var j=0;j<btn.length;j++){btn[j].style.backgroundColor="aliceblue";img[j].style.display = "none";}//设置一个位置btn[ind].style.backgroundColor = "cornflowerblue";img[ind].style.display = "block";setInt(ind);}right.onclick = function(){clearInterval(sign);ind<btn.length-1 ? ind++ : ind = 0;for(var j=0;j<btn.length;j++){btn[j].style.backgroundColor="aliceblue";img[j].style.display = "none";}//设置一个位置btn[ind].style.backgroundColor = "cornflowerblue";img[ind].style.display = "block";setInt(ind);}
2. 翻牌
- 描述:
- 一个div,当鼠标移入时反转,移出时反转回来
- 效果:
代码:
- HTML
<div id="box"><div class="frount">我是正⾯</div><div class="back">我是反⾯</div></div>- CSS
* {margin: 0;padding: 0;}#box {position: relative;width: 300px;height: 300px;background-color: red;margin: 50px auto;transform-style: preserve-3d;transition: 1s;}#box .frount {position: absolute;left: 0;bottom: 0;width: 300px;height: 300px;background-color: green;}#box .back {width: 300px;height: 300px;background-color: blue;/*如果⼦元素做了3d旋转⽽⽗元素没有开启3d空间那么3d旋转后的⼦元素⽐没有3d旋转的定位（但没有z-index）⼦元素，层级要⾼⼀点如果开启了⽗元素的3d空间，那么层级就正常了；*/transform: rotateY(180deg);}- JavaScript
window.onload = function () {var box = document.querySelector('#box');box.onmouseenter = function () {this.style.transform = 'rotateY(180deg)';};box.onmouseleave = function () {this.style.transform = 'rotateY(0)';}}
3. 二级菜单
- 描述:
- 有一个一级菜单并有显示内容
- 当移入每一个
li时都会有对应的二级菜单显示出来 - 移出
li时,二级菜单消失
- 效果:
代码:
- HTML
<ul class="list"><li><a href="javascript:;">家电</a><ul class="listIn"><li><a href="javascript:;">电视</a></li><li><a href="javascript:;">冰箱</a></li><li><a href="javascript:;">洗⾐机</a></li></ul></li><li><a href="javascript:;">⾐服</a><ul class="listIn"><li><a href="javascript:;">男装</a></li><li><a href="javascript:;">⼥装</a></li><li><a href="javascript:;">童装</a></li></ul></li><li><a href="javascript:;">数码</a><ul class="listIn"><li><a href="javascript:;">照相机</a></li><li><a href="javascript:;">笔记本</a></li><li><a href="javascript:;">⼿机</a></li></ul></li></ul>- CSS
* {margin: 0;padding: 0;}ul,li {list-style: none;}a {text-decoration: none;color: white;}.list {position: relative;width: 200px;height: 150px;border: 1px solid black;}.list>li {width: 200px;height: 50px;background-color: hotpink;text-align: center;line-height: 50px;}.list>li:nth-child(2) {border-top: 1px solid black;border-bottom: 1px solid black;box-sizing: border-box;}.list>li .listIn {position: absolute;left: 200px;top: -1px;width: 200px;height: 150px;border: 1px solid purple;display: none;}.list li .listIn li {width: 200px;height: 50px;background-color: skyblue;}.list li .listIn li:nth-child(2) {border-top: 1px solid purple;border-bottom: 1px solid purple;box-sizing: border-box;}- Javascript
//移⼊哪⼀个⼀级的li，让对应的这个li下的⼆级ul显示//移出再消失window.onload = function () {var liNodes = document.querySelectorAll('.list>li');var ulNodes = document.querySelectorAll('.list>li .listIn');for (var i = 0; i < liNodes.length; i++) {liNodes[i].index = i;liNodes[i].onmouseover = function () {//让移⼊的这个li对应的⼆级菜单显示出来//移⼊的这个li的下标刚好和要显示的⼆级ul下标⼀样ulNodes[this.index].style.display = 'block';};liNodes[i].onmouseout = function () {ulNodes[this.index].style.display = 'none';}}}
4. 开关按键
- 描述
- 开关键
- 效果:
代码:
- HTML
<!-- div代表蒙版 li代表开关的两种状态on off--><div></div><ul><li>on</li><li>off</li></ul>- CSS
* {margin: 0%;padding: 0%;}ul>li {list-style: none;width: 50px;height: 50px;float: left;display: flex;align-items: center;justify-content: center;}ul>li:first-child {background-color: green;}ul>li:last-child {background-color: red;}div {width: 50px;height: 50px;background-color: gray;position: absolute;left: 0px;top: 0px;}- Javascript
var div = document.querySelector("div");var li = document.querySelectorAll("li"); //数组var flag = false; //代表开关状态 false关var sign = null;function action(){if(flag){//truesign = setInterval(function(){//0// div.style.left = 0;div.style.left = --div.offsetLeft+"px";//0//到什么停//0<1//console.log(div.style.left);if(div.offsetLeft<1){clearInterval(sign);sign = null;flag = false;}},0)}else{//false//div是通过定位//div.style.left 用于赋值的//div.offsetLeft 获取当前离左边的距离sign = setInterval(function(){//0div.style.left = ++div.offsetLeft+"px";//50//到什么停if(div.offsetLeft>49){clearInterval(sign);sign = null;flag = true;}},0)}}for(var i=0;i<li.length;i++){li[i].onclick = function(){action()}}div.onclick = function(){action()}
5. 随机验证码
描述:
随机生成数字和字母组合的验证码
效果:
2.代码:
function getSecurityCode(){var arr = [];for(var i = 48;i<123;i++){if(i>57 && i<65){i = 64;continue;}if(i>90 && i<97){i=96;continue;}arr.push(String.fromCharCode(i))}arr.sort(function(){return Math.random() - 0.5;});arr.length = 4;return arr.join("");}var str = getSecurityCode();console.log(str);
6. 滑轮效果
描述 :
- 鼠标拖动滑轮,滑轮可以动
- 滚轮滚动,滑轮也可以动
- 只要滑轮动,内容根据相应方向动
效果:
滑轮高度的计算 :
b / a = a / e b / a = a / e b/a=a/e =⇒ e = a 2 / b e = a^2/b e=a2/b
代码 :
1.HTML<div id="wrap"><div id="content"></div><!--轨道--><div id="scroll"><!--滑块--><div id="scrollin"></div></div></div>- CSS
* {margin: 0px;padding: 0px}html,body {height: 100%;overflow: hidden;}#wrap {position: relative;width: 100%;height: 100%;}#wrap #scroll {position: absolute;right: 0px;width: 30px;height: 100%;background-color: #00FFFF;border-left: 1px solid black;border-right: 1px solid black;}#wrap #scroll #scrollin {position: absolute;width: 28px;height: 100px;left: 50%;background-color: #800080;transform: translateX(-50%);}#wrap #content {position: absolute;}- javascript
//获取滑块和内容var scrollin = document.querySelector("#scrollin");var content = document.querySelector("#content");//遍历出1-100数来,每个数都要换行。目的是用来看滚动效果for (var i = 1; i <= 100; i++) {content.innerHTML += i + "<br />";}var scrollHeight = document.documentElement.clientHeight;// 获取body的高度,body的高度其实就是滑轨的高度var contentHeight = content.offsetHeight;//这个获取文本内容所占的实际高度var rate = scrollHeight / contentHeight; //滑轨的高度/内容高度var scrollinHeight = rate * scrollHeight;/* 假设: 滑轨的高度为 a , 滚轮的高度为 e, 整个页面可视的高度 b则,有一个等式 a/e = b/a ==> e=a^2/b*/scrollin.style.height = scrollinHeight + "px";//鼠标拖动滚动条scrollin.onmousedown = function (event) {//高级浏览器和低级浏览器的兼容性问题event = event || window.event;var eleY = scrollin.offsetTop;//获取 内容最近的元素的上级到顶部的距离.就是滑轮到顶部的距离var startY = event.clientY;// 获取 鼠标指针相对于浏览器页面（或客户区）的垂直坐标,就是看一下鼠标在滑轮的什么地方拖动的// 鼠标移动到 document 上是绑定一个事件document.onmousemove = function (e) {e = e || window.event;var endY = e.clientY;var disY = endY - startY; //?var top = eleY + disY; //?/* 就是看看鼠标在哪,是不是属于浏览器内容区域*/if (top >= document.documentElement.clientHeight - scrollin.offsetHeight) {top = document.documentElement.clientHeight - scrollin.offsetHeight;} else if (top <= 0) {top = 0;}scrollin.style.top = top + "px";var contentTop = top / rate;content.style.top = -contentTop + "px";}document.onmouseup = function () {document.onmousemove = document.onmouseup = null;}return false;}//鼠标的滚轮事件//考虑两组浏览器document.addEventListener("mousewheel", fo);document.addEventListener("DOMMouseScroll", fo);var flag = true; //上下滚动的标记 true是上//js预解析,函数提升function fo(event) {event = event || window.event;if (event.wheelDelta) {//ie chrome up 120 down -120if (event.wheelDelta > 0) {flag = true;} else {flag = false;}} else if (event.detail) {//firefox up -3 down 3if (event.detail > 0) {flag = false;} else {flag = true;}}//鼠标想下巴拉,内容也向下巴拉//鼠标对应的滑块高度可以自己定义10px//滚轮当中控制滑块,也需要临界值//先让滚轮动起来if (flag) {scrollin.style.top = scrollin.offsetTop - 10 + "px";if (scrollin.offsetTop <= 0) {scrollin.style.top = 0;}//内容跟随的问题var content_distance = scrollin.offsetTop / rate;content.style.top = -content_distance + "px";} else {scrollin.style.top = scrollin.offsetTop + 10 + "px";//document.documentElement.clientHeight html的高度if (scrollin.offsetTop >= document.documentElement.clientHeight - scrollin.offsetHeight) {scrollin.style.top = document.documentElement.clientHeight - scrollin.clientHeight + "px";}//内容跟随的问题var content_distance = scrollin.offsetTop / rate;content.style.top = -content_distance + "px";}}
7. 加载状态
描述 :
- 代加载状态,
效果 :
代码 :
- CSS
.ball {width: 10px;height: 10px;background-color: deepskyblue;position: absolute;border-radius: 5px;}- javascript
var arr=[];var r=30;var time=4;init();function init() {animation()}function createBall(alpha) {var ball=document.createElement("div");ball.className="ball";ball.style.opacity=alpha;document.body.appendChild(ball);ball.angle=0;arr.push(ball);}function animation() {requestAnimationFrame(animation);for(var i=0;i<arr.length;i++){update(arr[i]);}time--;if(time>0 || arr.length>15) return;createBall(1-arr.length*0.08);time=4;}function update(elem) {elem.angle+=5;if(elem.angle===360) elem.angle=0;var speedX=Math.sin(elem.angle*Math.PI/180)*r;var speedY=Math.cos(elem.angle*Math.PI/180)*r;elem.style.left=(document.documentElement.clientWidth-elem.offsetWidth)/2+speedX+"px";elem.style.top=(document.documentElement.clientHeight-elem.offsetHeight)/2+speedY+"px";}
原生JS实现7中简单效果相关推荐
- 史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果 上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
- 原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
- html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
- 用原生JS实现3D轮播效果
用原生JS实现3D轮播效果 实现思路: 先实现无缝轮播效果 添加3D效果 完善代码 增加自动轮播效果 效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
- js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
- animate用法 js原生_原生js实现jq的animate效果.js
原生js实现jq的animate效果(有一定bug未修复,有时间补上) //原生js实现jq的animate效果 /** *@param obj 执行动画的元素 *@param css JSON数值对 ...
- 前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下 纯生js实现轮播图 链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
- 原生js 实现 文字向上翻动 效果， jquery效果实现的总是在一段时间后 速度变快
https://blog.csdn.net/yunchong_zhao/article/details/106387004 之前曾经用jquery 做过一个类似的 但是 随着时间的进行 发动翻动 ...
最新文章
- 目录服务技术介绍——ADSI（三）
- 语言中拟合函数 计算aic_Go语言函数深度解析(中)
- Android开发之播放量点赞量打赏量收藏量单位格式化工具类
- 机器学习——人工神经网络之BP算法编程（python二分类数据集：马疝病数据集）
- 微博多尺度序列推荐算法实践
- 隐马尔科夫模型(Hidden Markov Models) 系列之一
- Abp框架多租户源码解读
- 质变的小米：从铁人三项到AIoT
- Echarts风向玫瑰图
- POJ 1080 Gene
- 徐艳（帮别人名字作诗）
- Win7+U盘安装Ubuntu 双系统超级详细教程
- 进神经网络的学习方式(译文)----中
- （接上）将txt中的一组时间转换为简化儒略日的小工具
- 简单沟通，远离纸质繁琐！灵活简单的在线表单制作工具
- C# SolidWorks 二次开发 API --- 2018版 中文翻译 之官方示例
- 多生成树协议，冗余备份，负载均衡
- 物联网学习之旅：微信小程序控制STM32（三）--STM32代码编写
- Android Studio 3.1 正式版
- Differential-Linear Cryptanalysis from an Algebraic Perspective 论文阅读笔记