|
常见案例演示： 1、jQuery插件fullpage介绍 如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（ 查看），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。 fullPage.js是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有： · 支持鼠标滚动 · 支持前进后退和键盘控制 · 多个回调函数 · 支持手机、平板触摸事件 · 支持 CSS3 动画 · 支持窗口缩放 · 窗口缩放时自动调整 · 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 基本使用： <link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="first section" ></div>
<div class="second section"></div>
<div class="thrid section"></div>
<div class="fourth section"></div>
<div class="fivth section"></div>
</div>
<script>
$(function(){
$('#fullpage').fullpage();
});
</script>
底层原理：竖着的轮播图,监听鼠标滚轮. var i=0; //监听鼠标滚轮事件.
document.onmousewheel=function(){
console.log(i++);
}
3、CSS3动画新特性详解 动画的基本使用： 定义动画： @keyframes animateName0%{ } 100%{ } 使用动画： .currentElement{ animation:animateName 2s linear1s inifinite; } 动画属性详细介绍： 需要执行的动画的名称
animation-name: move;
这个动画执行的时间.
animation-duration: 5s;
动画执行的次数.
animation-iteration-count: infinite;
动画延迟的时间.
animation-delay: 2s;
线性速度.
animation-timing-function: linear;
动画结束了的状态
animation-fill-mode:forwards;
交替动画.
animation-direction: alternate;4、CSS3在网页动画特效中的技巧分享 无缝滚动案例. 5、animate.css 库的介绍及使用 6、360案例的第四屏动画效果的实现. sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']
| 
收藏
淘帖
踩
