360全屏滚动

结合jQuery与css3,制作的3d翻转banner轮播,每次翻转以独立个体进行,效果十分炫酷,如果配合响应的animate可能会效果更佳.

360全屏滚动

经验:

1.背景层的设定以及background-attachment的运用:
这种全屏滚动效果首先得把bodyhtml的高度设成100%,然后background-attachment改为fixed.

2.jq中stop的使用:
在animate函数前加上stop()来预先停止当前队列动画可以有效避免用户鼠标移动过快造成的bug.

3.$('body,html')作为滚动对象:
解决兼容问题,单个$('body')会给你造成麻烦.

js代码如下:

 

下载源码  演示链接:360全屏滚动

  • 我的微信
  • 我的微信扫一扫
  • weinxin
  • 我的QQ
  • 我的QQ扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar QQ游客 3

      参考参考