我需要构建一个looks like this的小向导,在这个向导中,您可以通过向导引导一个人并使用每个选项更新图像。由于一些原因,如ipad兼容性,我不能像在这个网站上使用闪存。我可以从简单地使用javascript和jquery获得这种用户体验的接近程度。是否有任何类似的例子(通过谷歌用这种用户体验找不到任何东西)
答案 0 :(得分:10)
我有很好的使用经验:
https://github.com/kflorence/jquery-wizard
使用分支实现多步骤向导。我只是使用普通的jQuery来添加一些额外的效果,比如过渡动画等等。
答案 1 :(得分:7)
可以使用JQuery完成,你可能会非常光滑。 但,Flash和其他类似技术往往会使构建此类网站更容易,或者至少需要更少的编码。
答案 2 :(得分:4)
HTML5当然可以。 http://www.html5rocks.com/是一个很好的网站,展示了所有HTML5的力量。
答案 3 :(得分:2)
如果不使用Flash,这是100%可行的。有一些使用jQuery的JavaScript中的多状态表单的例子,你可以寻求指导。想到的两个是Living Social和Groupon,他们这样做,但是你给出的榜样却没有那么大的天赋。
这里的关键是:
祝你的表格好运,并随时提出完成任务所需的任何其他问题。
答案 4 :(得分:2)
正如大家所说,你可以用jquery来做这件事。
我会使用简单的GIF制作大部分动画(就像那些闪亮的小闪光灯每个都可以是.gif图像)。
悬停在效果上很简单,你可以像在jquery中用.hover()
函数替换图片一样简单。
AFAIK在jQuery中唯一真正无法做到的是大动画(比.gif可以容纳的大),拥有完整的视频需要使用HTML5(我认为)或flash的播放按钮。
答案 5 :(得分:1)
简单地渲染所有向导步骤,如隐藏的div,当用户点击“继续”时,显示下一个容器并隐藏上一个
在用户点击某个项目的每个表单步骤中,只需将一个类添加到预览图像或替换图像的src属性
我会将几个图像一个放在另一个上面(位置绝对)像图层一样,并根据用户在当前步骤中更新相应的“图层”
加载的图像当然应该是透明的png,并且具有适当的z-index。
答案 6 :(得分:1)
答案 7 :(得分:1)
以下是一个可以满足您的需求的示例网站......
http://custom.case-mate.com/imakemycase/
它基于javascript与casalab(可能还有jQuery)库。
然而,这些网站承认,在javascript然后flash中创建要困难得多。因为您需要通过代码完成大部分图形创建和编辑。除非你非常偏向代码(我猜这里很多,哈哈)。这是一个非常困难的过程。 Flash中的GUI使其成为更多,拖放,链接过程。对于简单的东西。
答案 8 :(得分:1)
答案 9 :(得分:0)
转到HTML5和CSS3。 如果你想要旧版浏览器的兼容性(ie7)回到现代化器上然后使用js,否则这里没有任何东西不能用css3和html5完成。 这只是我发现的众多例子中的一个
答案 10 :(得分:0)
答案 11 :(得分:0)
如果您具备基本的编程技能,可以完成并且代码不会太难实现。
您需要做的就是调整您在此处找到的代码:
这两个链接包含实现与您链接的网站类似的网站所需的所有代码以及一些说明。
此致 甲