摘要: 08年毕业就开始接触javascript,当时是做asp.net发现很多功能用asp.net控件解决不了,比如checkbox单选,全选问题,自动计算总价问题,刷新问题,等等。那时感觉javascript好讨厌,没有好的框架和调试工具,痛不欲生。如今javascript框架漫天飞舞,jquery,z 阅读全文
posted @ 2016-05-30 20:31 nd 阅读(5864) 评论(11) 推荐(27) 编辑
摘要: 我们最常见的跳转方式是location.href = "http://www.baidu.com", 这种是最常见的,但是常常使用location.replace,location.assign,,window.open,history.replaceState,location.reload等,这 阅读全文
posted @ 2023-02-07 23:17 nd 阅读(708) 评论(0) 推荐(0) 编辑
摘要: svga动画 本文介绍的动画不是css,js动画,是使用插件播放svga文件。 1.需求 UI同学在做一个春节活动,活动中需要有个开场动画,原本想的简单,不涉及接口调用逻辑,就直接用做一个gif图片由前端来显示就好了,但是这个gif做出来之后图片太大了,页面加载慢,如下图1 gif图片还有一个问题, 阅读全文
posted @ 2023-01-13 19:13 nd 阅读(957) 评论(0) 推荐(3) 编辑
摘要: 使用浏览器inspect调试app 在开发混合项目的过程中,常常需要在app环境排查问题,接口可以使用fiddler等工具来抓包,但是js错误就不好抓包了,这里介绍一种调试工具-浏览器。 1.调试过程 先看实现步骤 首先电脑打开edge浏览器,地址栏中输入edge://inspect/#device 阅读全文
posted @ 2022-12-18 20:53 nd 阅读(2378) 评论(0) 推荐(2) 编辑
摘要: before-after-hook 最近看别人的代码,接触到一个插件,before-after-hook,百度搜一圈也没有看到什么地方有教程,看这个字面意思是一个hook,和axios里面的拦截器,vue-router里面的导航守卫类似。插件名字暂且叫它“前后钩子”吧,本文简单介绍这个插件的使用方法 阅读全文
posted @ 2022-12-15 12:56 nd 阅读(216) 评论(0) 推荐(0) 编辑
摘要: 鲤鱼跳龙门动画 1. 需求 年中618营销活动要求做一个鲤鱼跳龙门的动画,产品参考了某宝上的一个动画,要求模仿这个来做一个类似的动画。产品提供的截屏视频如下: 图1 从这个视频里得到的信息,我们可以把动画分解一下: 321倒计时结束,动画开始播放。 小河背景向下滚动,看上去小鱼在不停的向上游动,其实 阅读全文
posted @ 2022-08-12 14:17 nd 阅读(266) 评论(0) 推荐(0) 编辑
摘要: 本文介绍一个小型动画库anime.js,anime.js 是一款功能强大的Javascript 动画库插件。anime.js 可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。 anime.js虽然没有其他动画库功能强大,但是它包含的功完全能够满足 阅读全文
posted @ 2022-08-12 14:16 nd 阅读(792) 评论(0) 推荐(0) 编辑
摘要: 本文介绍一种12宫格抽奖,这种抽奖方式是九宫格抽奖的演变,只不过开始播放的时候是随机方式,不是顺时针播放了。 1.需求 先看看高保,如下图1 图1 用户点击"立即抽奖"后12个奖品随机高亮 请求接口,待所有产品都高亮后,根据接口结果,固定在抽中奖品上 最后弹出中奖结果弹框 2.思路 2.1 高亮 实 阅读全文
posted @ 2022-08-12 14:15 nd 阅读(419) 评论(0) 推荐(0) 编辑
摘要: 1. 需求 开宝箱在一些商家营销活动中也很常见,这个需求简单,产品经理说就是做个动画就好,那我们就可以自由发挥了。高保图如下图1. 图1 开局一张图,剩下的全靠自己编了,动作怎么动,先看看UI给的素材,看米下锅。一张关闭的箱子图片,如下图2 图2 一张打开的箱子,如下图3 图3 一张奖品背景图片,是 阅读全文
posted @ 2022-08-12 14:15 nd 阅读(721) 评论(0) 推荐(0) 编辑
摘要: 本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单,来看看高保截图,如下图1 图1 需求的功能点如下: 用户点击抽奖,九宫格四周的图片顺时针依次闪烁,空转几圈。 请求接口,等接口有返回后最后对应的奖品闪烁,其他奖品不闪烁。 登录后,正中间的抽奖这个小方格点亮,未登录是灰色,这一点和抽奖无关,本文不 阅读全文
posted @ 2022-08-12 14:14 nd 阅读(588) 评论(0) 推荐(0) 编辑
摘要: 1. 需求 上次讲到lao虎机抽奖,通过jquery.animate修改background-prosition-y来修改背景图片实现上下滚动动画,本文介绍一种左右滚动的动画,原理是一样的,这里通过修改background-prosition-x来实现动画,同时也要注意奖品图片的尺寸问题,这里姑且叫 阅读全文
posted @ 2022-08-12 14:14 nd 阅读(1274) 评论(0) 推荐(0) 编辑