(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法 一

最新推荐文章于 2020-11-01 21:14:44 发布
最新推荐文章于 2020-11-01 21:14:44 发布
阅读量141 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000014809804
版权

(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法 一

github
预览

页面滚动demo

元素的 scroll 事件处理函数。

语法 element.onscroll = functionReference 参数 functionReference是一个函数的引用。
当该元素滚动时，会执行该函数。

window.onscroll事件是当窗口发生滚动得时候触发的事件

Window.scrollY返回文档在垂直方向已滚动的像素值。
MDN

<a href="#" id="a"><span id="span">点我触发点击事件</span></a>
<script>
    a.onclick = function (x) {
        console.log(x.target);
        console.log(x.currentTarget);
    }
</script>

实际上点到了span上面
a.target是用户操作的
a.currentTarget是监听的
打印如下:
CwMDht.png

nodetype

https://developer.mozilla.org...
下一个 兄弟子节点

let a = x.currentTarget;
            let brother = a.nextSibling;
            while (brother.nodeType === 3){
                // brother.nodeType === 3说明brother还是回车或者文字或者空格,循环到他不是为止
                brother = brother.nextSibling;
            }

或者

while (brother.tagName !== 'UL'){
                // brother.nodeType === 3说明brother还是回车或者文字或者空格,循环到他不是为止
                brother = brother.nextSibling;
            }

tagName返回的是大写的标签名

获取所有满足条件的结点

let liTags = document.querySelectorAll('nav.meau > ul > li');

transition过渡注意点

过不不能操控的元素有margin,display

一般用来操控:
宽高width,height
定位后的right,left等
透明度opacity
阴影box-shadow

利用纯CSS实现子菜单的滑动出现与滑动消失

demo预览地址
核心是transition(过渡),但是仍未解决transition对display无效的问题.
目前只做到,让其透明读变成0,近似消失.

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transitionTest</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 400px;
            margin: 100px auto 0;
        }

        .nav > li {
            display: inline-block;
            position: relative;

        }

        .nav > li::after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 5px;
            background-color: orange;
            top: 100%;
            left: 0;
            transition: all .5s;
        }

        .nav > li > a {
            display: inline-block;
            padding: 10px;
            border: 1px solid red;
        }

        .submeau {
            /*display: none;*/
            position: absolute;
            right: 100%;
            top: 120%;
            white-space: nowrap;
            border: 1px solid blue;
            padding: 20px;
            transition: all .5s;
            opacity: 0;
            /*margin-right: 100%;*/
        }

        .nav>li:hover::after{
            width: 100%;
        }
        .nav>li:hover .submeau{
            opacity: 1;
            /*margin-left: 0;*/
            right: 0;
        }
    </style>
</head>
<body>

<ul class="nav">
    <li>
        <a href="#">
            作品
        </a>
        <ul class="submeau">
            <li>js</li>
            <li>CSS</li>
            <li>啊可接受的管理会计ad佛罗伦萨放得开是龙卷风的恐惧感</li>
        </ul>
    </li>
    <li>
        <a href="#">
            博客
        </a>
        <ul class="submeau">
            <li>245345345</li>
            <li>346</li>
            <li>啊实34534543打实大师的</li>
        </ul>
    </li>
    <li>
        <a href="#">
            我的联系电话
        </a>
    </li>
</ul>

</body>
<script>
    // 下面代码仍然没有解决transition和display冲突的问题

    // let nav = document.getElementsByClassName('nav')[0];
    // let liarr = nav.querySelectorAll('.nav>li');
    // // console.log(liarr)
    // for (let i = 0; i < liarr.length; i++) {
    //     liarr[i].onmouseenter = function (x) {
    //         let submeau = liarr[i].getElementsByClassName('submeau')[0];
    //
    //             submeau.style.display ='block';
    //             // submeau.css("display");
    //
    //     };
    //
    //     liarr[i].onmouseleave = function (x) {
    //         let submeau = liarr[i].getElementsByClassName('submeau')[0];
    //         setTimeout(function () {
    //             submeau.style.display ='none';
    //         },500)
    //     }
    // }
</script>
</html>

preventDefault()禁止默认动作

a.onclick = function (x) {
            x.preventDefault();//禁止默认动作.即禁止a标签的默认锚点跳转动作
        }

a.href和 a.getAttribute('href')区别

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默认动作.即禁止a标签的默认锚点跳转动作
            let a = x.currentTarget;
            console.log(a.href);
           console.log( a.getAttribute('href'));

        }

a.href返回的是带域名的href的值
a.getAttribute('href')就返回href里面的值

