js
大东哦哦
这个作者很懒,什么都没留下…
展开
-
长页面滚动动画(优化)
之前写的长页面滚屏动画回过头看发现有很多局限性比如:1.每次动画后都要加上opacity:1,元素过多时候代码冗余2.如果动画元素过多,js调用aniCom()方法时候,传入值过多,容易出错3.如果动画元素是类名有多个,调用aniCom()时候不起作用进行优化1:使用less封装 动画函数// 封装动画 简化每次动画操作.fill-mode { opacity: 0; animation-fill-mode: forwa...原创 2020-07-31 16:52:32 · 276 阅读 · 0 评论 -
css hover水滴涟漪效果
实现逻辑1.给盒子添加遮罩层,初始大小为0,hover效果放大2.判断鼠标进入位置,上下左右四个方向3.拿到鼠标在盒子内的X/Y坐标位置,e.pageY-$(this).offset().top4.鼠标进入动画:把鼠标的X/Y轴坐标,添加给遮罩层,作为定位的left和top,并添加放大动画5.鼠标移除动画:判断出去的位置,给遮罩层添加left和top,并添加缩小动画<!DOCTYPE html...原创 2020-06-15 10:29:48 · 808 阅读 · 0 评论 -
js跟随鼠标hover效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; p.原创 2020-05-29 11:50:59 · 551 阅读 · 0 评论 -
IScroll 和 解决手机端点击问题
使用iScroll来完成简单的区域滚动Demo注意点 : 1.要有父容器嵌套子容器,且父容器只能包含一个子容器 2.父容器(#wrapper)设置相对定位 + 溢出隐藏 3.子容器 (ul) 设置绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2019-06-18 15:07:36 · 223 阅读 · 0 评论 -
长页面滚屏动画
H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 , 向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画Demo使用了 使用animate.css https://www.cnblogs.com/xiaohuochai/p/7372665.html核心js代码: ...原创 2019-11-27 16:32:39 · 902 阅读 · 0 评论