随笔分类 -  js-bom

返回顶部效果
摘要：// 点击返回顶部 让窗口滚动到顶部 goBack.addEventListener('click', function() { // window.scroll(0, 0); animate(window, 0); }); // 动画函数 function animate(obj, target, 阅读全文
posted @ 2020-06-07 20:23 EricBlog 阅读(118) 评论(0) 推荐(0)
轮播图案例分析
摘要：案例 代码 window.addEventListener('load', function() { // 1 获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('. 阅读全文
posted @ 2020-06-07 20:02 EricBlog 阅读(421) 评论(0) 推荐(0)
鼠标经过显示 动画
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-06-07 18:19 EricBlog 阅读(277) 评论(0) 推荐(0)
封装动画
摘要：// obj 目标对象 target 目标位置 function animate(obj, target, callback) { // 清除原先定时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时 阅读全文
posted @ 2020-06-07 18:18 EricBlog 阅读(125) 评论(0) 推荐(0)
动画实现原理
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-06-07 16:06 EricBlog 阅读(168) 评论(0) 推荐(0)
mouseenter 和 mouseover 区别
摘要： 阅读全文
posted @ 2020-06-07 15:57 EricBlog 阅读(184) 评论(0) 推荐(0)
三大系列对比
摘要： 阅读全文
posted @ 2020-06-07 15:54 EricBlog 阅读(147) 评论(0) 推荐(0)
scroll 系列属性
摘要：滚动案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http- 阅读全文
posted @ 2020-06-07 15:51 EricBlog 阅读(634) 评论(0) 推荐(0)
client 系列
摘要： 阅读全文
posted @ 2020-06-07 14:46 EricBlog 阅读(108) 评论(0) 推荐(0)
图片放大镜效果代码
摘要：window.addEventListener('load', function() { var preview_img = document.querySelector('.preview_img'); var mask = document.querySelector('.mask'); var 阅读全文
posted @ 2020-06-07 14:40 EricBlog 阅读(379) 评论(0) 推荐(0)
网页 offset偏移
摘要： 阅读全文
posted @ 2020-06-06 20:53 EricBlog 阅读(213) 评论(0) 推荐(0)
history对象
摘要： 阅读全文
posted @ 2020-06-06 19:36 EricBlog 阅读(96) 评论(0) 推荐(0)
location
摘要： 阅读全文
posted @ 2020-06-06 19:27 EricBlog 阅读(162) 评论(0) 推荐(0)
发送验证码倒计时案例
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-06-06 18:44 EricBlog 阅读(129) 评论(0) 推荐(0)
倒计时案例------时分秒
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-06-06 18:29 EricBlog 阅读(218) 评论(0) 推荐(0)
定时器
摘要：<button>点击停止定时器</button> <script> var btn = document.querySelector('button'); function callback() { console.log('爆炸了'); } var timer = setTimeout(callb 阅读全文
posted @ 2020-06-06 18:28 EricBlog 阅读(150) 评论(0) 推荐(0)