仿苏宁易购

企业服务 数据服务 案例ID:127156
周黛玉
1 年经验· 在校学生
微信扫码沟通,客服可协助直接对接工程师;如当前档期不合,也可继续推荐相似案例作者。

案例介绍

实现技术:CSS+HTML+Javascript+jqury
项目难点:
定时器的清除
部分动画效果需要js自动生成,时间的控制使用了timeout和innertal,其中timerout包含 了innertal,点击事件和定时器不在同一个js文件中,快速来回点击的时候,定时器清除不起作用。
解决方案:将该li对应页的所有定时器绑定在该li身上,每次点击的时候清除timeout和innertal。
复用引入的内容
代码复用进去后高度只能在HTML中通过复用链接代码的高度而设置,但是当鼠标悬停内容时, 内容一旦超过设置的高度则消失。
解决方案:给复用内容一个鼠标悬停样式,当鼠标悬停时高度发生变化。
无缝轮播
无缝轮播首先是让第一个内容从左到右的方向移动,直到第二个内容则停顿一会的方式而完成一个 无缝轮播的效果,当它移动到最后一张时,它的效果应该是立马就被第一张替换,但是它的效果却 是往反方向移动回去。
解决方法:在jQuery中把animate样式改为css样式。
实现回到顶部、无缝切换、倒计时、选项卡切换等
同样实现了首页链接注册登录页面

仿苏宁易购

企业服务 · 数据服务 案例ID:127156
联系该工程师
微信扫码,建群沟通
作者: 周黛玉 - 1年经验- 在校学生

案例介绍

实现技术:CSS+HTML+Javascript+jqury
项目难点:
定时器的清除
部分动画效果需要js自动生成,时间的控制使用了timeout和innertal,其中timerout包含 了innertal,点击事件和定时器不在同一个js文件中,快速来回点击的时候,定时器清除不起作用。
解决方案:将该li对应页的所有定时器绑定在该li身上,每次点击的时候清除timeout和innertal。
复用引入的内容
代码复用进去后高度只能在HTML中通过复用链接代码的高度而设置,但是当鼠标悬停内容时, 内容一旦超过设置的高度则消失。
解决方案:给复用内容一个鼠标悬停样式,当鼠标悬停时高度发生变化。
无缝轮播
无缝轮播首先是让第一个内容从左到右的方向移动,直到第二个内容则停顿一会的方式而完成一个 无缝轮播的效果,当它移动到最后一张时,它的效果应该是立马就被第一张替换,但是它的效果却 是往反方向移动回去。
解决方法:在jQuery中把animate样式改为css样式。
实现回到顶部、无缝切换、倒计时、选项卡切换等
同样实现了首页链接注册登录页面

相似案例推荐

发布任务

企业点击发布任务,工程师会在任务下报名,招聘专员也会在 1 小时内与您联系确认。

1小时精推人才

需求方专属客服,免费梳理匹配

需求方客服微信二维码
扫码加微信 · 客服人工对接
更多案例
微信沟通 客服 看中这位工程师了?客服帮你 1 小时对接沟通 → ×