网站关键词分割,深圳之窗手机版,怎样给网站换空间,中国四大门户网站分别是1、模态框(弹出框)
#xff08;1#xff09;、需求#xff1a;
点击弹出层#xff0c;会弹出模态框#xff0c;并且显示灰色半透明的遮挡层点击关闭按钮#xff0c;可以关闭模态框#xff0c;并且同时关闭半透明遮挡层鼠标放在模态框最上面一行#xff0c;可以按住鼠…1、模态框(弹出框)
1、需求
点击弹出层会弹出模态框并且显示灰色半透明的遮挡层点击关闭按钮可以关闭模态框并且同时关闭半透明遮挡层鼠标放在模态框最上面一行可以按住鼠标拖拽模态框在页面中移动鼠标松开可以停止拖动模态框移动
思路
点击弹出层模态框和遮挡层就会显示出来 display:block点击关闭按钮模态框和遮罩层会隐藏起来 display:none在页面中拖拽的原理鼠标按下并且移动之后松开鼠标触发事件是鼠标按下mousedown鼠标移动mousemove 鼠标松开 mouseup拖拽过程鼠标移动过程中获得最新的值赋值给模态框的left和top值这样模态框就可以跟着鼠标走了鼠标按下触发的事件源是h2鼠标的坐标减去鼠标内的坐标才是模态框真正的位置鼠标按下我们要得到鼠标在盒子的坐标鼠标移动就让模态框的坐标设置为鼠标坐标减去盒子坐标即可注意移动时间写到按下鼠标松开就停止拖拽可以让鼠标移动事件解除
2、es5
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titleDocument/titlestyle* {margin: 0;padding: 0;}h1 {cursor: pointer;margin: 50px auto;}/* 模态框 */.modal-box {display: none;width: 400px;height: 300px;background-color: #bfa;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 99;}button {position: absolute;right: 50px;top: 30px;width: 80px;line-height: 40px;}/* 遮罩层 */.bg {display: none;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: #000;opacity: 0.3;}.title {background-color: aqua;line-height: 60px;}/style/headbodyh1点击弹出模态框/h1!-- 弹出框 --div classmodal-boxbutton关闭/buttonh2 classtitle我是一个可爱的模态框·····/h2/div!-- 遮罩层 --div classbg/div!-- js --script// 1、获取元素var h1 document.querySelector(h1);var modalBox document.querySelector(.modal-box);var btn document.querySelector(button);var bg document.querySelector(.bg);var title document.querySelector(.title);// 2、点击显示隐藏模态框h1.onclick function () {modalBox.style.display block;bg.style.display block;};btn.onclick function () {modalBox.style.display none;bg.style.display none;};// 3、开始拖拽模态框//1、当我们鼠标按下就获得鼠标在盒子内的坐标title.addEventListener(mousedown, function (e) {var x e.pageX - modalBox.offsetLeft;var y e.pageY - modalBox.offsetTop;// (2)、鼠标移动的时候把鼠标在页面中的坐标减去鼠标在盒子内的坐标// 就是不断的求modalBox.offsetLeft modalBox.offsetTop// 不能直接用offset// 直接用offset得到的是盒子本来的坐标盒子要动起来才能改变offset的值// 当我们是想要先改变offset然后用他来改变盒子的位置所以不能直接用offset// 而是用鼠标的位置来动态的输入offsetfunction move(e) {modalBox.style.left e.pageX - x px;modalBox.style.top e.pageY - y px;// 这样设置会导致初始化移动时就把鼠标的位置赋值给盒子的中心有个跳跃的过程// modalBox.style.left e.pageX px;// modalBox.style.top e.pageY px;// modalBox.offsetLeft 是固定的值不会变化的需要先动盒子才能得到新的modalBox.offsetLeft// modalBox.style.left modalBox.offsetLeft px;// modalBox.style.top modalBox.offsetTop px;}document.addEventListener(mousemove, move);// 3、鼠标弹起就让鼠标移动事件移除document.addEventListener(mouseup, function () {document.removeEventListener(mousemove, move);});});/script/body
/html
3、es6
scriptlet that;class Modal {constructor() {that this;// 获取元素this.clickH1 document.getElementById(clickH1);this.btn document.getElementById(btn);this.modalBox document.querySelector(.modal-box);this.bg document.querySelector(.bg);this.title document.querySelector(.title);// 调用监听函数this.event();}// 监听函数event() {this.clickH1.addEventListener(click, this.clickH1Fun);this.btn.addEventListener(click, this.btnFun);this.title.addEventListener(mousedown, this.titleFun);}// 点击出现遮罩层clickH1Fun() {that.bg.style.display block;that.modalBox.style.display block;}// 点击关闭按钮btnFun() {that.bg.style.display none;that.modalBox.style.display none;}//鼠标按下titletitleFun(e) {// 获取鼠标在模态框中的位置方式一let x e.offsetX;let y e.offsetY;// 获取鼠标在模态框中的位置方式二// let x e.pageX - that.modalBox.offsetLeft;// let y e.pageY - that.modalBox.offsetTop;console.log(x, y);document.addEventListener(mousemove, moveFun);function moveFun(e) {// console.log(111);let left e.pageX - x;let right e.pageY - y;that.modalBox.style.left left px;that.modalBox.style.top right px;that.modalBox.style.margin 0; //left 值变化由于过度约束需要重新设置margin// that.modalBox.style.transformtranslate(0%, 0%)//left 值变化由于过度约束需要重新设置偏移量}document.addEventListener(mouseup, upFun);function upFun() {document.removeEventListener(mousemove, moveFun);}}}new Modal();/script
2、放大镜
1html/css 整个案例可以分为三个功能模块鼠标经过小图片盒子黄色的遮罩层和大图片盒子显示离开隐藏2个盒子功能黄色的遮挡层跟随鼠标移动功能移动黄色遮挡层大图片跟随移动功能
html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title放大镜案例/titlestyle* {margin: 0;padding: 0;}/* 小图 */.camera {width: 300px;height: 300px;position: relative;border: 1px solid black;}.cameraImg img {width: 300px;height: 300px;}/* 遮罩层 */.zoom {width: 100px;height: 100px;background-color: #ccc;opacity: 0.8;position: absolute;top: 0px;left: 0px;}/* 大图 */.bDiv {width: 500px;height: 500px;background-color: bisque;position: absolute;left: 350px;top: 0;overflow: hidden;}.bImg {position: absolute;top: 0;left: 0;}/style/headbodydiv classcamera!-- 小图 --div classcameraImgimg src./img0.jpg alt //div!-- 放大镜 --div classzoom/div!-- 大图 --div classbDivimg src./img1.jpg alt classbImg //div/div!-- 引入js --script src./放大镜.js/script/body
/html
2、es5 js
window.onload function () {var camera document.querySelector(.camera);var zoom document.querySelector(.zoom);var bDiv document.querySelector(.bDiv);var bImg document.querySelector(.bImg);// 1:给camera绑定鼠标移入移除事件让鼠标移除时放大镜跟展示页都消失camera.onmouseenter function () {zoom.style.display block;bDiv.style.display block;};camera.onmouseleave function () {// zoom.style.display none;// bDiv.style.display none;};// 2:设置放大镜zoom能跟着鼠标移动并设置范围活动camera.onmousemove function (event) {//2.1 获得鼠标的页面坐标x,yvar x event.pageX;var y event.pageY;// console.log(x, y);//2.2 获取图相对于页面的左边上边相对距离var offsetX camera.offsetLeft;var offsetY camera.offsetTop;// console.log(offsetX, offsetY);// 2.3 获取遮挡层的宽度跟高度var zoomW zoom.offsetWidth;var zoomH zoom.offsetHeight;// console.log(zoomW,zoomH);// 2.4 计算遮挡物的xy坐标var left x - offsetX - zoomW / 2;var top y - offsetY - zoomH / 2;// 2.5 设置判断left top的限制值/* 遮盖物的最大移动距离父元素camera的宽度减去遮盖物的宽度(300-100) */if (left 200) {left 200;}if (left 0) {left 0;}if (top 200) {top 200;}if (top 0) {top 0;}//2.6 将宽高赋值给放大镜zoom.style.left left px;zoom.style.top top px;/* 3、根据比例移动大图 遮罩层的移动距离 /遮罩层最大移动距离 大图片移动距离/大图片最大移动距离根据上面的等式可以演算出大图片的移动距离遮罩层的移动距离 /遮罩层最大移动距离*大图片最大移动距离 *///3.1 计算大图在大盒子里移动的最大距离/* 大图的宽度减去bDiv框子的宽度*/var bImgMw bImg.offsetWidth - bDiv.offsetWidth;var bImgMh bImg.offsetHeight - bDiv.offsetHeight;// console.log(bDiv.offsetWidth);// 3.2 根据比例移动大图var bX (left / 200) * bImgMw;var bY (top / 200) * bImgMh;// 3.3 将bXbY赋值给大图的宽高bImg.style.left -bX px;bImg.style.top -bY px;};
};
3、es6.js
window.onload function () {var that;class Camera {constructor() {// 保存thisthat this;// 获取整个盒子this.camera document.querySelector(.camera);this.zoom document.querySelector(.zoom);this.bDiv document.querySelector(.bDiv);this.bImg document.querySelector(.bImg);//初始化放大镜的位置lefttopthis.left 0;this.top 0;//初始化监听函数this.addevent();}// 监听事件addevent() {//1.1、移入显示放大镜移出隐藏放大镜this.camera.addEventListener(mouseenter, that.showZoom);this.camera.addEventListener(mouseleave, that.hiddZoom);//2、移入放大镜随着鼠标移动this.camera.addEventListener(mousemove, that.zoomMove);//2、放大镜移动大图也随着移动this.camera.addEventListener(mousemove, that.bDivMove);}//1.2 鼠标移入显示放大镜及大图showZoom() {that.zoom.style.display block;that.bDiv.style.display block;}hiddZoom() {that.zoom.style.display none;that.bDiv.style.display none;}// 1.2 放大镜随着鼠标移动zoomMove(e) {// 如果直接赋值会出现闪烁由于只有鼠标动了才会获取到offseX/Y的值移动之前为0// let left e.offsetX;// let top e.offsetY;// 1、鼠标在页面中的坐标var x e.pageX;var y e.pageY;//(2)、大盒子camera在在页面中的位置var offsetLeft that.camera.offsetLeft;var offsetTop that.camera.offsetTop;//3、计算zoom的大小var zoomWidth that.zoom.offsetWidth;var zoomHeight that.zoom.offsetHeight;//4、计算盒子中鼠标的位置that.left x - offsetLeft - zoomWidth / 2;that.top y - offsetTop - zoomHeight / 2;//(5)、限制放大镜的移动范围camera-zoomif (that.left 0) {that.left 0;}if (that.left 200) {that.left 200;}if (that.top 0) {that.top 0;}if (that.top 200) {that.top 200;}//(6)、将计算出的鼠标位置赋值给zoomthat.zoom.style.left that.left px;that.zoom.style.top that.top px;}// 3、放大镜移动大图也随着移动// zoom移动距离/zoom最大移动距离 大图移动距离/大图最大移动距离bDivMove() {// 计算大图的最大移动距离 大图-大图盒子大小var bimgMaxWidth that.bImg.offsetWidth - that.bDiv.offsetWidth;var bimgMaxHeight that.bImg.offsetHeight - that.bDiv.offsetHeight;// 计算大图移动距离zoom移动距离/zoom最大移动距离*大图最大移动距离var bimgLeft (that.left / 200) * bimgMaxWidth;var bimgTop (that.top / 200) * bimgMaxHeight;that.bImg.style.left -bimgLeft px;that.bImg.style.top -bimgTop px;}}new Camera();
};
3、京东侧边导航条
需求 原先侧边栏是绝对定位当页面滚动到一定位置侧边栏改为固定定位页面继续滚动会让返回顶部显示出来
思路 需要用到页面滚动事件scroll因为是页面滚动所以事件源是document滚动到某个位置就是判断页面被卷去的上部值页面被卷去的头部可以通过window.pageYOffset获得如果是被卷去的左侧window.pageXOffset注意元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title侧边栏案例/titlestyle* {padding: 0;margin: 0;}header,footer {width: 1000px;height: 200px;background-color: pink;margin: 0 auto;}main {width: 1000px;height: 800px;background-color: #bfa;margin: 0 auto;}nav {width: 60px;height: 200px;background-color: blue;position: absolute;right: 0;top: 250px;line-height: 30px;}span {display: block;width: 60px;height: 60px;background-color: red;margin-top: 140px;text-align: center;display: none;}/style/headbodyheader头部/headernavspan返回 br /顶部/span/navmain主体/mainfooter底部/footerscript// 1、获取元素var span document.querySelector(span);var nav document.querySelector(nav);var main document.querySelector(main);// 主体以上被卷去的距离var mainTop main.offsetTop;// 侧边导航以上被卷去的距离var navTop nav.offsetTop;console.log(navTop);// 2、页面滚动事件 scrolldocument.addEventListener(scroll, function () {// window.pageYOffset 获取页面被滚去的距离// 3、判断距离变化定位if (window.pageYOffset mainTop) {// 3.1将定位改成固定定位nav.style.position fixed;// 3.2 改成固定定位后会有跳动需要重新设置定位的top值,否则还是原值nav.style.top navTop - mainTop px;// 3.3 出现返回顶部字样span.style.display block;} else {nav.style.position absolute;nav.style.top 300px;span.style.display none;}});/script/body
/html
4、轮播图
1、搭建轮播图的结构
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title轮播图结构/title!-- script src../js/tools.js/script --script src../js/animation.js/scriptscript src./01.轮播图.js/scriptstyle* {padding: 0;margin: 0;list-style: none;text-decoration: none;}#outer {width: 590px;height: 470px;border: 10px solid red;margin: 50px auto;position: relative;overflow: hidden;}#outer ul {width: 500%;position: absolute;left: 0;top: 0;}#outer ul li {float: left;}.dot {position: absolute;bottom: 30px;left: 50%;transform: translate(-50%, -50%);}.dot a {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #999;margin: 0 5px;}.dot .active,.dot a:hover {background-color: orange;}.prev,.next {width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.4);text-align: center;position: absolute;font-size: 30px;color: #999;/* 隐藏左右按钮 */display: none;}.prev a,.next a {color: #fff;}.prev {left: 10px;top: 42%;}.next {right: 10px;top: 42%;}/style/headbodydiv idouter!-- 图片部分 --ullia href#img src./img/1.jpg alt //a/lilia href#img src./img/2.jpg alt //a/lilia href#img src./img/3.jpg alt //a/lilia href#img src./img/4.jpg alt //a/li!-- lia href#img src./img/1.jpg alt //a/li --/ul!-- 导航点 classactive--div classdot!-- a href# /aa href#/aa href#/aa href#/a --/div!-- 左右导航 --ol classprevNextli classpreva href# lt;/a/lili classnexta href#gt;/a/li/ol/div/body
/html
2、es5写法
功能需求
鼠标经过轮播图模块左右按钮显示离开隐藏左右按钮点击右侧按钮一次图片往左播放一张以此类推左侧按钮同理图片播放的同时下面的小圆圈模块跟随一起变化点击小圆圈可以播放相应图片鼠标不经过轮播图轮播图也会自动播放图片鼠标经过轮播图模块自动播放停止
es5写法
window.addEventListener(load, function () {var prev this.document.querySelector(.prev);var next this.document.querySelector(.next);var outer this.document.querySelector(#outer);//需求1 鼠标移入左右按钮出现隐藏outer.addEventListener(mouseenter, function () {prev.style.display block;next.style.display block;});outer.addEventListener(mouseleave, function () {prev.style.display none;next.style.display none;});//需求2 动态生成pot小圆圈// 2.1、获取元素var ulL outer.querySelector(ul);var dot outer.querySelector(.dot);for (var i 0; i ulL.children.length; i) {// 2.2、动态的创建a标签var a this.document.createElement(a);// 给a添加索引方便下面计算点击圆圈移动图片a.setAttribute(index, i);// 2.3 插入节点dot.appendChild(a);}// 2.4 给第一个小点设置选中样式dot.children[0].className active;//需求3 给点击的小圆圈加上类名 active 排他思想var as dot.querySelectorAll(a);for (var i 0; i as.length; i) {as[i].addEventListener(click, function () {for (var j 0; j as.length; j) {dot.children[j].className ;}this.className active;//需求4 点击小圆圈移动图片 move(obj, attr, target, speed, callback)//4.1 获取点击a的索引这个索引是创建a时添加的用来表示每个avar index this.getAttribute(index);// 4.2 ulL的移动距离小圆圈的索引号*图片的宽度animation(ulL, -index * 590);// move(ulL, left, -index * 590, 10);// 获取到index后需要同步赋值给下面的num跟current// 以便可以同步小圆点跟点击下一张的变化num index;current index;});}// 克隆第一张图片,不在结构里加// 循环生成小圆点的时候还没有克隆这个图片。所有不会自动生成的小圆圈var firstImg ulL.children[0].cloneNode(true);ulL.appendChild(firstImg);//需求5 点击左右按钮实现上下一张切换var num 0;var current 0; //用来标记小圆圈next.addEventListener(click, function () {//无缝滚动 如果走到了最后一张图片此时我们的ul要快速复原left改为0if (num ulL.children.length - 1) {ulL.style.left 0;num 0;}num;animation(ulL, -num * 590);// move(ulL, left, -num * 590, 20);// 点击右侧按钮小圆圈跟着跳动current;// 如果curent的数值跟小圆圈的数量一样走到了克隆的那张图片要还原为0if (current dot.children.length) {current 0;}for (var i 0; i dot.children.length; i) {dot.children[i].className ;}dot.children[current].className active;});//需求6 左侧按钮的功能prev.addEventListener(click, function () {if (num 0) {num ulL.children.length - 1;ulL.style.left -num * 590 px;}num--;animation(ulL, -num * 590);// move(ulL, left, -num * 590, 20);// 点击右侧按钮小圆圈跟着跳动current--;// 如果curent的数值跟小圆圈的数量一样要还原为0if (current 0) {current dot.children.length - 1;}for (var i 0; i dot.children.length; i) {dot.children[i].className ;}dot.children[current].className active;});//需求7 自动播放功能var timer setInterval(function () {// 手动调用点击事件next.click();}, 2000);//需求8 鼠标移入自动播放停止outer.addEventListener(mouseenter, function () {clearInterval(timer);timer null;});//需求9 鼠标移出重新开启定时器outer.addEventListener(mouseleave, function () {timer setInterval(function () {// 手动调用点击事件next.click();}, 2000);});
});
3、es6写法
window.onload function () {var that;class Swiper {constructor() {// 保存thisthat this;// 1.1 获取对应元素this.prev document.querySelector(.prev);this.next document.querySelector(.next);this.outer document.querySelector(#outer);//2.1 获取导航点父元素this.dot document.querySelector(.dot);this.imgList document.querySelector(.imgList);// 2.4 调用创建小圆点函数this.creatDot();// 3.1 获取图片导航小圆点this.dots document.querySelectorAll(.dot a);// 4.1 用于标识当前的图片位置this.num 0;this.current 0; //用于标识当前小圆点的位置// 5、克隆轮播图第一张照片this.cloneFirstImg();// 调用监听函数this.addevent();}// 所有监听函数addevent() {console.log(this);// 1.2 监听鼠标是否移入this.outer.addEventListener(mouseenter, that.pervNextShow);this.outer.addEventListener(mouseleave, that.pervNextNode);// 3.3 监听是否点击了小圆点for (var i 0; i this.dots.length; i) {// 保存i值方便找对应的图片this.dots[i].index i;// 默认第一个按钮为选中状态this.dots[0].className active;// 点击切换背景色this.dots[i].addEventListener(click, that.updatBackgroundColor);// 点击切换图片this.dots[i].addEventListener(click, that.updatImg);}// 4、点击nextthis.next.addEventListener(click, that.nextFun);// 5、点击prevthis.prev.addEventListener(click, that.prevFun);// 8、调用自动轮播函数this.timer null; //定义标识定时器this.autoPlay();// 9、移入outer暂停自动轮播this.outer.addEventListener(mouseenter, that.stopAutoPlay);// 10、移出outer继续自动轮播this.outer.addEventListener(mouseleave, that.startAutoPlay);}// 所有功能函数// 注意函数中的this指向// 1.3 上下一张出现pervNextShow() {that.prev.style.display block;that.next.style.display block;}pervNextNode() {that.prev.style.display none;that.next.style.display none;}// 2、根据图片创建导航点creatDot() {var imgNum this.imgList.children.length;for (var i 0; i imgNum; i) {var a a href# /a;this.dot.insertAdjacentHTML(afterBegin, a);}}// 3.4 点击小圆点切换颜色updatBackgroundColor(e) {// 1、先解决默认行为超链接跳转的问题e.preventDefault();// (2)、点击颜色切换for (var i 0; i that.dots.length; i) {that.dots[i].className ;}this.className active;}// 3.5 点击小圆点切换图片updatImg() {// (3)、根据图片导航点的索引移动图片animation(that.imgList, -590 * this.index);}// 4、点击下一张切换图片nextFun() {// 根据num的值判断num是否var len that.imgList.children.length;if (that.num len - 1) {that.imgList.style.left 0;that.num 0;}that.num;animation(that.imgList, -that.num * 590);// 点击下一张照片后更换小圆点背景色that.current;if (that.current that.dots.length) that.current 0;//调用更换小圆点颜色函数that.changeBackgroundColor();}// 5、为解决轮播图最后一张快速问题多赋值一张照片cloneFirstImg() {var firstImg that.imgList.children[0].cloneNode(true);that.imgList.appendChild(firstImg);}// 6、更换小圆点颜色changeBackgroundColor() {for (var i 0; i that.dots.length; i) {that.dots[i].className ;}that.dots[that.current].className active;}// 7、点击prev上一张照片prevFun() {// 根据num的值判断显示图片if (that.num 0) {that.num that.imgList.children.length - 1;that.imgList.style.left -that.num * 590 px;}that.num--;animation(that.imgList, -that.num * 590);// 同步图片小圆点的背景色if (that.current 0) {that.current that.dots.length;}that.current--;//调用更换小圆点颜色函数that.changeBackgroundColor();}// 8、自动轮播每隔2s调动一次next函数autoPlay() {that.timer setInterval(function () {that.nextFun();}, 2000);}// 9、鼠标移入轮播图停止自动轮播stopAutoPlay() {// console.log(that.timer);clearInterval(that.timer);that.timer null;}// 10、鼠标移出轮播图开始自动轮播startAutoPlay() {that.autoPlay();}}new Swiper();
};
4、节流阀优化
防止轮播图按钮连续点击造成播放过快
节流阀目的当上一个函数动画内容执行完毕再去执行下一个函数动画让事件无法连续触发
核心实现思路利用回调函数添加一个变量来控制锁住函数和解锁函数
开始设置一个变量 var flag true
ifflag{ flag false,do something} 关闭水龙头
利用回调函数动画执行完毕 falgtrue 打开水龙头 // 10、节流阀优化点击过快问题var flag true;next.addEventListener(click, function () {if (flag) {flag false; // 关闭水龙头//无缝滚动 如果走到了最后一张图片此时我们的ul要快速复原left改为0if (num ulL.children.length - 1) {ulL.style.left 0;num 0;}num;animation(ulL, -num * 590, function () {flag true;});// move(ulL, left, -num * 590, 20);// 点击右侧按钮小圆圈跟着跳动current;// 如果curent的数值跟小圆圈的数量一样走到了克隆的那张图片要还原为0if (current dot.children.length) {current 0;}for (var i 0; i dot.children.length; i) {dot.children[i].className ;}dot.children[current].className active;}});//需求6 左侧按钮的功能prev.addEventListener(click, function () {if (flag) {flag false;if (num 0) {num ulL.children.length - 1;ulL.style.left -num * 590 px;}num--;animation(ulL, -num * 590, function () {flag true;});// move(ulL, left, -num * 590, 20);// 点击右侧按钮小圆圈跟着跳动current--;// 如果curent的数值跟小圆圈的数量一样要还原为0if (current 0) {current dot.children.length - 1;}for (var i 0; i dot.children.length; i) {dot.children[i].className ;}dot.children[current].className active;}});