CwbHzD.png

Element.getBoundingClientRect()

弄清元素距离页面顶部的距离和距离视口顶部的距离:
页面顶部指的是整个网页的顶部,即随着页面的滚动,元素距离页面顶部的距离不会变化.

  1. window.scrollX

window.scrollY是网页滚动的距离,即视口顶部距离网页顶部的距离.

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。
  1. Element.getBoundingClientRect().top是元素Element距离视口顶部的距离
    参考这里Element.getBoundingClientRect()

  2. element.offsetTop是元素顶部距离网页最上层的距离

    HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

    offsetTop

element.offsetTop等于Element.getBoundingClientRect().top + window.scrollX

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默认动作.即禁止a标签的默认锚点跳转动作
            let a = x.currentTarget;
            // console.log(a.href);
            let href = a.getAttribute('href')//'#siteSkills'
            let element = document.querySelector(href);

            console.log('element.getBoundingClientRect().top为:'+element.getBoundingClientRect().top);
            console.log('(window.scrollY为:'+window.scrollY);
            console.log('上面两个的和为'+(element.getBoundingClientRect().top+window.scrollY));//相加等于offsetTop
            console.log('element.offsetTop为:'+element.offsetTop)//只读属性

        }

CwxrnS.png

Cwxs0g.png

window.scrollTo(x,y)滚动到文档中的某个坐标.

