技术：html+css+jquery+jquery-ui.js+jquery.fullPage.js

概述

本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果，借助于jquery等插件。逻辑稍微复杂，里面还嵌入了柱形图等多种线性图。

详细

代码下载：http://www.demodashi.com/demo/14989.html

demo是模拟的一家教育机构的首页，当时学习的时候写的，主要实现的是整屏滑动，全屏翻页的效果，每次翻页都有动画的效果，内容嵌入了线性图和柱形图，代码实现稍微复杂，纯js实现的，如果有需要的朋友可以直接把代码贴到自己的项目中，把js和css放到统一的文件中。里面的H5_index.css是主要的样式文件，H5_index.js是主要的逻辑文件。页面展示的所有内容直接在H5_index.js中修改即可。如果有不想要的那个页面，直接注释掉里面对应的方法就好。

一、项目目录

二、演示效果

三、程序实现具体步骤

页面index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

<title>整屏滑动Demo</title>

<!-- 载入所有的组件资源 -->

<script type="text/javascript" src="js/lib/jquery.js"></script>

<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/lib/jquery.fullPage.js"></script>

<!-- H5对象：进行内容管理 -->

<script type="text/javascript" src="js/H5.js"></script>

<link rel="stylesheet" type="text/css" href="css/H5.css" >

<script type="text/javascript" src="js/H5_loading.js"></script>

<!-- 相关样式 -->

<link rel="stylesheet" type="text/css" href="css/H5_loading.css" >

<link rel="stylesheet" type="text/css" href="css/H5ComponentBase.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentBar.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentBar_v.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentPoint.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentPolyline.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentRadar.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentPie.css">

<link rel="stylesheet" type="text/css" href="css/H5ComponentRing.css">

<!-- 相关样式 -->

<!-- 页面逻辑的样式 -->

<link rel="stylesheet" type="text/css" href="css/H5_index.css" >

<!-- 页面逻辑的样式 -->

<body>

<div class="loading">

<div class="double-bounce1"></div>

<div class="double-bounce2"></div>

<div id="rate">0%</div>

</div>

<!-- 相关逻辑 -->

<script src="js/H5ComponentBase.js"></script>

<script src="js/H5ComponentBar.js"></script>

<script src="js/H5ComponentBar_v.js"></script>

<script src="js/H5ComponentPoint.js"></script>

<script src="js/H5ComponentPolyline.js"></script>

<script src="js/H5ComponentRadar.js"></script>

<script src="js/H5ComponentPie.js"></script>

<script src="js/H5ComponentRing.js"></script>

<!-- 相关逻辑 -->

<!-- 页面逻辑 -->

<script src="js/H5_index.js"></script>

<!-- 页面逻辑 -->

</body>

</html>

主要逻辑 H5_index.js

