前端 杂文一

前端的几个简单的特效

一、返回顶部按钮

首先是按钮的显示与消失，监听滑动事件window.onscroll = function(){ ... }，在滑动事件onscroll里面我们用window.pageYOffset获取当前下滑长度，如果长度 y 超过300，我们就给他 .show()，否则就是 .hide()，注意这里是JQuery对象，而不是js对象，两者是不一样的，js对象只能调用js库的方法，而JQuery可以调用其更丰富库的方法。js对象转换成JQuery的方法为 var JQueryObj = $( [js对象] ) ;JQuery对象转换为js对象的方法为var JSObj = JQueryObj[0]，即它的0号元素。而且像一些动画类的变换，必须得写在入口函数里面，这也好理解，在所有盒子结构加载完成后，执行的代码，换句话说，你总不至于在某个div还没加载出来的时候你让他换个背景颜色吧。JQuery的的入口函数是$(document).ready(function( ){ ... }) 或者简写为 $(function( ){ ... }) ，js的入口函数为window.onload = function(){ ... }。较为官方的解释为，前一种JQuery的是一旦我dom结构渲染完毕即可执行内部代码，但不必等到所有外部资源加载完成，后一种是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码；而且JQuery入口函数可以写多次，window.onload只能写一次。与之相对的 不写在入口函数内的代码，更像是一种“资源”。比如说鼠标点击事件onclick，在标签里写下<div οnclick="displaywindow(this)"> ... </div>，如果写在入口函数内，点击过后会发现浏览器报了displaywindow这个方法undefined的错误，原因在于你加载完了dom结构也就是这个盒子div才去定义了function，这是他在加载时所未识别得出的，因此写在入口函数的上面或者写在更前面（在head之后）作为一种资源，想用就来调用（具体写在前面哪里也不是非常确信，但必然在入口函数之外）。然后回到该特效，我们在click事件（addEventListener和.click和onclick是写在入口函数的，上面讨论的挂载方法是写在入口函数之外的）里面获取当前下滑长度设置速度speed，设置一个setInterval计时器，如果当前长度小于speed直接window.scrollTo(0, 0)，并用setInterval的返回值timer接收，给他清除计时器，跳出计时，否则就window.scrollTo(0, y-speed)，间隔时间为20ms。另外还有js库里面的window.scrollTo(x, y)和JQuery库里面的JQuery对象.slideToggle()，我总是记错记混方法和对应关系。

二、杂叙几处细节

1）鼠标移动上去图片放大效果

用CSS。

:hover { 
    transform: scale(1.1);/*scale为变大变小的倍数*/ 
    transition: 500ms;/*设置的是动画持续过程，大一点会显得不那么突兀*/
}

再把盒子div设成overflow: hidden意味着图片放大超出的部分隐藏。

2）js和jQuery分别如何获取当前dom元素对象的id

JS：var id = JSObj.id;

JQuery：var id = JQueryObj.attr("id"); var id = JQueryObj[0].id;零号元素即为js对象

3）js和JQuery获取当前对象的子元素

JQuery：JQObj.children()，JQuery库中的方法，获取的是一个集合，获取具体一个对象用 .eq()。

JS：JSObj.getElementsByTagName("...") (其实和document.getElementsByTagName("...")是一样的，只不过一个是大盒子dom，另一个在小盒子div里面找罢了，值得注意的是“小盒子”并没有getElementsById("..."))，这种方法值得推荐。

这边是原文内容。

(49条消息) js和jquery获取当前对象的子元素_baimi2022的博客-优快云博客

4)立体阴影边框的效果 box-shadow

语法为 box-shadow:h-shadow v-shadow blur spread color inset

                     h-shadow:必需的，水平阴影的位置，允许为负值

                     v-shadow:必需的，垂直阴影的位置，允许为负值

                     blur:可选，模糊距离

                     spread:可选，阴影的大小

                     color:可选，阴影的颜色

                     inset:可选，从外层的阴影（开始时）改变阴影内侧阴影

5）position: fixed / absolute

绝对定位有时能很好的解决布局困难的问题，设置之后，直接top: 20%，right: 10%，通过微调就能放在任意你想放置的位置；fixed与绝对定位类似，只不过跟着滚轮下滑，始终保持在屏幕的某个位置。还有相对定位和清除浮动的相关复杂问题，等下一次通透的缕一缕之间的关系。

6）图片居中和文字居中

图片居中：选中上级div设置属性margin 0 auto

文字居中：选中上级div设置属性text-align: center，意为水平居中。另外还有vertical-align: center意为竖直居中。

三、悬浮窗

固定定位让小图标固定到侧边，写一个悬浮窗display: none这样就看不见了，然后position也是fixed，通过鼠标移动事件οnmοuseοver="displaywindow(this)"挂载到div上，写在入口函数之外，displaywindow中将display属性设置成block就显示出来了，注意JS对象和JQuery对象不能互调库方法，另外还有阴影，再者最后就是亿点小细节和微调。本以为这个特效要说老多，突然发现前面说的细节很多了，就没什么可说了。

总之，这些个知识确实只有经常去用它了才会记住它，虽然心里咒骂着老板，（我其实是大学生，老板也不是真老板）骂了不下十遍，下次做什么的时候，尽量多去想多去记录下来用多种方式解决问题吧。