单页面移动插件

所属分类:其他-动画效果

 40138  347  查看评论 (0)
分享到微信朋友圈
X
单页面移动插件 ie兼容8

特点

        创建完全容器的宽度和窗口的高度

        动态位置:每个容器可以有垂直和水平位置设置

        在URL历史散列

        容器之间滚动动画

        配置简单,使用方便

        支持IE8+

Html

<div id="container">
  <div id="stage1"> //这个页面的内容1 </DIV>
  <div id="stage2"> //这个页面的内容2 </DIV>
</div>

阶段的id是怎么链接

<a href="#stage2">转到了stage2 </a>

风格

不显示滚动条

body { overflow-x: hidden; overflow-y: hidden; }

如果您需要垂直滚动

stage1 { overflow-y: auto; }

JAVASCRIPT

把jQuery的,ScrollTo插件和Jquery.fullContent加入到您的页面中

<script src="js/jquery-1.x.x.min.js" type="text/javascript"></script> 
<script src="js/jquery.jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.jquery.fullContent.js" type="text/javascript"></script>

而且,您可以配置此参数:

$('#container').fullContent({ 
  stages: 'div', 
  mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 1}, {v: 2, h: 2}], 
  stageStart: 1, 
  speedTransition: 800, 
  idComplement: 'page_' 
});

定位地图

此参数可以设定哪个要你的舞台的位置。五 - 垂直位置H - 水平位置。例如

V1H1 | V1H2

V2H1 | v2h2


相关插件-动画效果

html5浪漫粒子表白

html5粒子效果浪漫表白特效
  动画效果
 73232  384

超级牛B的js效果

跟上一个心的形状用的类似的方法。不用我多说,看了就知道有多牛B了哦。可兼容手机。暂停之后一个手指拖动改变视角,两个手指可以调整视角的大小,三个手指可以移动。
  动画效果
 59415  331

Jquery下雪特效

jquery下雪特效,可以定义不同雪花
  动画效果
 42997  416

纯JS数字滚动效果(原创)

纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持
  动画效果
 40363  301

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复