$(function  () {

var h5 = new H5();

h5.whenAddPage = function(){

this.addComponent('slide_up',{

bg:'imgs/footer.png',

css:{

opacity:0,

left:0,bottom:-20,

width:'100%',height:'20px',zIndex:999

},

animateIn:{

opacity:1,bottom:'-1px'

},

animateOut:{

opacity:0,bottom:'-20px'

},

delay:500

});

}

h5

.addPage('face')

.addComponent('logo',{

center:true,

width:395,

height:130,

bg:'imgs/face_logo.png',

css:{opacity:0},

animateIn:{top:100,opacity:1},

animateOut:{top:0,opacity:0},

})

.addComponent('slogan',{

center:true,

width:365,

height:99,

bg:'imgs/face_slogan.png',

css:{opacity:0,top:180},

animateIn:{left:'50%',opacity:1},

animateOut:{left:'0%',opacity:0},

delay:500

})

.addComponent('face_img_left',{

width:370,

height:493,

bg:'imgs/face_img_left.png',

css:{opacity:0,left:-50,bottom:-50},

animateIn:{opacity:1,left:0,bottom:0},

animateOut:{opacity:0,left:-50,bottom:-50},

delay:1000

})

.addComponent('face_img_right',{

width:276,

height:449,

bg:'imgs/face_img_right.png',

css:{opacity:0,right:-50,bottom:-50},

animateIn:{opacity:1,right:0,bottom:0},

animateOut:{opacity:0,right:-50,bottom:-50},

delay:1000

})

.addPage()

.addComponent('caption',{text:'标题'})

.addComponent('text',{

width:500,

height:30,

center:true,

text:'这是一个demo标题',

css:{

opacity:0,textAlign:'center',color:'red',fontSize:'26px'

},

animateIn:{opacity:1,top:120},

animateOut:{opacity:0,top:240},

})

.addComponent('description',{

center:true,

width:481,

height:295,

bg:'imgs/description_bg.gif',

css:{

opacity:0,

padding:'15px 10px 10px 10px',

color:'#fff',

fontSize:'15px',

lineHeight:'18px',

textAlign:'justify',

top:240

},

text:'介绍内容',

animateIn:{opacity:1,top:190},

animateOut:{opacity:0,top:240},

delay:1000

})

.addComponent('people',{

center:true,

width:515,

height:305,

bg:'imgs/p1_people.png',

css:{

opacity:0,

bottom:0

},

animateIn:{opacity:1,bottom:40},

animateOut:{opacity:0,bottom:0},

delay:500

})

.addPage()

.addComponent('caption',{text:'标题'})//polyline

.addComponent('polyline',{

type:'polyline',

data:[['测试1',.4,'#ff7676'],['测试2',.2],['测试3',.3,'blue'],['测试4',.1]],

width:530,

height:300,

center:true,

css:{opacity:0,top:200},

animateIn:{opacity:1,top:250},

animateOut:{opacity:0,top:100},

})

.addComponent('msg',{

text:'测试',

css:{

opacity:0,top:160,

textAlign:'center',width:'100%',color:'#ff7676'

},

animateIn:{ opacity:1},

animateOut:{ opacity:0}

})

.addPage()

.addComponent('caption',{text:'测试'})//pie

.addComponent('pie',{

type:'pie',

data:[

['测试' , .4  ,'#ff7676'],

['测试' , .3 ],

['测试' , .2  ],

['测试' , .1  ],

],

css:{top:200},

width:300,

height:300,

center:true

})

.addComponent('msg',{

text:'测试',

css:{

opacity:0,bottom:120,

textAlign:'center',width:'100%',color:'#ff7676'

},

animateIn:{ opacity:1},

animateOut:{ opacity:0}

})

.addPage() //bar（bar_v）

.addComponent('caption',{text:'测试'})

.addComponent('bar',

{

type : 'bar',

width : 530,

height : 600,

data:[

['测试' , .4  ,'#ff7676'],

['测试' , .2  ],

['测试' , .1 ],

['测试' , .2  ],

['测试' , .35 ],

['测试' , .05 ],

['测试' , .09  ]

],

css : {

top:100,

opacity:0

},

animateIn:{

opacity:1,

top:200,

},

animateOut:{

opacity:0,

top:100,

},

center : true,

}

)

.addComponent('msg',{

text:'测试',

css:{

opacity:0,bottom:120,

textAlign:'center',width:'100%',color:'#ff7676'

},

animateIn:{ opacity:1},

animateOut:{ opacity:0}

})

.addPage() //（bar_v）

.addComponent('caption',{text:'测试'})

.addComponent('bar',

{

type : 'bar_v',

width : 530,

height : 400,

data:[

['测试' , .4  ,'#ff7676'],

['测试' , .1 ],

['测试' , .2  ],

['测试' , .05  ],

['测试' , .35 ]

],

css : {

top:220,

opacity:0

},

animateIn:{

opacity:1,

top:200,

},

animateOut:{

opacity:0,

top:220,

},

center : true

}

)

.addComponent('msg',{

text:'测试',

css:{

opacity:0,top:180,

textAlign:'center',width:'100%',color:'#ff7676'

},

animateIn:{ opacity:1},

animateOut:{ opacity:0}

})

.addPage()

.addComponent('caption',{text:'测试'})//radar

.addComponent('radar',{

type : 'radar',

width : 400,

height : 400,

data:[

['测试' , .9  ,'#ff7676'],

['测试' , .8 ],

['测试' , .7  ],

['测试' , .6  ],

['测试' , .5 ]

],

css : {

top:100,

opacity:0

},

animateIn:{

opacity:1,

top:200,

},

animateOut:{

opacity:0,

top:100,

},

center : true,

})

.addPage()

.addComponent('caption',{text:'测试'})//ring

.addComponent('ring-all',{

type : 'ring',center : true,

width : 300,height : 300,

data:[['测试' , .7  ,'#ff7676']],

css : { top:120,opacity:0 ,fontSize:'30px'},

animateIn: { opacity:1},

animateOut:{ opacity:0},

})

.addComponent('msg',{

text:'测试',

css:{

opacity:0,top:300,

textAlign:'center',width:'100%',color:'#ff7676'

},

animateIn:{ opacity:1},

animateOut:{ opacity:0},

delay:1800,

})

.addComponent('ring-1',{

type : 'ring',center : true,

width : 140,height : 140,

data:[['测试' , .4  ,'darkorange']],

css : { left:30,bottom:110,opacity:0,fontSize:'12px' },

animateIn: { opacity:1},

animateOut:{ opacity:0},

})

.addComponent('ring-2',{

type : 'ring',

width : 140,height : 140,

data:[['测试' , .3  ,'darkorange']],

css : { left:30,bottom:110,opacity:0,fontSize:'12px' },

animateIn: { opacity:1},

animateOut:{ opacity:0},

})

.addComponent('ring-3',{

type : 'ring',

width : 140,height : 140,

data:[['测试' , .2  ,'darkorange']],

css : { right:30,bottom:110,opacity:0,fontSize:'12px' },

animateIn: { opacity:1},

animateOut:{ opacity:0},

})

.addComponent('ring-3',{

type : 'ring',

width : 140,height : 140,

data:[['测试' , .1  ,'darkorange']],

css : { left:70,bottom:40,opacity:0,fontSize:'12px' },

animateIn: { opacity:1},

animateOut:{ opacity:0},

})

.addComponent('ring-3',{

type : 'ring',

width : 140,height : 140,

data:[['测试' , .1  ,'darkorange']],

css : { right:70,bottom:40,opacity:0,fontSize:'12px' },

animateIn: { opacity:1},

animateOut:{ opacity:0},

})

.addPage()

.addComponent('caption',{text:'测试'})//point

.addComponent('point',{

type : 'point',

width : 300,

height : 300,

data:[

['测试' , .4  ,'#ff7676'],

['测试' , .2  ,'#ffa3a4', 0 ,'-60%'],

['测试' , .3  ,'#99c1ff', '50%' ,'-120%']

],

css : {

bottom:'20%'

},

center : true,

})

.addPage('tail')

.addComponent('logo',{

center:true,

width:359,

height:129,

bg:'imgs/logo.png',

css:{top:240,opacity:0},

animateIn:{opacity:1,top:210},

animateOut:{opacity:0,top:240},

})

.addComponent('slogan',{

center:true,

width:314,

height:46,

bg:'imgs/tail_slogan.png',

css:{top:280,opacity:0},

animateIn:{opacity:1,left:'50%'},

animateOut:{opacity:0,left:'0%'},

delay:500

})

.addComponent('share',{

width:128,

height:120,

bg:'imgs/tail_share.png',

css:{opacity:0,top:110,right:110},

animateIn:{opacity:1,top:10,right:10},

animateOut:{opacity:0,top:110,right:110},

delay:1000

})

.addComponent('back',{

width:52,

height:50,

bg:'imgs/tail_back.png',

center:true,

onclick : function(){

$.fn.fullpage.moveTo( 1 )

}

})

.loader( [ 'imgs/tail_back.png','imgs/tail_share.png','imgs/tail_slogan.png' ] );

});

