建设资格注册管理中心网站,郑州seo顾问外包公司,wordpress 网址导航 主题,网站怎么做本地映射PC端网页特效
1.元素偏移量 offset 系列
1.1 offset 概述
offset 翻译过来就是偏移量#xff0c;我们使用offset系列相关属性可以动态的得到该元素位置#xff08;偏移#xff09; 、大小等
获得元素距离带有定位父元素的位置获得元素自身的大小#xff08;宽度高度我们使用offset系列相关属性可以动态的得到该元素位置偏移 、大小等
获得元素距离带有定位父元素的位置获得元素自身的大小宽度高度注意返回的数值都不带单位
offset 系列常用属性
offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetWidth返回自身包括padding、边框、内容区的宽度返回数值不带单位elelment.offsetHeight返回自身包括padding、边框、内容区的高度返回数值不带单位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleoffset系列属性/titlestyle* {padding: 0;margin: 0;}.father {position: relative;width: 300px;height: 300px;background-color: pink;margin: 200px 100px;}.son {width: 150px;height: 150px;background-color: purple;margin-left: 45px;}.w {/* width: 200px; */height: 200px;background-color: skyblue;margin: 0 auto 200px;padding: 10px;border: 15px solid red; }/style
/head
bodydiv classfatherdiv classson/div/divdiv classw/divscript// offset 系列var father document.querySelector(.father);var son document.querySelector(.son);var w document.querySelector(.w);// 1. 可以得到元素的偏移 位置 返回的不带单位的数值console.log(father.offsetTop);console.log(father.offsetLeft);// 它以带有定位的父元素为准 如果没有父元素或者父元素没有定位 则以 body 为准console.log(son.offsetLeft);// 2. 可以得到元素的大小 宽度和高度 是包含padding border widthconsole.log(w.offsetWidth);console.log(w.offsetHeight);// 3. 返回带有定位的父元素 否则的是bodyconsole.log(son.offsetParent);console.log(son.parentNode); // 返回父元素 是最近一级父元素 不管有没有定位/script
/body
/html1.2 offset与style区别
offset
offset可以得到任意样式表中的样式值offset系列获得的数值是没有单位的offsetWidth包含paddingborderwidthoffsetWidth等属性是只读属性只能获取不能赋值所以我们想要获取元素大小位置有offset更合适
style
style只能得到行内样式表中的样式style.width获得的是带有单位的字符串style.width获得不包含padding和border的值style.width是可读写属性可以获取也可以赋值所以我们想要给元素更改值则需要用style改变
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleoffset和style的区别/titlestyle.box {width: 200px;height: 200px;background-color: pink;padding: 10px;}/style
/head
bodydiv classbox stylewidth: 200px;/divscriptvar box document.querySelector(.box);console.log(box.offsetWidth);console.log(box.style.width);/script
/body
/html案例获取鼠标在盒子内的坐标
案例分析
我们在盒子内点击想要得到鼠标距离盒子左右的距离。首先得到鼠标在页面中的坐标e.pageX, e.pageY其次得到盒子在页面中的距离box.offsetLeft,box.offsetTop)用鼠标距离页面的坐标减去盒子在页面中的距离得到鼠标在盒子内的坐标如果想要移动柜一下鼠标就要获取最新的坐标使用鼠标移动事件mousemove
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title计算鼠标在盒子内的坐标/titlestyle.box {width: 300px;height: 300px;background-color: pink;margin: 200px 200px;}/style
/head
bodydiv classbox/divscriptvar box document.querySelector(.box);box.addEventListener(mousemove, function(e) {// console.log(e.pageX);// console.log(e.pageY);var x e.pageX - this.offsetLeft;var y e.pageY - this.offsetTop;this.innerHTML x坐标是 x y坐标是 y;})/script
/body
/html案例模态框拖拽
弹出框我们也称为模态框
点击弹出层会弹出模态框并且显示灰色半透明的遮挡层。点击关闭按钮可以关闭模态框并且同时关闭灰色半透明遮罩层。鼠标放到模态层最上面一行可以按住鼠标拖拽模态框在页面中移动。鼠标松开可以停止拖动模态框移动。
案例分析
点击弹出层模态层和遮罩层就会显示出来displayblock点击关闭按钮模态框和遮罩层就会隐藏起来displaynone在页面中拖拽的原理鼠标按下并且移动之后松开鼠标触发事件是鼠标按下mousedown鼠标移动mousemove鼠标松开mouseup拖拽过程鼠标移动过程中获得最新的值赋值给模态框的lef和top值这样模态框就可以跟着鼠标走了鼠标按下触发的事件源是最上面一行就是id为title鼠标的坐标减去鼠标在盒子内的坐标才是模态框真正的位置。鼠标按下我们要得到鼠标在盒子的坐标。鼠标移动就让模态框的坐标设置为鼠标坐标减去盒子坐标即可注意移动事件写到按下事件里面。鼠标松开就停止拖拽就是可以让鼠标移动事件解除
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title模态框拖拽/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}.login-header {width: 100%;text-align: center;font-size: 24px;margin-top: 15px;}input {border: 0;}a {color: #000;text-decoration: none;}.login {display: none;width: 512px;height: 280px;position: fixed;border: #ebebeb solid 1px;left: 50%;top: 50%;background: #ffffff;box-shadow: 0px 0px 20px #ddd;z-index: 9999;transform: translate(-50%, -50%);text-align: center;}.login-title {text-align: center;font-size: 20px;margin: 15px 0 20px 0;}.login-title:hover {cursor: move;}.login-title span {position: absolute;top: -24px;right: -24px;width: 48px;height: 48px;line-height: 45px;text-align: center;font-size: 14px;background-color: #fff;border-radius: 50%;border: 1px solid #ccc;}.login-input {overflow: hidden;}.list-input {float: left;width: 350px;height: 35px;line-height: 35px;border: 1px solid #ebebeb;margin-bottom: 20px;text-indent: 6px; }.login-input label {float: left;width: 90px;padding-right: 10px;text-align: right;line-height: 35px;height: 35px;font-size: 14px;}.login-button {width: 50%;height: 42px;line-height: 42px;margin: 15px auto 0px;font-size: 14px;border: 1px solid #ebebeb;}.login-button a {display: block;}.login-bg {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, .3);}/style
/head
bodydiv classlogin-headera hrefjavascript:; idlink点击弹出登录框/a/divdiv classlogin idlogindiv classlogin-title idtitle登录会员spana hrefjavascript:void(0); idcloseBtn classclose-login关闭/a/span/divdiv classlogin-input-contentdiv classlogin-inputlabel for用户名: /labelinput typetext idusername classlist-input placeholder请输入用户名 nameinfo[username] /divdiv classlogin-inputlabel for登录密码: /labelinput typepassword nameinfo[password] idpassword classlist-input placeholder请输入登录密码/div/divdiv classlogin-button idloginBtna hrefjavascript:void(0); idlogin-button-submit登录会员/a/div/div!-- 遮盖层 --div classlogin-bg idbg/divscript// 1. 获取元素var login document.querySelector(.login);var mask document.querySelector(.login-bg);var link document.querySelector(#link);var closeBtn document.querySelector(#closeBtn);var title document.querySelector(#title);// 2. 点击弹出层这个链接 link 让mask和login显示出来link.addEventListener(click, function() {mask.style.display block;login.style.display block;})// 3. 点击closeBtn 让mask和login隐藏closeBtn.addEventListener(click, function() {mask.style.display none;login.style.display none;})// 4. 开始拖拽// (1) 当我们鼠标按下就会获得鼠标在盒子内的坐标title.addEventListener(mousedown, function(e) {var x e.pageX - login.offsetLeft;var y e.pageY - login.offsetTop;// (2) 鼠标移动的时候把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener(mousemove, move)function move(e) {login.style.left e.pageX - x px;login.style.top e.pageY - y px;} // (3) 鼠标弹起就让鼠标移动事件移除document.addEventListener(mouseup, function() {document.removeEventListener(mousemove, move);})})/script
/body
/html案例仿京东放大镜
案例分析
整个案例可以分为三个功能模块鼠标经过小图片盒子黄色的遮挡层和大图片显示离开隐藏2个盒子功能 就是显示与隐藏 黄色的遮挡层跟随鼠标功能 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标之后把数值给遮挡层作为left和top值此时用到鼠标移动事件但是还是在小图片盒子内移动发现遮挡层位置不对需要再减去盒子自身高度和宽度的一半。遮挡层不能超出小图片盒子范围如果小于零就把坐标设置为0遮挡层最大移动距离小图片盒子宽度减去遮挡层盒子宽度 移动黄色遮挡层大图片跟随移动功能 求大图片的移动距离公式遮挡层移动距离/遮挡层最大移动距离 大图片移动距离/大图片最大移动距离大图片移动距离 遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离 div classproduct_intro clearfix!-- 预览区域 --div classpreview_wrap fldiv classpreview_imgimg srcupload/s3.png altdiv classmask/divdiv classbigimg srcupload/big.jpg alt classbigImg/div/divdiv classpreview_lista href# classarrow_prev/aa href# classarrow_next/aul classlist_itemliimg srcupload/pre.jpg alt/lili classcurrentimg srcupload/pre.jpg alt/liliimg srcupload/pre.jpg alt/liliimg srcupload/pre.jpg alt/liliimg srcupload/pre.jpg alt/li/ul/div/div!-- 产品详细信息 --div classitemInfo_wrap frdiv classsku_nameApple iPhone 6sA170064G玫瑰金色 移动通信电信4G手机/divdiv classnews推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返/divdiv classsummarydl classsummary_pricedt价格/dtddi classprice5299.00 /ia href#降价通知/adiv classremark累计评价612188/div/dd/dldl classsummary_promotiondt促销/dtddem加购价/em 满999.00另加20.00元或满1999.00另加30.00元或满2999.00另加40.00元即可在购物车换 购热销商品 详情 》/dd/dldl classsummary_supportdt支持/dtdd以旧换新闲置手机回收 4G套餐超值抢 礼品购/dd/dldl classchoose_colordt选择颜色/dtdda hrefjavascript:; classcurrent玫瑰金/aa hrefjavascript:;金色/aa hrefjavascript:;白色/aa hrefjavascript:;土豪色/a/dd/dldl classchoose_versiondt选择版本/dtdda hrefjavascript:; classcurrent公开版/aa hrefjavascript:;移动4G/a/dd/dldl classchoose_typedt购买方式/dtdda hrefjavascript:; classcurrent官方标配/aa hrefjavascript:;移动优惠购/aa hrefjavascript:;电信优惠购/a/dd/dldiv classchoose_btnsdiv classchoose_amountinput typetext value1a hrefjavascript:; classadd/aa hrefjavascript:; classreduce-/a/diva href# classaddcar加入购物车/a/div/div/div/div
/*详情页的样式文件*/.de_container {margin-top: 20px;
}.crumb_wrap {height: 25px;
}.crumb_wrap a {margin-right: 10px;
}.preview_wrap {width: 400px;height: 590px;
}.preview_img {position: relative;height: 398px;border: 1px solid #ccc;
}.mask {display: none;position: absolute;top: 0;left: 0;width: 300px;height: 300px;background: #FEDE4F;opacity: .5;border: 1px solid #ccc;cursor: move;
}.big {display: none;position: absolute;left: 410px;top: 0;width: 500px;height: 500px;background-color: pink;z-index: 999;border: 1px solid #ccc;overflow: hidden;
}.big img {position: absolute;top: 0;left: 0;
}.preview_list {position: relative;height: 60px;margin-top: 60px;
}.list_item {width: 320px;height: 60px;margin: 0 auto;
}.list_item li {float: left;width: 56px;height: 56px;border: 2px solid transparent;margin: 0 2px;
}.list_item li.current {border-color: #c81623;
}.arrow_prev, .arrow_next {position: absolute;top: 15px;width: 22px;height: 32px;background-color: purple;
}.arrow_prev {left: 0;background: url(../img/arrow-prev.png) no-repeat;
}.arrow_next {right: 0;background: url(../img/arrow-next.png) no-repeat;
}.itemInfo_wrap {width: 718px;
}.sku_name {height: 30px;font-size: 16px;font-weight: 700;
}.news {height: 32px;color: #e12228;
}.summary dl {overflow: hidden;
}.summary dt, .summary dd {float: left;
}.summary dt {width: 60px;padding-left: 10px;line-height: 36px;
}.summary_price, .summary_promotion {position: relative;padding: 10px 0;background-color: #fee9eb;
}.price {font-size: 24px;color: #e12228;
}.summary_price a {color: #c81623;
}.remark {position: absolute;right: 10px;top: 20px;
}.summary_promotion {padding-top: 0;
}.summary_promotion dd {width: 450px;line-height: 36px;
}.summary_promotion em {display: inline-block;width: 40px;height: 22px;background-color: #c81623;text-align: center;line-height: 22px;color: #fff;
}.summary_support dd {line-height: 36px;
}.choose_color a {display: inline-block;width: 80px;height: 41px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 41px;
}.summary a.current {border-color: #c81623;
}.choose_version {margin: 10px 0;
}.choose_version a, .choose_type a {display: inline-block;height: 32px;padding: 0 12px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 32px;
}.choose_btns {margin-top: 20px;
}.choose_amount {position: relative;float: left;width: 50px;height: 46px;background-color: pink;
}.choose_amount input {width: 33px;height: 44px;border: 1px solid #ccc;text-align: center;
}.add, .reduce {position: absolute;right: 0;width: 15px;height: 22px;border: 1px solid #ccc;background-color: #f1f1f1;text-align: center;line-height: 22px;
}.add {top: 0;
}.reduce {bottom: 0;/*禁止鼠标样式*/cursor: not-allowed;/* pointer 小手 move 移动 */
}.addcar {float: left;width: 142px;height: 46px;background-color: #c81623;text-align: center;line-height: 46px;font-size: 18px;color: #fff;margin-left: 10px;font-weight: 700;
}.product_detail {margin-bottom: 50px;
}.aside {width: 208px;border: 1px solid #ccc;
}.tab_list {overflow: hidden;height: 34px;
}/*把背景颜色 底边框都给 li*/.tab_list li {float: left;background-color: #f1f1f1;border-bottom: 1px solid #ccc;height: 33px;text-align: center;line-height: 33px;
}/*鼠标单击 li 变化样式 背景变白色 去掉下边框 文字变颜色*/.tab_list .current {background-color: #fff;border-bottom: 0;color: red;
}.first_tab {width: 104px;
}.second_tab {width: 103px;border-left: 1px solid #ccc;
}.tab_con {padding: 0 10px;
}.tab_con li {border-bottom: 1px solid #ccc;
}.tab_con li h5 {/*超出的文字省略号显示*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 400;
}.aside_price {font-weight: 700;margin: 10px 0;
}.as_addcar {display: block;width: 88px;height: 26px;border: 1px solid #ccc;background-color: #f7f7f7;margin: 10px auto;text-align: center;line-height: 26px;
}.detail {width: 978px;
}.detail_tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;
}.detail_tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;
}.detail_tab_list .current {background-color: #c81623;color: #fff;
}.item_info {padding: 20px 0 0 20px;
}.item_info li {line-height: 22px;
}.more {float: right;font-weight: 700;font-family: icomoon;
}window.addEventListener(load, function() {var preview_img document.querySelector(.preview_img);var mask document.querySelector(.mask);var big document.querySelector(.big);// 1. 当鼠标经过 preview_img 就显示和隐藏 mask遮挡层和big大盒子preview_img.addEventListener(mouseover, function() {mask.style.display block;big.style.display block;})preview_img.addEventListener(mouseout, function() {mask.style.display none;big.style.display none;})preview_img.addEventListener(mousemove, function(e) {// (1). 先计算出鼠标在盒子内的坐标var x e.pageX - this.offsetLeft;var y e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度300的一半是150 就是我们mask最终的left和top值// (3) mask 移动的距离var maskX x - mask.offsetWidth / 2;var maskY y - mask.offsetHeight / 2;var moveWidthX preview_img.offsetWidth - mask.offsetWidth;var moveWidthY preview_img.offsetHeight - mask.offsetHeight;// 如果x坐标小于了0就让他停在0的位置if (maskX 0) {maskX 0;} else if (maskX moveWidthX) {maskX moveWidthX;}if (maskY 0) {maskY 0;} else if (maskY moveWidthY) {maskY moveWidthY;}mask.style.left maskX px;mask.style.top maskY px;// 大图片移动距离 遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离// 大图var bigImg document.querySelector(.bigImg);// 大图片最大移动距离var bigMax bigImg.offsetWidth - big.offsetWidth;// 大图片移动距离 X Yvar bigX maskX * bigMax / moveWidthX;var bigY maskY * bigMax / moveWidthX;bigImg.style.left -bigX px;bigImg.style.top -bigY px;})
})1.3 offsetX,offsetLeft,offsetWidth的区别
offsetX/offsetY
offsetX和offsetY表示鼠标位置相对于最近父级元素的坐标无论父级是否定位不管是谁触发
.big{width: 200px;height: 200px;border: 1px solid red;position: absolute;top: 100px;left: 100px;
}
.box{width: 100px;height: 100px;border: 1px solid green;margin-left: 50px;
}div classbigdiv classbox/div
/divvar box document.getElementsByClassName(box)[0];
var big document.getElementsByClassName(big)[0];big.onclick function(e){e e || window.event;console.log(e.offsetX);//若点击位置在box里面则返回的数据是鼠标相对于box的坐标若点击位置在big里面则返回的值是鼠标相对于big的坐标和是谁触发事件的无关。
}offsetLeft/offsetTop
元素相对于最近定位父级元素的坐标若在所有的父级上都没有定位则相对于整个文档
.big{width: 200px;height: 200px;border: 1px solid red;/* position: absolute; */}
.small{width: 100px;height: 100px;border: 1px solid green;
}div classbigdiv classsmall/div
/divvar small document.getElementsByClassName(small)[0];
var big document.getElementsByClassName(big)[0];console.log(small.offsetLeft); //不加position结果是9加上position结果是0offsetWidth/offsetHeight
返回元素的视觉尺寸widthpaddingborder
.big{width: 200px;height: 200px;border: 1px solid red;position: absolute;top: 100px;left: 100px;
}
.box{width: 100px;height: 100px;border: 1px solid green;margin-left: 50px;
}div classbigdiv classbox/div
/divvar box document.getElementsByClassName(box)[0];
var big document.getElementsByClassName(big)[0];console.log(big.offsetWidth);//202
console.log(box.offsetWidth);//1022.元素可视区 client系列
client翻译过来就是客户端我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度不含边框返回数值不带单位element.clientHeight返回自身包括padding、内容区的高度不包边框返回数值不带单位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleclient系列/titlestylediv {width: 200px;height: 200px;background-color: pink;border: 10px solid red;padding: 10px;}/style
/head
bodydiv/divscript// client 宽度 和 offsetWidth 最大的区别就是 不包含边框var div document.querySelector(div);console.log(div.clientWidth);/script
/body
/html案例淘宝flexible.js源码分析
立即执行函数(function(){})() 或者 (function() {}())
主要作用创建一个独立的作用域。
下面三种情况都会刷新页面都会触发load事件。
a标签的超链接F5或者刷新按钮强制刷新前进后退按钮
但是火狐中有个特点有个“往返缓存”这个缓存中不仅保存着页面数据还保存了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))!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title像素比和pageshow事件/titlescript src07-flexible分析.js/script
/head
bodyscriptconsole.log(window.devicePixelRatio);window.addEventListener(load, function () {alert(11);})/scripta hrefhttp://www.itcast.cn链接/a
/body
/html3.元素滚动 scroll系列
3.1 元素scroll系列属性
scroll翻译过来就是滚动的我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
scroll系列属性作用element.scrollTop返回被卷去的上侧距离返回数值不带单位element.scrollLeft返回被卷去的左侧距离返回数值不带单位element.scrollWidth返回自身实际的宽度不含边框返回数值不带单位element.scrollHeight返回自身实际的高度不含边框返回数值不带单位
3.2 页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时会自动出现滚动条。当滚动条向下滚动时页面上面被隐藏掉的高度我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlescroll系列/titlestylediv {width: 200px;height: 200px;background-color: pink;border: 10px solid red;padding: 10px;overflow: auto;/* display: -webkit-box;-webkit-line-clamp: 10;-webkit-box-orient: vertical;text-overflow: ellipsis; */}/style
/head
bodydiv我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容/divscript// scroll系列var div document.querySelector(div);console.log(div.scrollHeight);console.log(div.clientHeight);// scroll滚动事件当滚动条发生变化的时候会触发的事件div.addEventListener(scroll, function() {console.log(div.scrollTop);})/script
/body
/html案例仿淘宝固定右侧侧边栏
原先侧边栏是绝对定位当页面滚动到一定位置侧边栏改为固定定位页面继续滚动会让返回顶部显示出来
案例分析
需要用到页面滚动事件scroll因为是页面滚动所以事件源是document滚动到某个位置就是判断页面被卷去的上部值页面被卷去的头部可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset注意元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageXOffset
需要注意的是页面被卷去的头部有兼容性问题因此被卷去的头部通常有如下几种写法
声明了DTD使用document.documentElement.scrollTop未声明DTD使用 document.body.scrollTop新方法window.pageYOffset 和 window.pageXOffset, IE9开始支持 function() {return {left: window.pageXOffset || documentElement.scrollLeft || document.body.scrollLeft || 0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};}
// 使用的时候 getScroll().left!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title仿淘宝固定侧边栏/titlestyle.slider-bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: yellowgreen;}span {display: none;position: absolute;bottom: 0;}/style
/head
bodydiv classslider-barspan classgoBack返回顶部/span/divdiv classheader w头部区域/divdiv classbanner wbanner区域/divdiv classmain w主体部分/divscript// 1. 获取元素var sliderbar document.querySelector(.slider-bar);var banner document.querySelector(.banner);// 获取 main 主体元素var main document.querySelector(.main);var goBack document.querySelector(.goBack);var mainTop main.offsetTop;// banner.offsetTop 就是被卷去的头部的大小 一定要写到滚动事件的外面var bannerTop banner.offsetTop;// 当我们侧边栏固定定位之后应该变化的数值var sliderbarTop sliderbar.offsetTop - bannerTop;// 2. 页面滚动事件 scrolldocument.addEventListener(scroll, function() {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3. 当我们页面被卷去的头部大于等于了301 此时 侧边栏就要改为固定定位if (window.pageYOffset bannerTop) {sliderbar.style.position fixed;sliderbar.style.top sliderbarTop px;} else {sliderbar.style.position absolute;sliderbar.style.top 300px;}// 4. 当我们页面滚动到main盒子就显示goBack模块if (window.pageYOffset mainTop) {goBack.style.display block;} else {goBack.style.display none;}})/script
/body
/html三大系列总结
三大系列大小对比作用element.offsetWidth返回自身包括padding、边框、内容区的宽度返回值不带单位element.clientWidth返回自身包括padding、内容区的宽度不包含边框返回数值不带单位element.scrollWidth返回自身实践的宽度不含边框返回数值不带单位
他们主要用法
offset系列经常用于获得元素位置 offsetLeft offsetTopclient经常用于获取元素大小 clientWidth clientHeightscroll经常用于获取滚动距离 scrollTop scrollLeft注意页面滚动的距离通过window.pageXOffset 获得
mouseenter和mouseover的区别
mouseenter 鼠标事件
当鼠标移动到元素上时就会触发mouseenter事件类似mouseover它们两者之间的差别是mouseover鼠标经过自身盒子会触发经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样就是因为mouseenter不会冒泡跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlemouseenter和mouseover的区别/titlestyle.father {width: 400px;height: 400px; background-color: pink;margin: 0 auto;}.son {width: 200px;height: 200px;background-color: purple;}/style
/head
bodydiv classfatherdiv classson/div/divscriptvar father document.querySelector(.father);var son document.querySelector(.son);father.addEventListener(mouseenter, function () {console.log(11);})/script
/body
/html4.动画函数封装
4.1 动画实现原理
核心原理通过定时器 setInterval() 不断移动盒子位置。
实现步骤
获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位才能使用element.style.left
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title动画原理/titlestylediv {position: absolute;width: 100px;height: 100px;background: pink;transition: all .3;}/style
/headbodydiv/divscript// 1. 获得盒子当前位置// 2. 让盒子在当前位置加上1个移动距离// 3. 利用定时器不断重复这个操作// 4. 加一个结束定时器的条件// 5. 注意此元素需要添加定位才能使用element.style.leftvar div document.querySelector(div);var timer setInterval(function() {if (div.offsetLeft 400) {// 停止动画 本质是停止定时器clearInterval(timer);} else {div.style.left div.offsetLeft 4 px;}}, 30)/script
/body/html4.2 动画函数简单封装
注意函数需要传递2个参数动画对象和移动到的距离。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title简单动画函数封装/titlestylediv {position: absolute;width: 100px;height: 100px;background: pink;transition: all .3;}span {position: relative;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}/style
/head
bodydiv/divspan夏雨荷/spanscript// 简单动画函数封装 obj目标对象 target目标位置function animate(obj, target) {var timer setInterval(function() {if (obj.offsetLeft target) {// 停止动画 本质是停止定时器clearInterval(timer);} else {obj.style.left obj.offsetLeft 4 px;}}, 30)}var div document.querySelector(div);var span document.querySelector(span);animate(div, 500);animate(span, 300);/script
/body
/html4.3 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数每次都要var声明定时器。我们可以给不同的元素使用不同的定时器自己专门用自己的定时器。
核心原理利用js是一门动态语言可以很方便的给当前对象添加属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title给不同对象添加不同定时器/titlestylediv {position: absolute;width: 100px;height: 100px;background: pink;transition: all .3;}span {position: relative;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}/style
/head
bodybutton点击之后夏雨荷才走/buttondiv/divspan夏雨荷/spanscript// var obj {};// obj.name andy;// 简单动画函数封装 obj目标对象 target目标位置// 给不同的元素指定了不同的定时器function animate(obj, target) {// 当我们不断地点击按钮这个元素的速度会越来越快因为开启了太多的定时器// 解决方案就是让我们元素只有一个定时器执行// 先清除以前的定时器只保留当前的一个定时器执行clearInterval(obj.timer)obj.timer setInterval(function() {if (obj.offsetLeft target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);} else {obj.style.left obj.offsetLeft 4 px;}}, 30)}var div document.querySelector(div);var span document.querySelector(span);var btn document.querySelector(button);animate(div, 500);btn.addEventListener(click, function() {animate(span, 300);})/script
/body
/html4.4 缓动效果原理
缓动动画就是让元素运动速度有所变化最常见的是让速度慢慢停下来
思路
让盒子每次移动的距离慢慢变小速度就会慢慢落下来。核心算法目标值-现在的位置/ 10 作为每次移动的距离 步长停止的条件是让当前盒子位置等于目标位置就停止定时器注意步长值需要取整
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title缓动动画原理/titlestylediv {position: absolute;width: 100px;height: 100px;background: pink;transition: all .3;}span {position: relative;top: 200px;display: block;width: 150px;height: 150px;background-color: purple;}/style
/headbodybutton点击之后夏雨荷才走/buttondiv/divspan夏雨荷/spanscript// var obj {};// obj.name andy;// 简单动画函数封装 obj目标对象 target目标位置// 思路// 1. 让盒子每次移动的距离慢慢变小速度就会慢慢落下来。// 2. 核心算法目标值 - 现在的位置/ 10 作为每次移动的距离 步长// 3. 停止的条件是让当前盒子位置等于目标位置就停止定时器function animate(obj, target) {// 当我们不断地点击按钮这个元素的速度会越来越快因为开启了太多的定时器// 解决方案就是让我们元素只有一个定时器执行// 先清除以前的定时器只保留当前的一个定时器执行clearInterval(obj.timer)obj.timer setInterval(function () {// 步长值写到定时器里面var step Math.ceil((target - obj.offsetLeft) / 10)if (obj.offsetLeft target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);} else {// 把每次加1的这个步长值改为慢慢变小的步长值 步长公式(目标值 - 现在的位置)/ 10 obj.style.left obj.offsetLeft step px;}}, 15)}var div document.querySelector(div);var span document.querySelector(span);var btn document.querySelector(button);animate(div, 800);btn.addEventListener(click, function () {animate(span, 1000);})// 匀速动画 就是 盒子当前的位置加上一个固定值 10// 缓动动画就是盒子当前的位置 变化的值(目标值 - 现在的位置)/ 10 /script
/body/html4.5 动画函数多个目标值之间移动
可以让动画函数从800移动到500。
当我们点击按钮时候判断步长是正值还是负值
如果是正值则步长往大了取整。如果是负值则步长向小了取整 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title缓动动画原理/titlestylespan {position: absolute;top: 200px;left: 0;display: block;width: 150px;height: 150px;background-color: purple;}/style/headbodybutton classbtn500点击夏雨荷500/buttonbutton classbtn800点击夏雨荷800/buttonspan夏雨荷/spanscript// var obj {};// obj.name andy;// 简单动画函数封装 obj目标对象 target目标位置// 思路// 1. 让盒子每次移动的距离慢慢变小速度就会慢慢落下来。// 2. 核心算法目标值 - 现在的位置/ 10 作为每次移动的距离 步长// 3. 停止的条件是让当前盒子位置等于目标位置就停止定时器function animate(obj, target) {// 当我们不断地点击按钮这个元素的速度会越来越快因为开启了太多的定时器// 解决方案就是让我们元素只有一个定时器执行// 先清除以前的定时器只保留当前的一个定时器执行clearInterval(obj.timer)obj.timer setInterval(function () {// 步长值写到定时器里面// 把步长值改为整数 不要出现小数的问题// var step Math.ceil((target - obj.offsetLeft) / 10);var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);} else {// 把每次加1的这个步长值改为慢慢变小的步长值 步长公式(目标值 - 现在的位置)/ 10 obj.style.left obj.offsetLeft step px;}}, 15)}var span document.querySelector(span);var btn500 document.querySelector(.btn500);var btn800 document.querySelector(.btn800);btn500.addEventListener(click, function () {animate(span, 500);})btn800.addEventListener(click, function () {animate(span, 800);})// 匀速动画 就是 盒子当前的位置加上一个固定值 10// 缓动动画就是盒子当前的位置 变化的值(目标值 - 现在的位置)/ 10 /script/body/html4.6 动画函数添加回调函数
回调函数原理函数可以作为一个参数。将这个函数作为参数传到另一个函数里面当那个函数执行完之后再执行传进去的这个函数这个过程就叫做回调。
回调函数写的位置定时器结束的位置。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlei缓动动画添加回调函数/titlestylespan {position: absolute;top: 200px;left: 0;display: block;width: 150px;height: 150px;background-color: purple;color: #fff;}/style
/head
bodybutton classbtn500点击夏雨荷500/buttonbutton classbtn800点击夏雨荷800/buttonspan夏雨荷/spanscript// var obj {};// obj.name andy;// 简单动画函数封装 obj目标对象 target目标位置// 思路// 1. 让盒子每次移动的距离慢慢变小速度就会慢慢落下来。// 2. 核心算法目标值 - 现在的位置/ 10 作为每次移动的距离 步长// 3. 停止的条件是让当前盒子位置等于目标位置就停止定时器function animate(obj, target, callback) {// console.log(callback); callback function() {} 调用的时候 callback()// 当我们不断地点击按钮这个元素的速度会越来越快因为开启了太多的定时器// 解决方案就是让我们元素只有一个定时器执行// 先清除以前的定时器只保留当前的一个定时器执行clearInterval(obj.timer)obj.timer setInterval(function () {// 步长值写到定时器里面// 把步长值改为整数 不要出现小数的问题// var step Math.ceil((target - obj.offsetLeft) / 10);var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面if (callback) {// 调用函数callback();}} else {// 把每次加1的这个步长值改为慢慢变小的步长值 步长公式(目标值 - 现在的位置)/ 10 obj.style.left obj.offsetLeft step px;}}, 15)}var span document.querySelector(span);var btn500 document.querySelector(.btn500);var btn800 document.querySelector(.btn800);btn500.addEventListener(click, function () {animate(span, 500, function() {span.style.backgroundColor red;});})btn800.addEventListener(click, function () {animate(span, 800, function () {span.style.background pink;});})// 匀速动画 就是 盒子当前的位置加上一个固定值 10// 缓动动画就是盒子当前的位置 变化的值(目标值 - 现在的位置)/ 10 /script
/body
/html4.7 动画函数封装到单独js文件里面
因为以后经常使用这个动画函数可以单独封装到一个js文件里面使用的时候引用这个js文件即可
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title引用animate动画函数/titlestyle.sliderbar {position: absolute;top: 45%;right: 0;}.sliderbar span {position: relative;display: block;width: 40px;height: 40px;line-height: 40px;background: purple;text-align: center;color: #fff;z-index: 1;transition: all .4;}.con {position: absolute;top: 0;/* left: 0; */width: 200px;height: 40px;line-height: 40px;text-align: center;background: purple;color: #fff;}/stylescript src03-animate.js/script
/head
bodydiv classsliderbarspan←/spandiv classcon问题反馈/div/divscript// 当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧// 当我们鼠标离开 sliderbar 就会让 con这个盒子滑动到右侧var sliderbar document.querySelector(.sliderbar);var con document.querySelector(.con);sliderbar.addEventListener(mouseenter, function() {// animate(obj, target, callback)animate(con, -160, function() {// 当我们动画执行完毕就把 ← 改为 →sliderbar.children[0].innerHTML →});})sliderbar.addEventListener(mouseleave, function() {animate(con, 0, function() {sliderbar.children[0].innerHTML ←});})/script
/body
/html5.常见网页特效案例
案例网页轮播图
轮播图也称为焦点图是网页中比较常见的网页特效。
功能需求 鼠标经过轮播图模块左右按钮显示离开隐藏左右按钮。 因为js较多我们单独新建js文件夹再新建js文件引入页面中。此时需要添加load事件鼠标经过轮播图模块左右按钮显示离开隐藏左右按钮。显示隐藏display按钮。 window.addEventListener(load, function () {// 1. 获取元素var arrow_l document.querySelector(.arrow-l);var arrow_r document.querySelector(.arrow-r);var focus document.querySelector(.focus);// 2. 鼠标经过focus模块就显示隐藏左右箭头focus.addEventListener(mouseenter, function () {arrow_l.style.display block;arrow_r.style.display block;})focus.addEventListener(mouseleave, function () {arrow_l.style.display none;arrow_r.style.display none;})
})点击右侧按钮一次图片往左播放一张以此类推左侧按钮同理。 图片播放的同时下面小圆圈模块跟谁一起变化。 点击小圆圈可以播放相应图片。 动态生成小圆圈核心思路小圆圈的个数要跟图片张数一致所以首先先得到ul里面图片的张数图片放入li里面所以就是li的个数利用循环动态生成小圆圈这个小圆圈要放入ol里面创建节点createElement(‘li’)插入节点ol.appendChild(li)第一个小圆圈需要添加current类 // 3.动态生成小圆圈 有几张图片我就生成几个小圆圈var ul focus.querySelector(ul);var ol focus.querySelector(.circle);// ul 移动的距离 小圆圈的索引号 乘以图片的宽度 注意是负值var focusWidth focus.offsetWidth;// console.log(ul.children.length);for (var i 0; i ul.children.length; i) {// 创建一个livar li document.createElement(li);// 将创建的li插入到ol里// 记录当前小圆圈的索引号 通过自定义属性li.setAttribute(index-data, i)ol.appendChild(li);}// 把ol里面的第一个小li设置类名为 currentol.children[0].className current;鼠标不经过轮播图轮播图也会自动播放图片。 鼠标经过轮播图模块自动播放停止。
小圆圈的排他思想点击当前小圆圈就添加current类其余的小圆圈就移除这个current类注意我们在刚才生成小圆圈的同时就可以直接绑定这个点击事件了
// 4. 小圆圈的排他思想 我们可以在生成的同时直接绑定事件li.addEventListener(mouseover, function () {// 干掉所有人 把所有的小li清除 current类名for (var i 0; i ol.children.length; i) {ol.children[i].className ;}// 留下我自己 当前的小li添加current类名this.className current;})点击小圆圈滚动图片此时用到animate动画函数将js文件引入(注意因为index.js依赖animate.js所以animate.js要写到index.js上面)使用动画函数的前提该元素必须要有定位注意是ul移动而不是li滚动图片的核心算法点击某个小圆圈就让图片滚动小圆圈的索引号乘以图片的宽度作为ul移动的距离此时需要知道小圆圈的索引号我们可以在生成小圆圈的时候给他设置一个自定义属性点击的时候获取这个自定义属性即可。
// 5. 点击小圆圈移动图片 当然移动的是ul// 当我们点击了某个小li 就拿到当前小li的索引号var index_data this.getAttribute(index-data);// 当我们点击了某个小li 就要把这个小li的索引号给 numnum index_data;// 当我们点击了某个小li 就要把这个小li的索引号给 circlecircle index_data;// console.log(index_data); // console.log(focusWidth);animate(ul, -index_data * focusWidth)点击右侧按钮一次就让图片滚动一张。声明一个变量num点击一次自增1让这个变量乘以图片宽度就是ul的滚动距离图片无缝滚动原理把ul第一个li复制一份放到ul的最后面当图片滚动到克隆的最后一张图片时让ul快速的不做动画的跳到最左侧left为0同时num赋值为0可以从新开始滚动图片了
// 7. 点击右侧按钮 图片滚动一张var num 0;// circle 控制小圆圈的播放var circle 0;arrow_r.addEventListener(click, function () {// 如果走到了最后一张图片 此时我们的ul要快速复原 left改为0// console.log(num);if (num ol.children.length) {ul.style.left 0px;num 0;}num;animate(ul, -num * focusWidth)克隆第一张图片克隆ul第一个li cloneNode() 加 true 深克隆 复制里面的子节点 false 浅克隆
// 6. 克隆第一张图片(li)放到ul最后面var first ul.children[0].cloneNode(true);ul.appendChild(first);点击右侧按钮小圆圈跟随变化最简单的做法是再声明一个变量circle每次点击自增1注意左侧按钮也需要这个变量 因此要声明全局变量但是图片有5张我们小圆圈只有4个少一个必须加一个判断条件如果circle 4 就从新复原为0
// 8. 点击右侧按钮小圆圈跟随变化 可以再声明一个变量控制小圆圈的播放circle;// 如果我们circle 4 说明走到最后我们克隆的这张图片了我们就复原if (circle ul.children.length - 1) {circle 0;}// 先清除其他小圆圈的current类名for (var i 0; i ol.children.length; i) {ol.children[i].className ;}// 留下当前小圆圈的current类名ol.children[circle].className current;添加一个定时器自动播放轮播图实际就类似点击了右侧按钮此时我们使用手动调用右侧按钮点击事件arrow_r.click()鼠标经过focus就停止定时器鼠标离开就开启定时器
5.1 节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的当上一个函数动画内容执行完毕再去执行下一个函数动画让事件无法连续触发。
核心思路利用回调函数添加一个变量来控制锁住函数和解锁函数。
开始设置一个变量 var flag true;
if (flag) {flag false;do something} 关闭水龙头
利用回调函数动画执行完毕flag true 打开水龙头
div classmaindiv classfocus fl!-- 左侧箭头 --a hrefjavascript: void(0); classarrow-llt;/a!-- 右侧箭头 --a hrefjavascript: void(0); classarrow-rgt;/a!-- 核心的滚动区域 --ullia href#img srcupload/focus.png alt/a/lilia href#img srcupload/focus1.jpg alt/a/lilia href#img srcupload/focus2.jpg alt/a/lilia href#img srcupload/focus3.jpg alt/a/li/ul!-- 小圆点 --ol classcircle/ol/div.focus {overflow: hidden;position: relative;float: left;width: 721px;height: 455px;
}.focus ul {position: absolute;top: 0;left: 0;width: 500%;
}.focus ul li {float: left;
}.arrow-l,
.arrow-r {display: none;position: absolute;top: 50%;width: 36px;height: 50px;line-height: 48px;text-align: center;font-size: 26px;background: rgba(0,0,0, .2);color: #fff;transform: translate(0, -50%);z-index: 2;
}.focus .arrow-r {right: 0;
}.circle {position: absolute;bottom: 10px;left: 50px;
}.current {background-color: #fff;
}.circle li {float: left;width: 15px;height: 15px;margin: 0 6px;border: 2px solid #ccc;border-radius: 50%;cursor: pointer;
}function animate(obj, target, callback) {// console.log(callback); callback function() {} 调用的时候 callback()// 当我们不断地点击按钮这个元素的速度会越来越快因为开启了太多的定时器// 解决方案就是让我们元素只有一个定时器执行// 先清除以前的定时器只保留当前的一个定时器执行clearInterval(obj.timer)obj.timer setInterval(function () {// 步长值写到定时器里面// 把步长值改为整数 不要出现小数的问题// var step Math.ceil((target - obj.offsetLeft) / 10);var step (target - obj.offsetLeft) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面// if (callback) {// // 调用函数// callback();// }callback callback();} else {// 把每次加1的这个步长值改为慢慢变小的步长值 步长公式(目标值 - 现在的位置)/ 10 obj.style.left obj.offsetLeft step px;}}, 15)
}window.addEventListener(load, function () {// 1. 获取元素var arrow_l document.querySelector(.arrow-l);var arrow_r document.querySelector(.arrow-r);var focus document.querySelector(.focus);// 2. 鼠标经过focus模块就显示隐藏左右箭头focus.addEventListener(mouseenter, function () {arrow_l.style.display block;arrow_r.style.display block;clearInterval(timer);timer null; // 清除定时器变量})focus.addEventListener(mouseleave, function () {arrow_l.style.display none;arrow_r.style.display none;timer setInterval(function () {arrow_r.click();}, 2000)})// 3.动态生成小圆圈 有几张图片我就生成几个小圆圈var ul focus.querySelector(ul);var ol focus.querySelector(.circle);// ul 移动的距离 小圆圈的索引号 乘以图片的宽度 注意是负值var focusWidth focus.offsetWidth;// console.log(ul.children.length);for (var i 0; i ul.children.length; i) {// 创建一个livar li document.createElement(li);// 将创建的li插入到ol里// 记录当前小圆圈的索引号 通过自定义属性li.setAttribute(index-data, i)ol.appendChild(li);// 4. 小圆圈的排他思想 我们可以在生成的同时直接绑定事件li.addEventListener(click, function () {// 干掉所有人 把所有的小li清除 current类名for (var i 0; i ol.children.length; i) {ol.children[i].className ;}// 留下我自己 当前的小li添加current类名this.className current;// 5. 点击小圆圈移动图片 当然移动的是ul// 当我们点击了某个小li 就拿到当前小li的索引号var index_data this.getAttribute(index-data);// 当我们点击了某个小li 就要把这个小li的索引号给 numnum index_data;// 当我们点击了某个小li 就要把这个小li的索引号给 circlecircle index_data;// console.log(index_data); // console.log(focusWidth);animate(ul, -index_data * focusWidth)})}// 把ol里面的第一个小li设置类名为 currentol.children[0].className current;// 6. 克隆第一张图片(li)放到ul最后面var first ul.children[0].cloneNode(true);ul.appendChild(first);// 7. 点击右侧按钮 图片滚动一张var num 0;// circle 控制小圆圈的播放var circle 0;// flag 节流阀var flag true;arrow_r.addEventListener(click, function () {if (flag) {flag false;// 如果走到了最后一张图片 此时我们的ul要快速复原 left改为0// console.log(num);if (num ol.children.length) {ul.style.left 0px;num 0;}num;animate(ul, -num * focusWidth, function () {flag true; // 打开节流阀})// 8. 点击右侧按钮小圆圈跟随变化 可以再声明一个变量控制小圆圈的播放circle;// 如果我们circle 4 说明走到最后我们克隆的这张图片了我们就复原// if (circle ul.children.length - 1) {// circle 0;// }circle ul.children.length - 1 ? circle 0 : circle;circleChange()}})// 9. 左侧按钮arrow_l.addEventListener(click, function () {if (flag) {flag false;// 如果走到了最后一张图片 此时我们的ul要快速复原 left改为0// console.log(num);if (num 0) {num ul.children.length - 1;ul.style.left -num * focusWidth px;}num--;animate(ul, -num * focusWidth, function() {flag true;})// 8. 点击右侧按钮小圆圈跟随变化 可以再声明一个变量控制小圆圈的播放circle--;// 如果我们circle 0 说明是第一张图片 则小圆圈要改为第四个小圆圈3)// if (circle 0) {// circle ol.children.length - 1;// }circle circle 0 ? ol.children.length - 1 : circle;circleChange()}})function circleChange() {// 先清除其他小圆圈的current类名for (var i 0; i ol.children.length; i) {ol.children[i].className ;}// 留下当前小圆圈的current类名ol.children[circle].className current;}// 10. 自动播放轮播图var timer setInterval(function () {arrow_r.click();}, 2000)
})案例返回顶部
滚动窗口至文档中的特定位置。
window.scroll(x, y)
注意里面的x和y不跟单位
带有动画的返回顶部此时我们可以继续使用我们封装的动画函数只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少可以通过window.pageYOffset得到最后是页面滚动使用window.scroll(x, y)
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title返回顶部案例/titlestyle.slider-bar {position: absolute;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: yellowgreen;}span {display: none;position: absolute;bottom: 0;}.goBack {cursor: pointer;}/style
/headbodydiv classslider-barspan classgoBack返回顶部/span/divdiv classheader w头部区域/divdiv classbanner wbanner区域/divdiv classmain w主体部分/divscript// 1. 获取元素var sliderbar document.querySelector(.slider-bar);var banner document.querySelector(.banner);// 获取 main 主体元素var main document.querySelector(.main);var goBack document.querySelector(.goBack);var mainTop main.offsetTop;// banner.offsetTop 就是被卷去的头部的大小 一定要写到滚动事件的外面var bannerTop banner.offsetTop;// 当我们侧边栏固定定位之后应该变化的数值var sliderbarTop sliderbar.offsetTop - bannerTop;// 2. 页面滚动事件 scrolldocument.addEventListener(scroll, function () {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3. 当我们页面被卷去的头部大于等于了301 此时 侧边栏就要改为固定定位if (window.pageYOffset bannerTop) {sliderbar.style.position fixed;sliderbar.style.top sliderbarTop px;} else {sliderbar.style.position absolute;sliderbar.style.top 300px;}// 4. 当我们页面滚动到main盒子就显示goBack模块if (window.pageYOffset mainTop) {goBack.style.display block;} else {goBack.style.display none;}})// 3. 当我们点击了返回顶部模块就让窗口滚动到页面的最上方goBack.addEventListener(click, function () {// 里面的 x 和 y 不跟单位 直接写数字即可 // window.scroll(0, 0);animate(window, 0);});// 动画函数function animate(obj, target, callback) {// console.log(callback); callback function() {} 调用的时候 callback()// 当我们不断地点击按钮这个元素的速度会越来越快因为开启了太多的定时器// 解决方案就是让我们元素只有一个定时器执行// 先清除以前的定时器只保留当前的一个定时器执行clearInterval(obj.timer)obj.timer setInterval(function () {// 步长值写到定时器里面// 把步长值改为整数 不要出现小数的问题// var step Math.ceil((target - obj.offsetLeft) / 10);var step (target - window.pageYOffset) / 10;step step 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset target) {// 停止动画 本质是停止定时器clearInterval(obj.timer);// 回调函数写到定时器结束里面callback callback();} else {// 把每次加1的这个步长值改为慢慢变小的步长值 步长公式(目标值 - 现在的位置)/ 10 // obj.style.left window.pageYOffset step px;window.scroll(0, window.pageYOffset step)}}, 15)}/script
/body/html案例筋斗云案例
鼠标经过某个小li筋斗云跟着到当前小li位置鼠标离开这个小li筋斗云复原为原来的位置鼠标点击了某个小li筋斗云就会留在点击这个小li的位置
案例分析
利用动画函数做动画效果原先筋斗云的起始位置是0鼠标经过某个小li把当前的offsetLeft位置作为目标值即可鼠标离开某个小li就把目标值设为0如果点击了某个小li就把当前的位置存储起来当鼠标离开筋斗云就回到这个位置
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title筋斗云案例/titlestyle* {margin: 0;padding: 0;}body {background: #000;}a {color: #000;text-decoration: none;text-align: center;}li {list-style: none;}.c-nav {position: relative;margin: 100px auto;width: 1000px;height: 42px;background: #fff url(images/rss.png) no-repeat right center;border-radius: 6px;}.c-nav ul {position: absolute;}.c-nav ul li {float: left;margin: 10px 11px;}.cloud {position: absolute;top: 0;left: 0;display: block;width: 83px;height: 42px;background: url(images/cloud.gif) no-repeat;}.c-nav li a:hover {color: white;}.c-nav li.current a {color: #0dff1d;}/stylescript src03-animate.js/scriptscriptwindow.addEventListener(load, function() {// 1. 获取元素var cloud document.querySelector(.cloud);var c_nav document.querySelector(.c-nav);var lis c_nav.querySelectorAll(li);// 2. 给所有的小li绑定事件var current 0;// 这个current作为筋斗云的起始位置for (var i 0; i lis.length; i) {// (1) 鼠标经过把当前的小li的位置作为目标值lis[i].addEventListener(mouseenter, function() {animate(cloud, this.offsetLeft - 10);})// (2) 鼠标离开就回到起始的位置lis[i].addEventListener(mouseleave, function() {animate(cloud, current);})lis[i].addEventListener(click, function() {current this.offsetLeft - 10;})}})/script
/head
bodydiv classc-nav idc_navspan classcloud/spanulli classcurrenta href#首页新闻/a/lilia href#师资力量/a/lilia href#活动策划/a/lilia href#企业文化/a/lilia href#招聘信息/a/lilia href#公司简介/a/lilia href#你是佩奇/a/lilia href#啥是佩奇/a/li/ul/div
/body
/html移动端网页特效
1. 触屏事件
1.1 触屏事件概述
移动端浏览器兼容性好我们不需要考虑以前js的兼容性问题可以放心的使用原生js书写效果但是移动端也有自己独特的地方。比如触屏事件touch也称触摸事件Android和iOS都有。
常见的触屏事件如下
触屏touch事件说明touchstart手指触摸到一个dom元素时触发touchmove手指在一个dom元素上滑动时触发touchend手指从一个dom元素上移开时触发 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/style
/head
bodydiv/div
/body
/htmlscriptvar div document.querySelector(div);// 1. 手指触摸DOM元素事件div.addEventListener(touchstart, function() {console.log(我摸了你);})// 2. 手指在DOM元素身上移动事件div.addEventListener(touchmove, function() {console.log(我继续摸);})// 3. 手指离开DOM元素事件div.addEventListener(touchend, function() {console.log(轻轻的我走了);})
/script1.2 触摸事件对象TouchEvent
TouchEvent是一类描述手指在触摸平面触摸屏、触摸板等的状态变化的事件。这类事件用于描述一个或多个触电使开发者可以检测触点的移动触点的增加和减少等等
touchstart、touchmove、touchend三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表
触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素上的手指的一个列表changeTouches手指状态发生了改变的列表从无到有从有道无的变化
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}div {width: 100px;height: 100px;background-color: pink;}/style
/head
bodydiv/div
/body
/htmlscriptvar div document.querySelector(div);// 1. 手指触摸DOM元素事件div.addEventListener(touchstart, function(e) {// console.log(e);// touches 正在触摸屏幕的所有手指的列表// targetTouches 正在触摸当前DOM元素的手指列表// changeTouches 手指状态发生了改变的列表从无到有或者从有到无// 因为我们一般都是触摸元素所以最经常使用的是 targetTouchesconsole.log(e.targetTouches[0]);// targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如手指的坐标等等})// 2. 手指在DOM元素身上移动事件div.addEventListener(touchmove, function() {})// 3. 手指离开DOM元素事件div.addEventListener(touchend, function() {console.log(轻轻的我走了);// 当我们手指离开屏幕的时候就没有了touches和targetTouches列表但是会有changeTouches})
/script1.3 移动端拖动元素
touchstart、touchmove、touchend可以实现拖动元素但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY移动端拖动的原理手指移动中计算出手指移动的距离。然后用盒子原来的位置手指移动的距离手指移动的距离手指滑动中的位置减去 手指刚开始触摸的位置
拖动元素三部曲
触摸元素touchstart获取手指初始坐标同时获得盒子原来的位置移动手指touchmove计算手指滑动的距离并且移动盒子离开手指touchend
注意手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-CompatiblecontentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv/div
/body/htmlscript// 触摸元素touchstart获取手指初始坐标同时获得盒子原来的位置// 移动手指touchmove计算手指滑动的距离并且移动盒子// 离开手指touchendvar div document.querySelector(div);var startX 0;var startY 0; // 手指初始坐标var x 0;var y 0; // 盒子原来的位置div.addEventListener(touchstart, function (e) {// 获取手指初始坐标startX e.targetTouches[0].pageX;startY e.targetTouches[0].pageY;x this.offsetLeft;y this.offsetTop;})div.addEventListener(touchmove, function (e) {// 阻止屏幕滚动的默认行为e.preventDefault();// 计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标var moveX e.targetTouches[0].pageX - startX;var moveY e.targetTouches[0].pageY - startY;// 移动盒子 盒子原来的位置 手指移动的距离this.style.left x moveX px;this.style.top y moveY px;})
/script案例移动端轮播图
移动端轮播图功能和pc端基本一致。
可以自动播放图片手指可以拖动播放轮播图
案例分析
自动播放功能 开启定时器 移动端移动可以使用translate移动
自动播放功能-无缝滚动
注意我们判断条件是要等到图片滚动完毕再去判断就是过渡完成后判断此时需要添加检测过渡完成事件 transitionend判断条件如果索引号等于3说明走到最后一张图片此时索引号要复原为0此时图片去掉过渡效果然后移动
classList属性
classList属性是HTML5新增的一个属性返回元素的类名。但是ie10以上版本支持。
该元素用于在元素中添加移除以及切换css类。有以下方法
添加类
element.classList.add(‘类名’); focus.classList.add(current);移除类
element.classList.remove(‘类名’); focus.classList.remove(current);切换类:
element.classList.toggle(‘类名’); focus.classList.toggle(current);小圆点跟随变化效果
把ol里面li带有current类名的选出来去掉类名 remove让当前索引号的小li加上current add但是是等着过渡结束之后变化所以这个写到transitionend事件里面
手指滑动轮播图
本质就是ul跟谁手指移动简单来说就是移动端拖动元素
触摸元素touchstart: 获取手指初始坐标移动手指touchmove计算手指的滑动距离并且移动盒子手指离开touchend根据滑动的距离分不同的情况如果移动距离小于某个像素就回弹原来位置如果移动距离大于某个像素就上一张下一张滑动。
window.addEventListener(load, function () {// 1. 获取元素var focus document.querySelector(.focus);var ul focus.children[0];var ol focus.children[1];// 获取focus的宽度var w focus.offsetWidth;// 2. 利用定时器自定轮播图片var index 0;var flag false;var timer setInterval(function () {index;var translateX -index * w;ul.style.transition all .4s;ul.style.transform translate( translateX px);}, 2000)// 等着我们过渡完之后再去判断监听过渡完成的事件 transitionendul.addEventListener(transitionend, function () {// 无缝滚动if (index ul.children.length - 2) {index 0;// 去掉过渡效果这样让我们的ul快速的跳到目标位置ul.style.transition none;// 利用最新索引号乘以宽度去滚动图片var translateX -index * w;ul.style.transform translate( translateX px);} else if (index 0) {index ul.children.length - 3;ul.style.transition none;// 利用最新索引号乘以宽度去滚动图片var translateX -index * w;ul.style.transform translate( translateX px);}// (3) 小圆点跟随变化// 1. 把ol里面li带有current类名的选出来去掉类名 removeol.querySelector(li.current).classList.remove(current);// 2. 让当前索引号的小li加上current addol.children[index].classList.add(current);})// (4) 手指滑动轮播图// 1. 触摸元素touchstart: 获取手指初始坐标var startX 0;var moveX 0;ul.addEventListener(touchstart, function (e) {startX e.targetTouches[0].pageX;// 手指触摸的时候停止定时器clearInterval(timer);})// 2. 移动手指touchmove计算手指的滑动距离并且移动盒子ul.addEventListener(touchmove, function (e) {e.preventDefault(); // 阻止屏幕滚动的行为// 计算移动距离moveX e.targetTouches[0].pageX - startX;if (index ul.children.length - 2) {index 0;// 去掉过渡效果这样让我们的ul快速的跳到目标位置ul.style.transition none;// 利用最新索引号乘以宽度去滚动图片var translateX -index * w;ul.style.transform translate( translateX px);} else if (index 0) {index ul.children.length - 3;ul.style.transition none;// 利用最新索引号乘以宽度去滚动图片var translateX -index * w;ul.style.transform translate( translateX px);}// 移动盒子: 盒子原来的位置 手指移动的距离var translateX -index * w moveX;// 手指拖动的时候不需要动画效果所以要取消过渡效果ul.style.transition none;ul.style.transform translate( translateX px);flag true; // 如果用户手指移动过再去判断否则不做判断效果})// 手指离开touchend根据滑动的距离分不同的情况 ul.addEventListener(touchend, function () {// (1) 如果移动距离大于50像素我们就播放上一张或者下一张if (flag) {if (Math.abs(moveX) 50) {// 如果是右划就是播放上一张moveX是正值// if (moveX 0) {// index--;// } else {// // 如果是左划就是播放上一张moveX是负值// index;// }moveX 0 ? index-- : index;var translateX -index * w;ul.style.transition all .4s;ul.style.transform translate( translateX px);} else {// (2) 如果移动距离小于50像素我们就回弹var translateX -index * w;ul.style.transition all .1s;ul.style.transform translate( translateX px);}flag false;}// 手指离开重启定时器clearInterval(timer);timer setInterval(function () {index;var translateX -index * w;ul.style.transition all .4s;ul.style.transform translate( translateX px);}, 2000)})
}) 案例返回顶部
当页面滚动到某个地方就显示否则隐藏
点击可以返回顶部
案例分析
滚动某个地方显示事件scroll页面滚动事件如果被卷去的头部window.scrollY大于某个数值点击window.scroll(0, 0) 返回顶部
2. 移动端常见特效
2.1 click延时解决方案
移动端click事件会有300ms的延时原因是移动端屏幕双击会缩放double tap to zoom页面。
解决方案
禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。 meta nameviewport contentuser-scalableno利用touch事件自己封装这个事件解决300ms延迟。
原理就是
当我们手指触摸屏幕记录当前触摸时间当我们手指离开屏幕用离开的时间减去触摸的时间如果时间小于150ms并且没有滑动屏幕那么我们就定位为点击
// 封装tap解决click 300ms 延时function tap(obj, callback) {var isMove false;var startTime 0; // 记录触摸时候的时间变量obj.addEventListener(touchstart, function(e) {startTime Date.now(); // 记录触摸时间});obj.addEventListener(touchmove, function(e) {isMove true; // 看看是否有滑动有滑动算拖拽不算点击})obj.addEventListener(touchend, function(e) {if (!isMove (Date.now() - startTime 150)) { // 如果手指触摸和离开时间小于150ms算点击callback callback(); // 执行回调函数}isMove false; // 取反 重置startTime 0;})}tap(div, function() {// 执行代码})使用插件。fastclick插件解决300ms延迟。
3. 移动端常用开发插件
3.1 什么是插件
移动端要求的是快速开发所以我们经常会借助于一些插件来帮我们完成操作那么什么是插件呢
js插件就是js文件它遵循一定规范编写方便程序展示效果拥有特定功能且方便调用。如轮播图和瀑布流插件。
特点它一般是为了解决某个问题而专门存在其功能单一并且比较小。
我们以前写的animate.js也算一个最简单的插件
fastclick插件解决300ms延迟。使用延时
GitHub官网地址https://github.com/ftlabs/fastclick
3.2 插件的使用
引入js文件按照相关插件规定语法使用
3.3 Swiper插件的使用
中文官网地址https://www.swiper.com.cn/
引入插件相关文件按照规定语法使用
3.4 其他移动端常见插件
superslidehttp://www.superslide2.com/iscrollhttps://github.com/cubiq/iscroll
3.5 插件的使用总结
确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件查看需要引入的相关文件并且引入复制demo实例文件中的结构html样式css以及js代码
3.6 练习-移动端视频插件 zy.mdeia.js
H5给我们提供了video标签但是浏览器的支持情况不同。
不同的.视频格式文件我们可以通过source解决。
但是外观样式还有暂停播放全屏等功能我们只能自己写代码解决。
这个时候我们可以使用插件方式来制作。
4. 移动端常用开发框架
4.1 框架概述
框架顾名思义就是一套架构它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身使用者要按照框架所规定的某种规范进行开发。
插件一般是为了解决某个问题而专门存在其功能单一并且比较小。
前端常用的框架有Bootstart、Vue、Angular、React等。既能开发pc端也能开发移动端
前端常用的移动端插件有swiper、superslide、iscroll等。
框架大而全一整套解决方案
插件小而专一某个功能的解决方案
本地存储
1. 本地存储
随着互联网的快速发展基于网页的应用越来越普遍同时也变的越来越复杂为了满足各种各样的需求会经常性在本地存储大量的数据HTML5规范提出了相关解决方案
本地存储特性
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大sessionStorage约5M、localStorage约20M只能存储字符串可以将对象JSON.stringify()编码后存储
fastclick插件解决300ms延迟。使用延时
GitHub官网地址
2.window.sessionStorage
生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用
存储数据 sessionStorage.setItem(key, value)获取数据 sessionStorage.getItem(key)删除数据 sessionStorage.removeItem(key)删除所有数据
sessionStorage.clear()!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title本地存储之sessionStorage/title
/headbodyinput typetext autofocusautofocusbutton classset存储数据/buttonbutton classget获取数据/buttonbutton classremove删除数据/buttonbutton classdel清空所有数据/button
/body/htmlscriptvar ipt document.querySelector(input);var set document.querySelector(.set)var get document.querySelector(.get)var remove document.querySelector(.remove)var del document.querySelector(.del)var flag 0;var num 0;set.addEventListener(click, function () {// 当我们点击了之后, 就可以把表单里面的数据存储起来// console.log(11);var val ipt.valueif (ipt.value ) {alert(请输入内容啦,小伙计)} else {if (flag 0) {sessionStorage.setItem(username, val)flag 1;ipt.value } else if (flag 1) {sessionStorage.setItem(pwd, val)flag 2;ipt.value } else if (sessionStorage.getItem(username) null sessionStorage.getItem(pwd) null) {flag 0} else {alert(超出存储数量了啦!)}}})get.addEventListener(click, function () {console.log(sessionStorage.getItem(username));})remove.addEventListener(click, function () {if (sessionStorage.getItem(username) null sessionStorage.getItem(pwd) null) {alert(没有数据可删了啦, 不要再点啦)} else if (num 0) {sessionStorage.removeItem(username)num 1;ipt.value } else {sessionStorage.removeItem(pwd)num 0;ipt.value }})del.addEventListener(click, function () {if (sessionStorage.getItem(username) null sessionStorage.getItem(pwd) null) {alert(没有数据可删了啦, 不要再点啦)} else {sessionStorage.clear()ipt.value }})document.addEventListener(keyup, function (e) {if (e.keyCode 13) {set.click()}})
/script3.window.localStorage
生命周期永久生效除非手动删除否则关闭页面也会存在可以多窗口(页面)共享(同一个浏览器可以共享)以键值对的形式存储使用
存储数据 localStorage.setItem(key, value)获取数据 localStorage.getItem(key)删除数据 localStorage.removeItem(key)删除所有数据
localStorage.clear()!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title本地存储之localStorage/title
/headbodyinput typetext autofocusautofocusbutton classset存储数据/buttonbutton classget获取数据/buttonbutton classremove删除数据/buttonbutton classdel清空所有数据/button
/body/htmlscriptvar ipt document.querySelector(input);var set document.querySelector(.set)var get document.querySelector(.get)var remove document.querySelector(.remove)var del document.querySelector(.del)var flag 0;var num 0;set.addEventListener(click, function () {// 当我们点击了之后, 就可以把表单里面的数据存储起来// console.log(11);var val ipt.valueif (ipt.value ) {alert(请输入内容啦,小伙计)} else {if (flag 0) {localStorage.setItem(username, val)flag 1;ipt.value } else if (flag 1) {localStorage.setItem(pwd, val)flag 2;ipt.value } else if (localStorage.getItem(username) null localStorage.getItem(pwd) null) {flag 0;} else {alert(超出存储数量了啦!)}}})get.addEventListener(click, function () {console.log(localStorage.getItem(username));})remove.addEventListener(click, function () {if (localStorage.getItem(username) null localStorage.getItem(pwd) null) {alert(没有数据可删了啦, 不要再点啦)} else if (num 0) {localStorage.removeItem(username)num 1;ipt.value } else {localStorage.removeItem(pwd)num 0;ipt.value }})del.addEventListener(click, function () {if (localStorage.getItem(username) null localStorage.getItem(pwd) null) {alert(没有数据可删了啦, 不要再点啦)} else {localStorage.clear()ipt.value }})document.addEventListener(keyup, function (e) {if (e.keyCode 13) {set.click()}})
/script案例记住用户名
如果勾选记住用户名下次用户打开浏览器就在文本框里面自动显示上次登录的用户名
案例分析
把数据存起来用到本地存储关闭页面也可以显示用户名所以用到localStorage打开页面先判断是否有这个用户名如果有就在表单里面显示用户名并且勾选复选框当复选框发生改变的时候change事件如果勾选就存储否则就移除
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title记住用户名/title
/head
bodyinput typetext idusernamelabel forrememberinput typecheckbox namecheckbox idremember记住用户名/label
/body
/htmlscriptvar username document.querySelector(#username)var remember document.querySelector(#remember)if (localStorage.getItem(username)) {username.value localStorage.getItem(username)remember.checked true;}remember.addEventListener(change, function() {if (this.checked) {localStorage.setItem(username, username.value)} else {localStorage.removeItem(username)}})
/script案例toDoList
刷新页面不会丢失数据因此需要用到本地存储localStorage核心思路不管按下回车还是点击复选框都是把本地存储的数据加载到页面中这样保证刷新页面不会丢失数据存储的数据格式var todolist [{title: ‘xxx’, done: false}]注意点1本地存储localStorage里面只能存储字符串格式因此需要把对象转换为字符串JSON.stringify(data)注意点2获取本地存储数据需要把里面的字符转换为对象格式JSON.parse()我们才能使用里面的数据
toDoList按下回车把新数据添加到本地存储里面
切记页面中的数据都要从本地存储里面获取这样刷新页面不会丢失数据所以先要把数据保存到本地存储里面利用事件对象.keyCode判断用户按下回车键(13)声明一个数组保存数据先要把读取本地存储原来的数据(声明函数getData())放到这个数组里面之后把最新从表单获取过来的数据追加到数组里面最后把数组存储给本地存储(声明函数setDate())
toDoList本地存储数据渲染加载到页面
因为后面也会经常渲染加载操作所以声明一个函数load方便后面调用先要读取本地存储数据。(数据不要忘记转换为对象格式)之后遍历这个数据有几条数据就生成几个小li添加到ol里面每次渲染之前先把原先里面ol的内容清空然后渲染加载最新的数据
toDoList删除操作
点击里面的a链接不是删除的li而是删除本地存储对应的数据核心原理先获取本地存储数据删除对应的数据保存给本地存储重新渲染列表li我们可以给链接自定义属性记录当前的索引号根据这个索引号删除相关的数据----数组的splice(i, 1)方法存储修改后的数据然后存储给本地存储重新渲染加载数据列表因为a是动态创建的我们要写在创建a的函数内
toDoList正在进行和已完成选项操作
当我们点击了小的复选框修改本地存储数据再重新渲染数据列表点击之后获取本地存储数据修改对应数据属性done为当前复选框的checked状态之后保存数据到本地存储重新渲染加载数据列表load加载函数里面新增一个条件如果当前数据的done为true就是已经完成的就把列表渲染加载到ul里面如果当前数据的done为false则是待办事项就把列表渲染加载到ol里面
toDoList统计正在进行个数和已经完成个数
在我们load函数里面操作声明2个变量todoCount待办个数 doneCount已完成个数当进行遍历本地存储数据的时候如果数据done为false则todoCount否则doneCount最后修改相应的元素innerHTML
toDolist修改本地存储数据
当我们点击了li就让当前小li中的p隐藏插入input标签在p后面并把p元素内的元素给input的value循环当前小li中所有的input标签判断个数小于2的话就插入input防止重复插入利用focus()方法自动获取input焦点selectionEnd 文本框内容的长度将文本框内光标定位于最后将修改之后的内容给本地存储对应的数据并保存到本地存储
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleToDoList—最简单的待办事项列表/titlemeta namedescription contentToDoList无须注册即可使用数据存储在用户浏览器的html5本地数据库里是最简单最安全的待办事项列表应用link relstylesheet hrefcss/todolist.cssscript srcjs/todolist.js/script
/headbodyheadersectionform actionjavascript:; idformlabel fortitleToDoList/labelinput typetext idtitle nametitle placeholder添加ToDo requiredrequiredautofocusautofocus maxlength40 autocompleteoff/form/section/headersectionh2正在进行 span idtodocount/span/h2ol idtodolist classdemo-box/olh2已经完成 span iddonecount/span/h2ul iddonelist/ul/sectionfooterCopyright copy; 2014 todolist.cn nbsp;a hrefjavascript: void(0); classclearclear/a/footer
/body/html* {margin: 0;padding: 0;box-sizing: border-box;
}body {background-color: #cdcdcd;font-family: Courier New, Courier, monospace;
}button,
input {border: 0;
}label {cursor: pointer;
}header {width: 100vw;height: 52px;background-color: #323232;
}header section {color: #ddd;font-size: 24px;
}header section input {float: right;width: 60%;height: 27px;padding-left: 6px;margin-top: 13px;border-radius: 6px;border: 1px solid #ccc;box-shadow: 0 0 6px -2px rgba(0, 0, 0, .9) inset;outline: none;
}section {width: 650px;height: 52px;line-height: 52px;margin: 0 auto;
}li {overflow: hidden;text-overflow: ellipsis;position: relative;width: 100%;height: 40px;line-height: 40px;font-size: 16px;background-color: #fff;border: 1px solid #ccc; border-radius: 4px;cursor: move;list-style: none;margin-top: 10px;box-shadow: 0 6px 6px -1px rgba(0, 0, 0, .2);color: #666;
}li::before {content: ;position: absolute;top: 0;left: 0;width: 6px;height: 40px;background-color: #629a9c;border-radius: 4px 0 0 4px;border: 1px solid #ccc;
}li input {position: absolute;top: 8px;left: 24px;width: 24px;height: 24px;cursor:pointer;opacity: .6;outline: none;
}li input[typetext] {width: 64%;height: 24px;font-size: 14px;font-family: Courier New, Courier, monospace;color: #000;border: 1px solid #4f4f4f;border-radius: 4px;margin-left: 40px;padding: 8px;
}li p {margin-left: 72px;
}li a {position: absolute;top: 7px;right: 8px;width: 24px;height: 24px;line-height: 24px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;background-color: #999;border-radius: 50%;text-decoration: none;
}#donelist li {background-color: #e6e6e6;color: #676767;opacity: .9;
}section h2 {position: relative;margin: 20px 0;
}#todocount,
#donecount {position: absolute;top: 16px;right: 0;width: 24px;height: 24px;line-height: 22px;text-align: center;font-size: 12px;color: #666;background-color: #e6e6fa;border: 1px solid #ccc;border-radius: 50%;
}#donelist li::before {background-color: #b3b3b3;
}footer {position: fixed;top: 90%;left: 50%;margin-top: 20px;color: #666;font-size: 14px;transform: translateX(-50%);
}footer a {text-decoration: none;color: #999;
}window.addEventListener(load, function () {var ipt document.querySelector(input) // 获取input输入框var ol document.querySelector(#todolist) // 获取正在进行下面的olvar ul document.querySelector(#donelist) // 获取已经完成下面的ulvar ToDoList document.querySelector(label) // 获取ToDoListconsole.log(ToDoList);// 获取正在进行数量统计var todocount document.querySelector(#todocount)// 获取已经完成数量统计var donecount document.querySelector(#donecount)// 获取clear清除所有数据链接var clear document.querySelector(.clear)// 定义全局变量var index 0;var li null;var checkbox null;var p null;var as null;var text null;// 禁止用户选中document.addEventListener(selectstart, function(e) {e.preventDefault();})// 点击ToDoList之后刷新页面ToDoList.addEventListener(click, function() {location.reload()})// 页面加载完毕时调用一次页面渲染函数load()ipt.addEventListener(keyup, function (e) {// 判断用户是否按下了回车键if (e.keyCode 13) {// 判断输入框内容是否为空if (ipt.value ! ) {// 获取本地存储的数据var data getDate(todolist)// console.log(data);// 将输入框中的内容取过来插入给datadata.push({ title: this.value, done: false })// console.log(data);// 将data里面的数据保存进本地存储setDate(todolist, data)// 重新渲染页面load()// 清空输入框内容ipt.value } else {// 如果为空弹出警示框, 提醒用户输入内容alert(请输入内容啦笨蛋)}}})// 清除本地存储所有数据clear.addEventListener(click, function () {localStorage.clear()// 重新渲染页面load()})// 读取本地存储数据函数function getDate(name) {var data localStorage.getItem(name)// console.log(data);if (data ! null) {return JSON.parse(data)} else {return []}}// 保存本地存储数据函数function setDate(name, ele) {localStorage.setItem(name, JSON.stringify(ele))}// 页面渲染函数function load() {// 获取本地存储的数据var date getDate(todolist)// 声明变量统计正在进行的数量var todoCount 0;// 声明变量统计已经完成的数量var doneCount 0;// console.log(date);// 每次生成元素渲染页面时, 清空ol和ul里面的内容ol.innerHTML ul.innerHTML // 动态生成元素函数function generate(ele) {// 动态生成li、input、p以及a标签li document.createElement(li)checkbox document.createElement(input);p document.createElement(p)as document.createElement(a)// 为每个a链接的href做赋值操作as.href javascript: void(0);;as.innerHTML × // 每个a链接的内容设置为×// 默认隐藏aas.style.display none// 将本地存储数组对象中所有title属性的值赋值给pp.innerHTML date[i].title// 设置input的样式为复选框checkbox.type checkbox// 将复选框插入到li的最前面li.insertBefore(checkbox, li.children[0])// 将p插入到复选框的后面li.insertBefore(p, li.children[1])// 将a插入到li的最后面li.appendChild(as)// 将生成的li插入到ele里面ele.insertBefore(li, ele.children[0])}for (var i 0; i date.length; i) {// console.log(date[i].done);// generate(ol)// 判断本地存储数据中的done是否为true, 如果是就生成元素到ul(已经完成)里面, 并且修改复选框为选定状态和让已经完成数量1if (date[i].done) {generate(ul)checkbox.checked truedoneCount} else {// 反之, 则生成元素到ol(正在进行)中也让正在进行数量统计加1generate(ol)todoCount}// 给a设置自定义属性as.setAttribute(data-index, i)// 为动态生成的a链接绑定点击事件, 注意一定要写在创建a链接的for循环里as.addEventListener(click, function () {// 得到当前a链接的索引号index this.getAttribute(data-index)// console.log(index);// 删除当前a链接对应的本地存储数据date.splice(index, 1)// 将删除后的数组重新赋值给本地存储// console.log(date[index]);setDate(todolist, date)// 重新渲染页面load()})// 为动态生成的复选框绑定点击事件, 注意点同上面a链接checkbox.addEventListener(change, function () {// console.log(this.checked);// console.log(date);// 得到当前a链接的索引号var index this.nextElementSibling.nextElementSibling.getAttribute(data-index)// console.log(index);// console.log(date[index].done);// 将对应本地存储数据的done属性修改为当前复选框的选定状态date[index].done this.checkedsetDate(todolist, date)load()})// 给每个li标签绑定点击事件li.addEventListener(click, function () {// 创建input标签text document.createElement(input)// 获取当前li标签所在的a的索引号, 从而得到li的索引var index this.children[2].getAttribute(data-index)// 获取当前li里面的p元素var p this.children[1];// 获取当前li里面所有的input标签var texts this.querySelectorAll(input);// 判断input标签个数, 如果小于2则像li里面插入textif (texts.length 2) {this.insertBefore(text, this.children[2])}// console.log(p);// console.log(index);// 将p元素的内容赋值给text的valuetext.value p.innerHTML// 设置input样式为文本框text.type text// 自动获取焦点text.focus()// 将input内部光标定位到input内容部分最后面text.selectionStart text.selectionEnd text.value.length; // 这一步虽然是多余的但是是本着练习语法的心态写上的欸嘿~// 默认全选中input内容// text.select();// this.replaceChild(text, p) // text替换p元素// 隐藏p元素p.style.display none// 选中内容从最前面到内容长度的一半位置 // text.setSelectionRange(0, text.value.length / 2)text.addEventListener(blur, function () {// 如果当前的表单的值不为空就修改数据if (this.value ! ) {date[index].title this.value;// 将修改之后的数据插入本地存储setDate(todolist, date)load()} else {alert(请输入内容啦笨蛋);load();}})// 文本框绑定键盘事件text.addEventListener(keyup, function (e) {// 用户按下回车就执行以下代码if (e.keyCode 13) {// 将修改之后的数据插入本地存储setDate(todolist, date)load(); }})})// 鼠标经过li显示ali.addEventListener(mouseover, function () {this.lastElementChild.style.display block})// 鼠标经过li隐藏ali.addEventListener(mouseout, function () {this.lastElementChild.style.display none})}// 将计算好的数量统计分别赋值给正在进行和已经完成donecount.innerHTML doneCounttodocount.innerHTML todoCount}
})数据可视化项目
1. 什么是数据可视化
1.1 数据可视化
数据可视化主要目的借助于图形化手段清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形揭示蕴含在数据中的规律和道理。
1.2 数据可视化的场景
目前互联网公司通常有这么几个大类的可视化需求
通用报表移动端图表大屏可视化图编辑图分析地里可视化
1.3 常见的数据可视化库
D3.js 目前Web端评价最高的JavaScript可视化工具库入手难ECharts.js 百度出品的一个开源JavaScript数据可视化库Highcharts.js 国外的前端数据可视化库非商用免费被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts和ECharts就像是Office和WPS的关系
1.4 小结
数据可视化主要目的借助于图形化手段清晰有效地传达与沟通信息数据可视化在我们互联网公司中经常用于通用数据报表移动端图表大屏可视化图编辑等数据可视化库有很多接下来我们重点学习ECharts
2. 数据可视化项目概述
2.1 项目目的
市场需求
应对现在数据可视化的趋势越来越多企业需要在很多场景营销数据生成数据用户数据下使用**可视化图标**来展示提现数据让数据更加直观数据特点更加突出
学习阶段需求
项目对我们同学来说起着**承上启下**的作用。
承上
复习以前学习内容HTML5 CSS3 布局相关技术JavaScript \ jQuery 相关技术
启下
为学习服务器编程做铺垫如果把服务器里面的数据渲染到页面中
2.3 项目技术
HTML5 CSS3 布局CSS3动画、渐变flex布局和rem适配方案图片边框border-imageES6模板字符ECharts可视化库等等
2.4 小结
数据可视化项目展示学习这个项目的目的市场需求和学习阶段需求项目用到的技术以前学习过的技术和新技术 CSS3动画、渐变jQuery库 原生JavaScriptflex布局和rem适配方案图片边框border-imageES6模板字符ECharts可视化库等等
3. ECharts简介
ECharts是一个使用JavaScript实现的开源可视化库可以流畅的运行在pc和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库ZRender提供直观交互丰富可高度个性化定制的数据可视化图标。
官网地址https://www.echartsjs.com/zh/index.html
官网地址https://echarts.apache.org
丰富的可视化类型多种数据格式支持流数据的支持移动端优化跨平台使用绚丽的特效详细的文档说明
4. ECharts的基本使用
4.1 ECharts使用五步曲
注意这里只要求记住ECharts使用的步骤具体修改定制稍后会讲。 步骤一下载并引入echarts.js文件 ——————- 图标依赖这个js库 步骤二准备一个具备大小的DOM容器 ———————- 生成的图标会放入这个容器内 步骤三初始化echarts实例对象 ————————– 实例化echarts对象 步骤四指定配置项和数据option————————– 根据具体需求修改配置选项 步骤五将配置设置得echarts实例对象 ———————– 让echarts对象根据修改好的配置生效 准备一个具备大小的DOM容器 div idmain stylewidth: 600px; height: 400px;/div初始化echarts实例对象 var myChart echarts.init(document.getElementById(main));指定配置项和数据 // 指定图表的配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};4.3 相关配置讲解
title标题组件tooltip提示框组件legend图例组件grid直角坐标系内绘图网格XAxis直角坐标系grid中的x轴yAxis直角坐标系grid中的y轴series系列列表。每个系列通过type决定自己的图表类型什么类型的图表color调色盘颜色列表
先了解以上9个配置的作用其余配置还有具体细节通过查阅文档文档菜单-配置项手册
学echarts关键在于学会查阅文档根据需求修改配置 grid: {left: 0%,right: 0%,bottom: 3%,// 当刻度标签溢出的时候grid区域是否包含坐标轴的刻度标签。如果为true则显示// 如果left right等设置为0%刻度标签就溢出了此时决定是否显示刻度标签containLabel: true}series系列列表 type类型什么类型的图表比如line是折线bar柱形等 name系列名称用于tooltip的显示legend的图例筛选变化 stack数据堆叠。如果设置相同值则会数据堆叠。 数据堆叠第二个数据值 第一个数据值 第二个数据值 第三个数据值 第二个数据值 第三个数据值…. 依次叠加 如果给stack指定不同值或者去掉这个属性则不会发生数据堆叠
5. 数据可视化项目适配方案
5.1 项目需求
设计稿是1920pxPC端适配宽度在1024~1920之间页面元素宽高自适应
5.2 适配方案
flexible.js
检测浏览器宽度
修改html文字大小
rem单位
页面元素根据rem适配大小
配合cssrem插件
flex布局
页面快速布局
flexible.js把屏幕分为24等份PC端的效果图是1920pxcssrem插件的基准值是80pxrem值自动生成
要把屏幕约束在1024~1920之间有适配 media screen and (max-width: 1024px) {html {font-size: 42.66px!important;}}media screen and (min-width: 1920px) {html {font-size: 80px!important;}}6. 数据可视化项目开发
6.1 边框图片
边框图片的使用场景边框图片的切图原理边框图片语法规范
盒子大小不一但是边框样式相同此时就需要边框图片来完成
为了实现丰富多彩的边框效果在CSS3中新增了border-image属性这个新属性允许指定一幅图像作为元素的边框。
1. 边框图片切图原理重要
把四个角切出去九宫格的由来中间部分可以铺排拉伸或者环绕。
2. 边框图片语法重要
属性描述border-image-source用在边框的图片的路径。哪个图片border-image-slice图片边框向内偏移。裁剪的尺寸一定不加单位上右下左顺序border-image-width图片边框的宽度需要加单位(不是边框的宽度是边框图片的宽度)border-image-repeat图像边框是否应平铺repeat、铺满round或拉伸stretch默认拉伸
6.2 公共面板样式开发
面板类.panel
border-image-slice按照 上右下左顺序切割
/* 公共面板样式 */
.panel {position: relative;border: 15px solid transparent;border-width: .6375rem .475rem .25rem 1.65rem;border-image-source: url(../images/border.png);border-image-slice: 51 38 20 132;margin-bottom: .25rem;
} .panle h3 {color: #fff;font-size: .35rem;margin-bottom: .15rem;
}.inner {position: absolute;top: -.6375rem;right: -.475rem;bottom: -0.25rem;left: -1.65rem;padding: .3rem .45rem;
}6.3 通过类名调用字体图标
HTML页面引入字体图标中css文件。标签直接调用图标对应的类名即可。类名在css文件中标注
引入css文件和声明字体图标的时候一定注意路径问题。
6.4 立即执行函数用法
JS文件中会有大量的变量命名特别是ECharts使用中需要大量初始化ECharts对象
为了防止变量名冲突变量污染我们采用立即执行函数策略 (function () {}) ();(function () {var num 10;}) ();(function () {var num 10;}) ();6.5 无缝滚动原理
先克隆marquee里面所有的行row通过css3动画滚动marquee鼠标经过marquee就停止动画 animation-play-state: paused;// 先克隆marquee里面所有的行rowvar rows null;var newRows null;for (var i 0; i marquees.length; i) {rows marquees[i].querySelectorAll(.row)for (var j 0; j rows.length; j) {newRows rows[j].cloneNode(true);marquees[i].appendChild(newRows);}}.marquee-view .marquee {position: absolute;display: flex;flex-direction: column;width: 100%;animation: move 15s linear infinite;
}/* 通过css3动画滚动marquee */
keyframes move {from {}to {transform: translateY(-50%);}
}/* 鼠标经过marquee就停止动画 */
.marquee-view .marquee:hover {animation-play-state: paused;
}6.6 点位分析模块-使用ECharts图表
先官网找到类似的图表引入到页面中根据需求修改具体的配置
1. 引入图表
// 点位分布统计模块(function() {// 1. 实例化ECharts对象var myCharts echarts.init(document.querySelector(.pie));// 2. 指定配置项和数据var option {tooltip: {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},series: [{name: Area Mode,type: pie,radius: [20, 140],center: [75%, 50%],roseType: area,itemStyle: {borderRadius: 5},data: [{ value: 30, name: rose 1 },{ value: 28, name: rose 2 },{ value: 26, name: rose 3 },{ value: 24, name: rose 4 },{ value: 22, name: rose 5 },{ value: 20, name: rose 6 },{ value: 18, name: rose 7 },{ value: 16, name: rose 8 }]}]};// 3. 配置项和数据给实例化对象myCharts.setOption(option);}) ();2. 定制图表
第一步参考官方列子熟悉里面参数具体含义
var option {tooltip: {trigger: item,formatter: {a} br/{b} : {c} ({d}%)},series: [{name: Area Mode,type: pie,radius: [20, 140],center: [75%, 50%],roseType: area,itemStyle: {borderRadius: 5},data: [{ value: 30, name: rose 1 },{ value: 28, name: rose 2 },{ value: 26, name: rose 3 },{ value: 24, name: rose 4 },{ value: 22, name: rose 5 },{ value: 20, name: rose 6 },{ value: 18, name: rose 7 },{ value: 16, name: rose 8 }]}]};第二步按照需求定制
需求1颜色设置 color : [#006cff, #60cda0, #ed8884, #ff9f7f, #0096ff, #32c5e9, #1d9dff]需求2修改饼形图大小series对象 radius: [10%, 70%],需求3数据使用更换series对象里面data对象 { value: 20, name: 云南 },{ value: 26, name: 北京 },{ value: 24, name: 山东 },{ value: 25, name: 河北 },{ value: 20, name: 江苏 },{ value: 25, name: 浙江 },{ value: 30, name: 四川 },{ value: 42, name: 湖北 }需求4字体略小些 10px series对象里面设置
饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label对象设置
series: [{// 图表名称name: 点位统计,// 图表类型type: pie,// 南丁格尔玫瑰图有两个圆内圆半径10%外圆半径70%// 饼形图半径。可以是像素也可以是百分比(基于图表bom容器的半径 第一项是内半径第二项是外半径)radius: [10%, 70%],// 图表中心位置left 50% top 50% 距离图表DOM容器center: [50%, 50%],// radius 半径模式另外一种是area面积模式roseType: radius,// 数据集 value 数据的值 name 数据的名称data: [{ value: 20, name: 云南 },{ value: 26, name: 北京 },{ value: 24, name: 山东 },{ value: 25, name: 河北 },{ value: 20, name: 江苏 },{ value: 25, name: 浙江 },{ value: 30, name: 四川 },{ value: 42, name: 湖北 }],// 文本标签控制饼形图文字的相关样式注意它是一个对象label: {fontSize: 10}}]需求5防止缩放的时候引导性过长。引导线略短些series对象里面的labelLine对象设置 连接图表6px连接文字8px // 引导线调整labelLine: {// 连接扇形图线长length: 6,// 连接文字线长length2: 8}6.7 ES6模板文字 var star {name: 刘德华,age: 18};// 以前的写法 拼接的时候引号很容易出问题console.log(我的名字是 star.name 我的年龄是 star.age);// ES6 模板字符写法console.log(我的名字是${star.name}我的年龄是${star.age});console.log(span${star.name}/spanspan${star.age}/span);/script
