2021-05-08

 

        通过JQ实现图形队列

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： JQ

撰写时间：2021/5/8

注意红色箭头指向内容，本文将分为12张图片，并按从上到下顺序操作

1、通过JQ实现以下点击启动按钮，然后使得的图形伸缩功能。

2、创建好一个HTML页面，然后在body标签里面添加一个div标签和一个button按钮标签。

3、然后我们在顶部title标签下面添加一个script标签，以此来引用JQ插件;

4、之后在script标签下面添加一个style标签来存放CSS样式；

5、我们在style标签里面写一些简单样式，例如：图形和按钮的宽高等。也可设置一些其它样式，如下图，以此来美化图形以及按钮。

 

6、接下来，我们在按钮button标签下面再添加一个script标签；

7、在script标签里写一些功能。如下图里面的圈1，先写一个文档加载后激活函数的事件，

然后如圈2在文档加载后激活函数里面写一个单击事件；

8、之后如圈3，先进行一个变量声明，然后利用animate创建div的动画效果，再进行赋值，设置好height(高度)值、opacity(透明度)以及slow(时间)，然后保存在浏览器打开即可。

此方法可通过点击按钮实现图形的队列功能，图片里面已标注好注释以方便您阅读，然后以此方式进行分享，希望可以帮助到你们，新手小白懂得不多，如有不当还望见谅，多多关照！

以上就是我的分享，如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！