主要样式 H5_index.css

body{

margin: 0;

padding: 0;

}

.h5_page{

background-image: url(../imgs/page_bg.png);

}

.h5_page_face{

background-image: url(../imgs/face_bg.png);

}

.h5_component_name_slogan{

-webkit-animation:rock 2s infinite 2s;

}

@-webkit-keyframes rock{

0%{ transform:rotate(0deg)}

5%{ transform:rotate(3deg)}

10%{ transform:rotate(-4deg)}

15%{ transform:rotate(3deg)}

20%{ transform:rotate(-2deg)}

25%{ transform:rotate(1deg)}

30%{ transform:rotate(-1deg)}

70%{ transform:rotate(0deg)}

100%{ transform:rotate(0deg)}

}

.h5_component_name_caption{

background-image: url(../imgs/page_caption_bg.png);

width: 283px;

height: 160px;

text-align: center;

line-height: 140px;

font-size: 20px;

color: #fff;

}

.h5_component_name_back{

top: 30px;

-webkit-animation:back 2s infinite 2s;

}

@-webkit-keyframes back{

50%{ top: 20px; }

}

其他注意点：

代码借助的第三方插件比较多，不要太深究如何实现的，只要能够正常使用就ok了。

一直在学习，从未敢停歇。

代码下载：http://www.demodashi.com/demo/14989.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

