前端 杂文一

本文介绍了前端开发中的一些常见特效实现,如返回顶部按钮的滚动监听与动画效果,图片放大、元素定位以及悬浮窗的创建。同时,探讨了DOM元素操作,包括获取ID和子元素的方法,以及CSS样式如box-shadow和定位属性。此外,还分享了关于阴影、居中布局和细节调整的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端的几个简单的特效

一、返回顶部按钮

首先是按钮的显示与消失,监听滑动事件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对象不能互调库方法,另外还有阴影,再者最后就是亿点小细节和微调。本以为这个特效要说老多,突然发现前面说的细节很多了,就没什么可说了。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值