找回密码
 立即注册

QQ登录

只需一步,快速开始

Simon.hu 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-1-16 15:00  /   查看:7615  /  回复:3
很多的同学,在用产品的的时候,希望用户在填写数据的时候,能有个类似进度条的功能,让用户能够明确的知道,已经填写完成了百分之多少
这个需求,暂时产品确实没有直接的功能来做,但是好的需求,我们一定要找到帮助大家解决问题的方法,于是便有了下面的功能。
test.gif
这个气泡看起来很炫酷,有木有?
答完一道题,以后气泡就故意动一下,然后我们随意的滚动页面气泡也是不会变位置的。
当然进度条的,也是有的,只是我故意去掉了,感觉这个更加好看,不过我会在附件中将2个都放上,以便于大家选择自己喜欢的那一个。
做法:
1.引入JS等文件
>所有页面
如果你要给每个页面都加上这个气泡的话,请将附件的如下图3个文件,加入到这里
image.png521344909.png
因为本例中,只有5道题,我们需要把myScrpit.js文件2处修改成5

image.png89156493.png
>单独页面
如果你只是要一个页面中,有这个效果,请将total.js这个文件,放到该页面的如下位置
image.png95380248.png
因为本例中,只有5道题,我们需要把total文件中的这里2处,改成5
image.png68068236.png
2.给每道题都加入不同的JS命令
image.png520559386.png
因为一共是5道题,我们需要给每一道题都添加,一个命令,这个命令也是5个,
第一个是:cd(0);
第二个是:cd(1);
第三个是:cd(2);
第四个是:cd(3);
第五个是:cd(4);
然后就有了,我们要的效果,这里的效果,我用气泡+进度条的效果截图
full.gif
工程文件,见附件!

myCss.css

180 Bytes, 下载次数: 353

myScript.js

3.21 KB, 下载次数: 306

Script.js

3.16 KB, 下载次数: 285

total.js

6.39 KB, 下载次数: 315

单页面(气泡).fgcc

555.11 KB, 下载次数: 448

所有页面(气泡 进度条).fgcc

553.28 KB, 下载次数: 366

3 个回复

倒序浏览
德拉库拉
注册会员   /  发表于:2018-1-16 15:04:44
沙发
脑洞真心牛
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-1-16 15:08:56
板凳

感谢您的支持!
回复 使用道具 举报
TimZhang
中级会员   /  发表于:2018-1-16 16:05:02
地板
Mark
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部