窗口移动到相应位置(网页左上角的移动到(x,y)

document.querySelector()

document.querySelector()返回的是一个元素,

但是区别于:document.querySelectorAll('nav>ul>li>a')
返回的是数组

weixin_34239592
关注
设计师需要掌握的网站设计相关知识、技巧、工具以及在建站过程中遇到的常见问题和解决方案
AI天才研究院
08-07 1233
一个设计师的手册：关于网站设计的一切你需要知道”，本文全面系统地介绍了设计师需要掌握的网站设计相关知识、技巧、工具以及在建站过程中遇到的常见问题和解决方案，从基础知识到常用效果、细节调整、模板制作、SEO优化，都有详尽的阐述。相信对正在进行或准备开设网站设计课程的人士和希望提高自己设计能力的同学来说，这篇文章能够帮助你快速入门并上路。
JavaScript 复习笔记（巩固学习JavaScript一篇就够）JavaScript基础快速入门
华夏天骄
05-29 2214
Javascript复习笔记 最近找了一些教程重新学习（复习） JavaScript，顺道将学习内容整理成笔记，巩固所学知识，同时也参考一些博客，书籍上的内容，查漏补缺，给自己充充电???????? 工欲善其事，必先利其器，为了提高开发效率，前端开发首选：VSCode（Visual Studio Code）。 初识JavaScript **「创始人」**布兰登·艾奇(Brendan Eich),起初命名为LiveScript后来Sun公司收购并改名为JavaScript。 **「JavaScript」*
js代码实现填写简历时“添加项目经历”功能
lidiansheng的专栏
12-06 2657
New Document var index=0; function addedu(){ //alert(index); var edu=document.getElementById("education"); var current = document.getElementById("current_edu"
Csdn 之"添加javascript特效"
while（true）
11-24 621
 一、 在自定义css样式中输入   将css代码段结束； 二、 在   后面输入 js代码； 三、 保存配置就可以有你输入的js特效啦。  由于本人对js不是很熟悉，这里就不写例子了，希望有好设计的博友们能分享一下你们的代码。  该bug已被修复，暂时无法使用了
(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法 二
weixin_34148340的博客
05-26 83
(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法 二 github预览 点击菜单滚动动画首页 let top = element.offsetTop; let targetTop = top-80;//目标位置,当作终点坐标 let currentTop = window....
js页面载入特效如何实现
weixin_33974433的博客
07-02 239
js页面载入特效如何实现 一、总结 一句话总结：可以加选择器（里面的字符串）作为参数，这样函数就可以针对不同选择器，就很棒了。   1、特效的原理是什么？ 都是通过标签的位置和样式来实现特效的。     二、js页面载入特效如何实现 1 /* 2 * 1、每种特效分为快中慢（l，m，s） 3 * 2、弄一个随机特效函数random，通过数组实现，也分为快中慢（...
用jquery做的一个特效
04-18
这是用jquery实现的一个动态导航，很简单，也很实用，可以学习学习
JavaScript制作简单动画特效及注意问题（个人整理笔记）
Kami丶
09-22 1958
个人理解：所谓的动画，就是利用定时器，把元素的属性按某一规律变化的过程。 在函数内利用参数当css属性时，style[attr] &amp;amp;amp;lt;==&amp;amp;amp;gt; style.arr，比如arr等于border。 注意问题 IE和其他浏览器的兼容，IE的事件对象和其他浏览器的事件对象不同，IE为window.event，而其他浏览器的函数中默认有e的事件对象。 把a标签的href设置为javascript:...
JavaScript笔记之一：JS原生
Limonor的博客
11-01 1272
JavaScript 一、基础 运行在客户端的脚本语言 脚本语言：不需要编译，运行过程中由 js解释器（js引擎）逐行来解释执行 也可以基于 Node.js 技术进行服务器端编程 作用 表单动态验证 网页特效 服务端开发 Node.js 桌面程序 Electron App 物联网 游戏开发 浏览器执行JS 浏览器分为两部分：渲染引擎 、JS引擎 渲染引擎：用来解释HTML和CSS，内核 JS引擎：JS解释器，读取网页中的 JS 代码，处理后运行 浏览器本身不会执行JS代码，而是通过内置JS引擎来执
vue.js项目评估流程图特效.zip
10-09
Vue.js项目评估流程图特效是前端开发中一种常见的应用场景，主要涉及到JavaScript库Vue.js的使用，以及可能结合了jQuery和CSS特效来实现交互式的流程图展示。在这个项目中，我们可能会遇到以下几个重要的知识点： 1...
一些很实用的html网页js功能特效
11-26
包含很多很实用的网页特效（包括网页加载进度条、退出窗口的特效、表单填写、字体特效、表单填写等）
用js生成专业个人简历
weixin_33860737的博客
03-26 1688
2019独角兽企业重金招聘Python工程师标准>>> ...
无人机集群分层通信及连通性研究
10-18
针对强干扰环境，在采用窄波束固定安装的通信模块执行任务的过程中，采用一种无人机集群分层通信与连通性判断的方法，通过上下层无人机两两之间的通信关系，确定无人机集群的连通性。局部信息在集群中多次中转实现整体的信息共享，为绕飞搜索、队形保持、防止碰撞等措施的实现提供信息支持，是执行高风险、高难度复杂任务的一种高可靠、低成本的 方案。
花旗杯金融创新应用大赛——基于机器学习的上市公司信息披露质量评价系统.zip
10-18
花旗杯金融创新应用大赛——基于机器学习的上市公司信息披露质量评价系统
PHP-032校园二手旧货闲置物品交易网站毕业课程源码设计+论文资料
最新发布
10-18
编号：332 校园二手闲置旧货信息网站，为校园二手闲置旧货交易提供了网上平台。如今，随着电子商务的不断发展完善，大学校园也需要一个能为学生提供旧货物品交易的专用网站，以便发布各种商品信息。 本设计具有一般电子商务的功能，且体现出校园风格。该系统提供的功能包括注册、查询信息、发布信息等。本系统的特点在于应用了PHP技术。它是一种简单的动态脚本语言，具有开放源码、执行速度快的特点。该技术还支持广泛的数据库连接 ，具有大量的扩展库，安全性能高，易学易用。 系统管理员模块包括：系统配置管理、会员信息管理、网站新闻管理、物品信息管理、管理员管理、登录日志管理。用户模块包括：安全登录、找回密码、查询信息、发布信息、会员注册、物品类别、物品信息管理、会员信息修改。刚进入网站的非会员能够在此网站浏览和搜索信息，不仅能浏览旧货信息还能浏览到热门信息。经过注册成为会员便能发布信息。此系统还考虑到用户利用穷举法破解密码，专门设置了用户和管理员登录日志，以便及时了解和防范。
rhino grasshoper 查看及统一曲面法线方向.gh
10-18
【rhino@grasshoper 查看及统一面法线方向】https://www.bilibili.com/video/BV1ZCWpeLE2h?vd_source=b420114c993138474d2e93d83ead77a5
DXGIDemo.zip
10-18
Qt中使用DXGI截取桌面图像并保存到本地。
计算台湾上市OTC公司英文可持续发展报告的声调得分.zip
10-18
计算台湾上市OTC公司英文可持续发展报告的声调得分
开发问题解决笔记：JavaScript、ExtJS、Struts与Hibernate技巧
开发过程中遇到的问题及解决方案的笔记整理，涉及JavaScript、ExtJS、Struts和Hibernate等技术。 在开发中，我们经常会遇到各种技术挑战。这篇笔记主要记录了作者在开发过程中碰到的问题及其解决方法，以下是具体的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值