互联网行业网站建设做网站优化推广的好处

当前位置： 首页 > news >正文

互联网行业网站建设,做网站优化推广的好处,做地坪网站,网站开发需要的软件PC端网页特效 代码下载 元素偏移量 offset 系列 offset 翻译过来就是偏移量#xff0c; 我们使用 offset系列相关属性可以动态的得到该元素的位置#xff08;偏移#xff09;、大小等。 获得元素距离带有定位父元素的位置获得元素自身的大小#xff08;宽度高度#x…PC端网页特效 代码下载 元素偏移量 offset 系列 offset 翻译过来就是偏移量 我们使用 offset系列相关属性可以动态的得到该元素的位置偏移、大小等。 获得元素距离带有定位父元素的位置获得元素自身的大小宽度高度注意返回的数值都不带单位 offset 系列常用属性 offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetWidth返回自身包括padding、边框、内容区的宽度返回数值不带单位element.offsetHeight返回自身包括padding、边框、内容区的高度返回数值不带单位 // offset 系列let father document.querySelector(.father);let son document.querySelector(.son);console.log(father.offsetTop);console.log(father.offsetLeft);console.log(son.offsetTop);console.log(son.offsetLeft);let w document.querySelector(.w);console.log(w.offsetWidth);console.log(w.offsetHeight);console.log(son.offsetParent);console.log(son.parentNode);offset 与 style 区别 offsetstyleoffset 可以得到任意样式表中的样式值style 只能得到行内样式表中的样式值offset 系列获得的数值是没有单位的style.width 获得的是带有单位的字符串offsetWidth 包含paddingborderwidthstyle.width 获得不包含padding和border 的值offsetWidth 等属性是只读属性只能获取不能赋值style.width 是可读写属性可以获取也可以赋值所以想要获取元素大小位置用offset更合适所以想要给元素更改值则需要用style改变 let box document.querySelector(.box);console.log(box.offsetWidth);console.log(box.style.width);box.style.height 300px;获取鼠标在盒子内的坐标案例 我们在盒子内点击想要得到鼠标距离盒子左右的距离。首先得到鼠标在页面中的坐标e.pageX, e.pageY其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)用鼠标距离页面的坐标减去盒子在页面中的距离得到 鼠标在盒子内的坐标如果想要移动一下鼠标就要获取最新的坐标使用鼠标移动 let coordinate document.querySelector(.coordinate);coordinate.addEventListener(mousemove, function(e) {let x e.pageX - coordinate.offsetLeft;let y e.pageY - coordinate.offsetTop;this.innerHTML ( x , y );});模态框拖拽案例 点击弹出层 模态框和遮挡层就会显示出来 display:block;点击关闭按钮模态框和遮挡层就会隐藏起来 display:none;在页面中拖拽的原理鼠标按下并且移动 之后松开鼠标触发事件是鼠标按下mousedown鼠标移动mousemove 鼠标松开 mouseup拖拽过程:鼠标移动过程中获得最新的值赋值给模态框的left和top值这样模态框可以跟着鼠标走了鼠标按下触发的事件源是最上面一行就是 id 为 title鼠标的坐标减去 鼠标在盒子内的坐标 才是模态框真正的位置。鼠标按下我们要得到鼠标在盒子的坐标。鼠标移动就让模态框的坐标 设置为鼠标坐标 减去盒子坐标即可注意移动事件写到按下事件里面。鼠标松开就停止拖拽就是可以让鼠标移动事件解除 let link document.querySelector(.login-link);let login document.querySelector(.login);let bg document.querySelector(.login-bg);let close document.querySelector(.login-close);link.addEventListener(click, function() {bg.style.display block;login.style.display block;});close.addEventListener(click, function() {bg.style.display none;login.style.display none;});let title document.querySelector(.login-title);title.addEventListener(mousedown, function(e) {document.addEventListener(mousemove, move);// 鼠标按下 就获得鼠标在盒子内的坐标let x e.clientX - login.offsetLeft;let y e.clientY - login.offsetTop;function move(e) {// 鼠标移动的时候把鼠标在页面中的坐标减去 鼠标在盒子内的坐标就是模态框的left和top值if (e.clientX 0 e.clientX window.innerWidth e.clientY 0 e.clientY window.innerHeight) {login.style.left e.clientX - x px;login.style.top e.clientY - y px;}}document.addEventListener(mouseup, function(e) {// 鼠标弹起就让鼠标移动事件移除document.removeEventListener(mousemove, move)});});仿京东放大镜案例 黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标。之后把数值给遮挡层做为left 和top值。此时用到鼠标移动事件但是还是在小图片盒子内移动。发现遮挡层位置不对需要再减去盒子自身高度和宽度的一半。遮挡层不能超出小图片盒子范围。如果小于零就把坐标设置为0如果大于遮挡层最大的移动距离就把坐标设置为最大的移动距离遮挡层的最大移动距离小图片盒子宽度 减去 遮挡层盒子宽度 let preview document.querySelector(.preview);let small document.querySelector(.small);let mask document.querySelector(.mask);let big document.querySelector(.big);let bigimg document.querySelector(.bigimg);small.addEventListener(mouseover, function() {mask.style.display block;big.style.display block;});small.addEventListener(mouseout, function() {mask.style.display none;big.style.display none;});small.addEventListener(mousemove, function(e) {let x e.pageX - preview.offsetLeft;let y e.pageY - preview.offsetTop;var mx x - mask.offsetWidth/2;var my y - mask.offsetHeight/2;if (mx 0) { mx 0 }let mxmax small.offsetWidth - mask.offsetWidth;if (mx mxmax) { mx mxmax; }if (my 0) { my 0 }let mymax small.offsetHeight - mask.offsetHeight;if (my mymax) { my mymax; }mask.style.left mx px;mask.style.top my px;let xscale mx/mxmax;var bx (bigimg.offsetWidth - big.offsetWidth)*xscale;let yscale my/mymax;var by (bigimg.offsetHeight - big.offsetHeight)*yscale;bigimg.style.left -bx px;bigimg.style.top -by px;});元素可视区 client 系列 client 翻译过来就是客户端使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。 client系列厲性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度不含边框返回数值不带单位element.clientHeight返回自身包括padding、内容区的高度不含边框返回数值不带单位 let client document.querySelector(.client);console.log(client.clientWidth);console.log(client.clientHeight);淘宝 flexible.js 源码分析 立即执行函数(function(){})() 或者 (function(){}()) 主要作用 创建一个独立的作用域。 避免了命名冲突问题 (function(a, b) {var num a b;console.log(num);}(1, 2));(function sum(a, b) {var num a b;console.log(num);})(3, 4);下面三种情况都会刷新页面都会触发 load 事件。 1.a标签的超链接 2.F5或者刷新按钮强制刷新 3.前进后退按钮 但是 火狐中有个特点有个“往返缓存”这个缓存中不仅保存着页面数据还保存了DOM和JavaScript的状态实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。 此时可以使用 pageshow事件来触发。这个事件在页面显示时触发无论页面是否来自缓存。在重新加载页面中pageshow会在load事件触发后触发根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件 注意这个事件给window添加。 (function flexible(window, document) {// 获取的html 的根元素var docEl document.documentElement// dpr 物理像素比var dpr window.devicePixelRatio || 1// adjust body font size 设置我们body 的字体大小function setBodyFontSize() {// 如果页面中有body 这个元素 就设置body的字体大小if (document.body) {document.body.style.fontSize (12 * dpr) px} else {// 如果页面中没有body 这个元素则等着 我们页面主要的DOM元素加载完毕再去设置body// 的字体大小document.addEventListener(DOMContentLoaded, setBodyFontSize)}}setBodyFontSize();// set 1rem viewWidth / 10 设置我们html 元素的文字大小function setRemUnit() {var rem docEl.clientWidth / 10docEl.style.fontSize rem px}setRemUnit()// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候要重新设置下rem 的大小window.addEventListener(resize, setRemUnit)// pageshow 是我们重新加载页面触发的事件window.addEventListener(pageshow, function(e) {// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面也需要从新计算一下rem 的大小if (e.persisted) {setRemUnit()}})// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法if (dpr 2) {var fakeBody document.createElement(body)var testElement document.createElement(div)testElement.style.border .5px solid transparentfakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight 1) {docEl.classList.add(hairlines)}docEl.removeChild(fakeBody)} }(window, document))元素滚动 scroll 系列 scroll 翻译过来就是滚动的使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 scroll系列属性作用element.scrolllop返回被卷去的上侧距离返回数值不带单位element.scrollLeft返回被卷去的左侧距离返回数值不带单位element.scrollWidth返回白身实际的宽度不含边框返回数值不带单位element.scrollHeight返回自身实际的高度不含边框返回数值不带单位 let scroll document.querySelector(.scroll);scroll.addEventListener(scroll, function() {console.log(scroll.scrollTop);console.log(scroll.scrollLeft);});如果浏览器的高或宽度不足以显示整个页面时会自动出现滚动条。当滚动条向下滚动时页面上面被隐藏掉的高度就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。 仿淘宝固定右侧侧边栏案例 需要用到页面滚动事件 scroll 因为是页面滚动所以事件源是document滚动到某个位置就是判断页面被卷去的上部值。页面被卷去的头部可以通过window.pageYOffset 获得。如果是被卷去的左侧window.pageXOffset注意元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset其实这个值 可以通过盒子的 offsetTop可以得到如果大于等于这个值就可以让盒子固定定位了 let banner document.querySelector(.banner);let main document.querySelector(.main);let slider document.querySelector(.slider);let goback document.querySelector(.goback);// 当侧边栏固定定位之后应该变化的数值let sliderY slider.offsetTop - banner.offsetTop;// 页面滚动事件 scrolldocument.addEventListener(scroll, function(e) {// window.pageYOffset 页面被卷去的头部if (window.pageYOffset banner.offsetTop) {// 当页面被卷去的头部大于banner上方的偏移 此时 侧边栏就要改为固定定位slider.style.position fixed;slider.style.top sliderY px;} else {slider.style.position absolute;slider.style.top 300px;}// 当页面滚动到main盒子就显示 goback模块if (window.pageYOffset main.offsetTop) {goback.style.display block;} else {goback.style.display none;}});页面被卷去的头部兼容性解决方案 需要注意的是页面被卷去的头部有兼容性问题因此被卷去的头部通常有如下几种写法 声明了 DTD使用 document.documentElement.scrollTop未声明 DTD使用 document.body.scrollTop新方法 window.pageYOffset和 window.pageXOffsetIE9 开始支持 function getScroll() {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};} 使用的时候 getScroll().left三大系列总结 三大系列大小对比作用element.offsetWidth返回自身包括padding边框、内容区的宽度返回数值不带单位element.clientWidth返回自身包括padding、内容区的宽度不含边框返回数值不带单位element.scrollWidth返回白身实际的完度不含边框返回数值不带单位 它们主要用法 offset系列 经常用于获得元素位置 offsetLeft offsetTopclient经常用于获取元素大小 clientWidth clientHeightscroll 经常用于获取滚动距离scrollTop scrollLeft注意页面滚动的距离通过 window.pageXOffset 获得 mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡 let mouseFather document.querySelector(.father-mouse);let mouseSon document.querySelector(.son-mouse);mouseFather.addEventListener(mouseenter, function() {console.log(1);});mouseFather.addEventListener(mouseover, function() {console.log(2);});动画函数封装 核心原理通过定时器 setInterval() 不断移动盒子位置。 实现步骤 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位才能使用element.style.left let animate document.querySelector(.animate);let aniTimer setInterval(function() {// 停止动画 本质是停止定时器if (animate.offsetLeft 100) {clearInterval(aniTimer);} else {animate.style.left animate.offsetLeft 1 px;}}, 30);如果多个元素都使用这个动画函数每次都要var 声明定时器。可以给不同的元素使用不同的定时器自己专门用自己的定时器。 核心原理利用 JS 是一门动态语言可以很方便的给当前对象添加属性。 function oneAnimate(obj, target) {let aniTimer setInterval(function() {// 停止动画 本质是停止定时器if (obj.offsetLeft target) {clearInterval(aniTimer);} else {obj.style.left obj.offsetLeft 1 px;}}, 30);}let animateOne document.querySelector(.animateOne);animateOne.addEventListener(click, function() {oneAnimate(this, 200);});function twoAnimate(obj, target) {clearInterval(obj.animateTimer);obj.animateTimer setInterval(function() {// 停止动画 本质是停止定时器if (obj.offsetLeft target) {clearInterval(obj.animateTimer);} else {obj.style.left obj.offsetLeft 1 px;}}, 30);}let animateTwo document.querySelector(.animateTwo);animateTwo.addEventListener(click, function() {twoAnimate(this, 200);});缓动效果原理 缓动动画就是让元素运动速度有所变化最常见的是让速度慢慢停下来。思路 让盒子每次移动的距离慢慢变小速度就会慢慢落下来。核心算法 (目标值 - 现在的位置) /10 做为每次移动的距离步长停止的条件是 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整 function threeAnimate(obj, target) {clearInterval(obj.animateTimer);obj.animateTimer setInterval(function() {// 停止动画 本质是停止定时器if (obj.offsetLeft target) {clearInterval(obj.animateTimer);} else {// 把步长值改为整数 不要出现小数的问题let step Math.ceil((target - obj.offsetLeft)/10);obj.style.left obj.offsetLeft step px;}}, 15);}let animateThree document.querySelector(.animateThree);animateThree.addEventListener(click, function() {threeAnimate(animateThree, 200);});动画函数多个目标值之间移动 可以让动画函数从 800 移动到 500。当点击按钮时候判断步长是正值还是负值 1.如果是正值则步长往大了取整 2.如果是负值则步长 向小了取整 动画函数添加回调函数 回调函数原理函数可以作为一个参数。将这个函数作为参数传到另一个函数里面当那个函数执行完之后再执行传进去的这个函数这个过程就叫做回调。 回调函数写的位置定时器结束的位置。 function fourAnimate(obj, target, callback) {clearInterval(obj.animateTimer);obj.animateTimer setInterval(function() {// 停止动画 本质是停止定时器if (obj.offsetLeft target) {clearInterval(obj.animateTimer);// 回调函数写到定时器结束里面if (callback) {callback();}} else {var step (target - obj.offsetLeft)/10;// 把步长值改为整数 不要出现小数的问题step step 0 ? Math.ceil(step) : Math.floor(step);obj.style.left obj.offsetLeft step px;}}, 15);}let animateFour document.querySelector(.animateFour);let btn500 document.querySelector(.btn500);btn500.addEventListener(click, function() {fourAnimate(animateFour, 500);});let btn800 document.querySelector(.btn800);btn800.addEventListener(click, function() {fourAnimate(animateFour, 800, function() {animateFour.style.backgroundColor red;});});动画函数封装到单独JS文件里面 因为以后经常使用这个动画函数可以单独封装到一个JS文件里面使用的时候引用这个JS文件即可。 let slide document.querySelector(.slide);let slider document.querySelector(.slider);slide.style.left slider.offsetWidth - slide.offsetWidth px;slide.addEventListener(mouseenter, function() {horizontalAnimation(slide.children[0], -156, function() {slide.children[1].innerHTML →;});});slide.addEventListener(mouseleave, function() {horizontalAnimation(slide.children[0], 0, function() {slide.children[1].innerHTML ←;});});常见网页特效案例 网页轮播图 轮播图也称为焦点图是网页中比较常见的网页特效。 鼠标经过轮播图模块左右按钮显示离开隐藏左右按钮。点击右侧按钮一次图片往左播放一张以此类推左侧按钮同理。图片播放的同时下面小圆圈模块跟随一起变化。点击小圆圈可以播放相应图片。鼠标不经过轮播图轮播图也会自动播放图片。鼠标经过轮播图模块 自动播放停止。 // 1. 获取元素let next document.querySelector(.next);let pre document.querySelector(.pre);let rotation document.querySelector(.rotation);// 2. 鼠标经过 rotation 就显示隐藏左右按钮rotation.addEventListener(mouseenter, function() {next.style.display block;pre.style.display block;});rotation.addEventListener(mouseleave, function() {next.style.display none;pre.style.display none;});// 3. 动态生成小圆圈 有几张图片我就生成几个小圆圈var flag true;let ul rotation.children[0];let ol document.querySelector(.circle);for (let index 0; index ul.children.length; index) {let li document.createElement(li);ol.appendChild(li);li.addEventListener(click, function() {if (flag) {flag false;changeCircle(index);horizontalAnimation(ul, -indexrotation.offsetWidth, function() {flag true;});}});}ol.children[0].className current;// 4. 克隆第一张图片(li)放到ul 最后面ul.appendChild(ul.children[0].cloneNode(true));// 5. 点击左右侧按钮 图片滚动一张next.addEventListener(click, function() {if (flag) {flag false;if (ul.offsetLeft rotation.offsetWidth(1 - ul.children.length)) {ul.style.left 0px;}let target ul.offsetLeft - rotation.offsetWidth;horizontalAnimation(ul, target, function() {flag true;});var n -ul.offsetLeft/rotation.offsetWidth;n;n n ul.children.length - 1 ? 0 : n;changeCircle(n);}});pre.addEventListener(click, function() {if (flag) {flag false;if (ul.offsetLeft 0) {ul.style.left rotation.offsetWidth*(1 - ul.children.length) px;}let target ul.offsetLeft rotation.offsetWidth;horizontalAnimation(ul, target, function() {flag true;});var n -ul.offsetLeft/rotation.offsetWidth;n–;n n ul.children.length - 1 ? 0 : n;changeCircle(n);}});function changeCircle(n) {for (let index 0; index ol.children.length; index) {const element ol.children[index];element.removeAttribute(class);}ol.children[n].className current;}// 6. 自动播放轮播图setInterval(function() {next.click();}, 2500);节流阀 防止轮播图按钮连续点击造成播放过快。 节流阀目的当上一个函数动画内容执行完毕再去执行下一个函数动画让事件无法连续触发。 核心实现思路利用回调函数添加一个变量来控制锁住函数和解锁函数。 开始设置一个变量var flag true;If(flag){flag false; do something} 关闭水龙头利用回调函数动画执行完毕 flag true 打开水龙头 返回顶部 滚动窗口至文档中的特定位置。 window.scroll(x, y)。注意里面的x和y 不跟单位直接写数字。 带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了页面滚动了多少可以通过 window.pageYOffset 得到最后是页面滚动使用 window.scroll(x,y) function windowVerticalAnimation(target, callback) {clearInterval(window.animateTimer);window.animateTimer setInterval(function() {// 停止动画 本质是停止定时器if (window.pageYOffset target) {clearInterval(window.animateTimer);// 回调函数写到定时器结束里面callback callback();} else {var step (target - window.pageYOffset)/10;// 把步长值改为整数 不要出现小数的问题step step 0 ? Math.ceil(step) : Math.floor(step);window.scroll(window.scrollX, step);}}, 15); }goback.addEventListener(click, function() {windowVerticalAnimation(0);});筋头云案例 鼠标经过某个小li筋斗云跟这到当前小li位置鼠标离开这个小li筋斗云复原为原来的位置鼠标点击了某个小li筋斗云就会留在点击这个小li 的位置 利用动画函数做动画效果原先筋斗云的起始位置是0鼠标经过某个小li把当前小li的offsetLeft 位置做为目标值即可鼠标离开某个小li就把目标值设为 0如果点击了某个小li 就把li当前的位置存储起来做为筋斗云的起始位置 let cloud document.querySelector(.cloud);let nav document.querySelector(.nav);let lis nav.querySelectorAll(li);// 原始位置var origin 0;for (let index 0; index lis.length; index) {const element lis[index];element.addEventListener(mouseenter, function() {horizontalAnimation(cloud, this.offsetLeft);});element.addEventListener(mouseleave, function() {horizontalAnimation(cloud, origin);});element.addEventListener(click, function() {origin this.offsetLeft;});}