通过js实现整屏滑动+全屏翻页+动画展示+线性图的更多相关文章

chromedriver 全屏翻页错误
from selenium import webdriver from selenium.common.exceptions import TimeoutException, StaleElement ...
js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
(转)js的左右滑动触屏事件
原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备触屏事件杂谈分 ...
HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
flex布局构建大屏框架并支持翻页动画、滚动表格功能
本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...
css3 --- 翻页动画 --- javascript --- 3d --- Action
用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...
css3 --- 翻页动画 --- javascript --- 3d --- 准备
用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...
6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
jQuery+fullPage.js演示10种全屏滚动
基本演示背景演示循环演示回调函数演示绑定菜单演示项目导航演示自动滚动 slide自动滚动响应式下载地址实例代码 <!DOCTYPE html> <html lang ...

随机推荐

Floyd算法-傻子也能看懂的弗洛伊德算法（转）
暑假,小哼准备去一些城市旅游.有些城市之间有公路,有些城市之间则没有,如下图.为了节省经费以及方便计划旅程,小哼希望在出发之前知道任意两个城市之前的最短路程. ...
java获取iPhone手机图片旋转角度处理
参考原博客地址:https://www.cnblogs.com/zhao1949/p/6473882.html 这里需要的jar文件: https://files.cnblogs.com/files/ ...
ceil()函数的应用-hdu1065
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1065 题目描述: floor(x) is the largest integer not great ...
vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
asp.net core选项Options模块的笔记
这篇博客是写给自己看的.已经不止一次看到AddOptions的出现,不管是在.net core源码还是别人的框架里面,都充斥着AddOptions.于是自己大概研究了下,没有深入,因为,我的功力还是不 ...
SQL的多种JOIN
Linux服务部署--Java（一）
网络配置一.配置dns 1.修改/etc/NetworkManager/NetworkManager.conf 文件,在main部分添加 “dns=none” 选项: 2.NetworkManage ...
JN5139 zigbee 资料
JN5139模块是一系列可以使使用者在最短的时间内在最低的成本下实现IEEE802.15.4或ZigBee兼容系统的表贴模块.此款模块减少了用户对于RF板设计和测试框架的昂贵漫长的开发时间.这些模块利 ...
[洛谷P1638]逛画展
[洛谷P1638]逛画展题目大意: 有\(n(n\le10^6)\)个格子,每个格子有一种颜色.颜色种数为\(m(m\le2000)\).求包含所有颜色的最小区间. 思路: 尺取法裸题. 思路: # ...
在win10中解决你要以何方式打开此 .xlsx
鼠标右击开始按钮,点击控制面板. 查看方式选择大图标或者小图标. 然后点击“默认程序”. 点击,设置默认程序. 在左侧程序蓝,选择你需要设定的程序.然后点击“将此程序设为默认值”.确定 ...

通过js实现整屏滑动+全屏翻页+动画展示+线性图

概述

详细

代码下载：http://www.demodashi.com/demo/14989.html

代码下载：http://www.demodashi.com/demo/14989.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

通过js实现整屏滑动+全屏翻页+动画展示+线性图的更多相关文章

随机推荐

热门专题