- 首先创建一个新的html,在body下面输入源代码;div标签代表的是颜色的面板,button标签代表的是按钮
- 当我们输入好了源代码之后呢,那我们的源代码部分已经完成了,接下来剩下的就只有css样式和jQuery函数了
- 接下来我们先完成css样式的代码,因为这个案列的话没什么必要创建一个css文件然后又得链接过去,这就比较麻烦,于是我们选择用内部样式来完成效果,只需要在顶部title标签下面创建一个style的标签就好了,这style代表的就是样式设置标签
- 当我们创建好了style标签之后,我们就可以设置样式了,首先我们源代码中只有一个div标签,所以我们直接选择div标签,意思就是选择源代码中的所有div标签进行设置,首先我们设置宽度为100个像素,高度为100个像素,下外边距为10像素,背景颜色随便选,这里的参数都是随便设置的,如果需要的话,可以自己设置。
- 当我们写到这里的时候,说明我们的案列已经完成了一大半了,接下来就是完成js的部分了,首先我们先输入一个script,这里就是内部的js代码,意思也是跟style一样的,如果创建一个js文件的话也是要链接的,为了方便简洁,就不需要链接过去了
- 然后我们写到这里,我们的动画还是需要插件来完成的,所以我们在script标签下面继续添加一个script用来链接插件,因为我jq版本只有3.6.0,所以比这个版本高的都可以使用的
- 当我们创建好了script标签之后,我们现在源代码的div标签和button标签添加个属性名为id名,之后我们在script标签输入js的代码,这个是我们的单个动画的设置方法,
(
‘
d
a
n
’
)
,
这
段
代
码
的
意
思
就
是
j
s
中
使
用
d
o
c
u
m
e
n
t
的
方
法
是
一
样
的
,
只
不
过
是
换
了
一
种
方
法
,
使
得
语
言
更
简
单
简
洁
了
,
然
后
再
后
面
添
加
一
个
点
击
事
件
的
函
数
,
然
后
通
过
(‘dan’),这段代码的意思就是js中使用document的方法是一样的,只不过是换了一种方法,使得语言更简单简洁了,然后再后面添加一个点击事件的函数,然后通过
(‘dan’),这段代码的意思就是js中使用document的方法是一样的,只不过是换了一种方法,使得语言更简单简洁了,然后再后面添加一个点击事件的函数,然后通过这个符号来获取body中的div所匹配的标签,然后再后天添加个动画函数animate然后再下面写入动画的属性和属性值,一般的话只有宽高字体,背景颜色之类的是没有效果的,如果你想把这动画更加抽象,你可以在结尾括号后面添加动画的时间,属性和属性值可以随便设置,只要自己喜欢就可以了
- 接下来是我们多个动画的设置,多个动画意思就是点一次按钮执行一次代码,具体的设置也是跟我们单个动画设置是一样的,只是我们在每个属性的括号后面再添加一个animate来设置
- 最后来看看我们的效果,只要打开浏览器,点击按钮div标签能更换颜色的,那就表示你已经完成了这个效果
这是我所学到的自定义动画了,所以我要分享给你们,希望可以帮助到你们。 以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!
|