Highcharts 中文社区

查看: 7310|回复: 9

[代码共享] 【你和微信的故事】刷爆微信朋友圈的h5页面效果源码分享

[复制链接]
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    23197

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2016-1-10 22:30:22 | 显示全部楼层 |阅读模式
    今天火爆微信朋友圈的【你和微信的故事】h5 页面效果不错,是一个典型的移动端可视化效果,所以特意研究了一下源码并保存到本地,所以在这里分享给大家。

    截图:

    Snip20160110_90.png Snip20160110_91.png


    运行方法:

    1、用浏览器打开 weixin.html
    2、F12 打开调试模式并启用手机模拟器直接点击即可操作。
    3、控制执行 "mySlider.next()" 或 "mySlider.pre()" 进行上下页切换

    Snip20160110_94.png

    资源下载:
    weixin.zip (507.36 KB, 下载次数: 232)
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    23197

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

     楼主| 发表于 2016-1-11 09:23:22 | 显示全部楼层
    ps,我在知乎上回答了相关问题,求赞求各种

    https://www.zhihu.com/question/39358116/answer/80968921
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    无聊
    2016-1-11 09:31
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    0

    主题

    8

    帖子

    93

    积分

    HC 新手

    Rank: 1

    积分
    93
    发表于 2016-1-11 09:41:03 | 显示全部楼层
    不用那么麻烦,打开触屏支持就可以切换了。
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    23197

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

     楼主| 发表于 2016-1-11 09:43:09 | 显示全部楼层
    kxpken 发表于 2016-1-11 09:41
    不用那么麻烦,打开触屏支持就可以切换了。

    恩,是的,昨天我在本地测试触屏没成功。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts

    该用户从未签到

    0

    主题

    2

    帖子

    25

    积分

    HC 新手

    Rank: 1

    积分
    25
    发表于 2016-1-13 13:40:11 | 显示全部楼层
    请教一下楼主,下载后打开HTML,F12后选择手机模式,控制台下执行mySlider.next()
    提示Uncaught ReferenceError: mySlider is not defined,是哪个步骤出错了吗?

    无标题.jpg
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    23197

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

     楼主| 发表于 2016-1-13 13:47:21 | 显示全部楼层
    cck 发表于 2016-1-13 13:40
    请教一下楼主,下载后打开HTML,F12后选择手机模式,控制台下执行mySlider.next()
    提示Uncaught ReferenceE ...

    直接鼠标点击操作即可,不需要执行命令了。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts

    该用户从未签到

    0

    主题

    2

    帖子

    25

    积分

    HC 新手

    Rank: 1

    积分
    25
    发表于 2016-1-13 21:46:01 | 显示全部楼层
    群大大 发表于 2016-1-13 13:47
    直接鼠标点击操作即可,不需要执行命令了。

    已成功。灰常感谢!

    该用户从未签到

    0

    主题

    1

    帖子

    89

    积分

    HC 熟手

    Rank: 2

    积分
    89
    发表于 2016-1-15 19:55:33 | 显示全部楼层
    楼主我在知乎上看到这贴的,怎么我用笔记本下载了程序。用浏览器运行了Weixing,按F12没看到你发的图的页面,用的360的浏览器是不是不行啊。也没有找到你教我们的第三步,能告诉下我这问题到底是出在哪里了不。
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    23197

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

     楼主| 发表于 2016-1-15 19:59:33 | 显示全部楼层
    童文远 发表于 2016-1-15 19:55
    楼主我在知乎上看到这贴的,怎么我用笔记本下载了程序。用浏览器运行了Weixing,按F12没看到你发的图的页面 ...

    不推荐使用 360浏览器,建议你用谷歌浏览器,毕竟这个页面是针对移动端的,对IE及IE内核的浏览器兼容性不得而知(当然也没有意义)。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    难过
    2016-4-6 12:52
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    2

    主题

    12

    帖子

    132

    积分

    HC 新手

    Rank: 1

    积分
    132
    发表于 2016-3-4 15:18:42 | 显示全部楼层
    谷歌浏览器F12有手机平板模式视图,很方便的
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表