以下是 HTML5手机上下滑动翻页滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hamer</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/endpic.css">
<script type="text/javascript" src="js/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d" style="-webkit-user-select: none;">
<section class="u-alert">
<img style="display:none;" src="images/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d" style="height: 907px;">
<div class="translate-back" style="height: 907px;">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height:70%;">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/1.jpg); background-size: cover; height: 909px; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height:70%;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/2.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height:70%;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/3.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/4.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/5.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/6.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/7.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/8.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/9.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/10.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/11.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/12.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/13.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/14.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/15.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/16.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/17.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/18.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/19.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/20.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
</div>
</section>
<section class="u-pageLoading"><img src="images/load.gif" alt="loading"></section>
<script src="js/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/99_main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JS代码(coffee.js):
/** * 音符漂浮插件 * ----------------------------- * 作者：叼怎么写！- -|| * 时间：2014-03-21 * 准则：zepto * 联系：wechat--shoe11414255 * 一张网页，要经历怎样的过程，才能抵达用户面前 * 一个特效，要经历这样的修改，才能让用户点个赞 * 一个产品，创意源于生活，源于内心，需要慢慢品味 ********************************************************************************************* * 这是别人写的东西，我只是重复利用，微调了下--努力努力 ^-^|| * * -----------保持队形------------------ * <div id='coffee'></div> *********************************************************************************************/
// Zepto.js// (c) 2010-2014 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license.;
(function($,undefined){
var prefix = '',eventPrefix,endEventName,endAnimationName,vendors ={
Webkit:'webkit',Moz:'',O:'o'}
,document = window.document,testEl = document.createElement('div'),supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,transform,transitionProperty,transitionDuration,transitionTiming,transitionDelay,animationName,animationDuration,animationTiming,animationDelay,cssReset ={
}
function dasherize(str){
return str.replace(/([a-z])([A-Z])/,'$1-$2').toLowerCase()}
function normalizeEvent(name){
return eventPrefix ? eventPrefix + name:name.toLowerCase()}
$.each(vendors,function(vendor,event){
if (testEl.style[vendor + 'TransitionProperty'] !== undefined){
prefix = '-' + vendor.toLowerCase() + '-' eventPrefix = event return false}
}
) transform = prefix + 'transform' cssReset[transitionProperty = prefix + 'transition-property'] = cssReset[transitionDuration = prefix + 'transition-duration'] = cssReset[transitionDelay = prefix + 'transition-delay'] = cssReset[transitionTiming = prefix + 'transition-timing-function'] = cssReset[animationName = prefix + 'animation-name'] = cssReset[animationDuration = prefix + 'animation-duration'] = cssReset[animationDelay = prefix + 'animation-delay'] = cssReset[animationTiming = prefix + 'animation-timing-function'] = '' $.fx ={
off:(eventPrefix === undefined && testEl.style.transitionProperty === undefined),speeds:{
_default:400,fast:200,slow:600}
,cssPrefix:prefix,transitionEnd:normalizeEvent('TransitionEnd'),animationEnd:normalizeEvent('AnimationEnd')}
$.fn.animate = function(properties,duration,ease,callback,delay){
if ($.isFunction(duration)) callback = duration,ease = undefined,duration = undefined if ($.isFunction(ease)) callback = ease,ease = undefined if ($.isPlainObject(duration)) ease = duration.easing,callback = duration.complete,delay = duration.delay,duration = duration.duration if (duration) duration = (typeof duration == 'number' ? duration:($.fx.speeds[duration] || $.fx.speeds._default)) / 1000 if (delay) delay = parseFloat(delay) / 1000 return this.anim(properties,duration,ease,callback,delay)}
$.fn.anim = function(properties,duration,ease,callback,delay){
var key,cssValues ={
}
,cssProperties,transforms = '',that = this,wrappedCallback,endEvent = $.fx.transitionEnd,fired = false if (duration === undefined) duration = $.fx.speeds._default / 1000 if (delay === undefined) delay = 0 if ($.fx.off) duration = 0 if (typeof properties == 'string'){
// keyframe animation cssValues[animationName] = properties cssValues[animationDuration] = duration + 's' cssValues[animationDelay] = delay + 's' cssValues[animationTiming] = (ease || 'linear') endEvent = $.fx.animationEnd}
else{
cssProperties = [] // CSS transitions for (key in properties) if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') ' else cssValues[key] = properties[key],cssProperties.push(dasherize(key)) if (transforms) cssValues[transform] = transforms,cssProperties.push(transform) if (duration > 0 && typeof properties === 'object'){
cssValues[transitionProperty] = cssProperties.join(',') cssValues[transitionDuration] = duration + 's' cssValues[transitionDelay] = delay + 's' cssValues[transitionTiming] = (ease || 'linear')}
}
wrappedCallback = function(event){
if (typeof event !== 'undefined'){
if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below" $(event.target).unbind(endEvent,wrappedCallback)}
else $(this).unbind(endEvent,wrappedCallback) // triggered by setTimeout fired = true $(this).css(cssReset) callback && callback.call(this)}
if (duration > 0){
this.bind(endEvent,wrappedCallback) // transitionEnd is not always firing on older Android phones // so make sure it gets fired setTimeout(function(){
if (fired) return wrappedCallback.call(that)}
,(duration * 1000) + 25)}
// trigger page reflow so new elements can animate this.size() && this.get(0).clientLeft this.css(cssValues) if (duration <= 0) setTimeout(function(){
that.each(function(){
wrappedCallback.call(this)}
)}
,0) return this}
testEl = null}
)(Zepto)// 音符的漂浮的插件制作--zpeto扩展;
(function($){
// 利用zpeto的animate的动画-css3的动画-easing为了css3的easing(zpeto没有提供easing的扩展)$.fn.coffee = function(option){
// 动画定时器 var __time_val=null;
var __time_wind=null;
var __flyFastSlow = 'cubic-bezier(.09,.64,.16,.94)';
// 初始化函数体，生成对应的DOM节点var $coffee = $(this);
var opts = $.extend({
}
,$.fn.coffee.defaults,option);
// 继承传入的值 // 漂浮的DOM var coffeeSteamBoxWidth = opts.steamWidth;
var $coffeeSteamBox = $('<div class="coffee-steam-box"></div>') .css({
'height':opts.steamHeight,'width':opts.steamWidth,'left':60,'top':-50,'position':'absolute','overflow':'hidden','z-index':0}
) .appendTo($coffee);
// 动画停止函数处理 $.fn.coffee.stop = function(){
clearInterval(__time_val);
clearInterval(__time_wind);
}
// 动画开始函数处理 $.fn.coffee.start = function(){
__time_val = setInterval(function(){
steam();
}
,rand( opts.steamInterval / 2,opts.steamInterval * 2 ));
__time_wind = setInterval(function(){
wind();
}
,rand( 100,1000 )+ rand( 1000,3000))}
return $coffee;
// 生成漂浮物 function steam(){
// 设置飞行体的样式var fontSize = rand( 8,opts.steamMaxSize );
// 字体大小 var steamsFontFamily = randoms( 1,opts.steamsFontFamily );
// 字体类型 var color = '#'+ randoms(6,'0123456789ABCDEF' );
// 字体颜色var position = rand( 0,44 );
// 起初位置var rotate = rand(-90,89);
// 旋转角度var scale = rand02(0.4,1);
// 大小缩放 var transform = $.fx.cssPrefix+'transform';
// 设置音符的旋转角度和大小 transform = transform+':rotate('+rotate+'deg) scale('+scale+');
' // 生成fly飞行体var $fly = $('<span class="coffee-steam">'+ randoms( 1,opts.steams ) +'</span>');
var left = rand( 0,coffeeSteamBoxWidth - opts.steamWidth - fontSize );
if( left > position ) left = rand( 0,position );
$fly .css({
'position':'absolute','left':position,'top':opts.steamHeight,'font-size:':fontSize+'px','color':color,'font-family':steamsFontFamily,'display':'block','opacity':1}
) .attr('style',$fly.attr('style')+transform) .appendTo($coffeeSteamBox) .animate({
top:rand(opts.steamHeight/2,0),left:left,opacity:0}
,rand( opts.steamFlyTime / 2,opts.steamFlyTime * 1.2 ),__flyFastSlow,function(){
$fly.remove();
$fly = null;
}
);
}
;
// 风行，可以让漂浮体，左右浮动function wind(){
// 左右浮动的范围值 var left = rand( -10,10 );
left += parseInt($coffeeSteamBox.css('left'));
if(left>=54) left=54;
else if(left<=34) left=34;
// 移动的函数 $coffeeSteamBox.animate({
left:left}
,rand( 1000,3000),__flyFastSlow);
}
;
// 随即一个值 // 可以传入一个数组和一个字符串 // 传入数组的话，随即获取一个数组的元素 // 传入字符串的话，随即获取其中的length的字符function randoms( length,chars ){
length = length || 1;
var hash = '';
//var maxNum = chars.length - 1;
// last-onevar num = 0;
// fisrt-onefor( i = 0;
i < length;
i++ ){
num = rand( 0,maxNum - 1 );
hash += chars.slice( num,num + 1 );
}
return hash;
}
;
// 随即一个数值的范围中的值--整数function rand(mi,ma){
var range = ma - mi;
var out = mi + Math.round( Math.random() * range);
return parseInt(out);
}
;
// 随即一个数值的范围中的值--浮点function rand02(mi,ma){
var range = ma - mi;
var out = mi + Math.random() * range;
return parseFloat(out);
}
;
}
;
$.fn.coffee.defaults ={
steams:['jQuery','HTML5','HTML6','CSS2','CSS3','JS','$.fn()','char','short','if','float','else','type','case','function','travel','return','array()','empty()','eval','C++','JAVA','PHP','JSP','.NET','while','this','$.find();
','float','$.ajax()','addClass','width','height','Click','each','animate','cookie','bug','Design','Julying','$(this)','i++','Chrome','Firefox','Firebug','IE6','Guitar','Music','攻城师','旅行','王子墨','啤酒'],/*漂浮物的类型，种类*/
steamsFontFamily:['Verdana','Geneva','Comic Sans MS','MS Serif','Lucida Sans Unicode','Times New Roman','Trebuchet MS','Arial','Courier New','Georgia'],/*漂浮物的字体类型*/
steamFlyTime:5000,/*Steam飞行的时间,单位 ms 。（决定steam飞行速度的快慢）*/
steamInterval:500,/*制造Steam时间间隔,单位 ms.*/
steamMaxSize:30,/*随即获取漂浮物的字体大小*/
steamHeight:200,/*飞行体的高度*/
steamWidth:300 /*飞行体的宽度*/
}
;
$.fn.coffee.version = '2.0.0';
// 更新为音符的悬浮---重构的代码}
)(Zepto);
JS代码(offline.js):
// 检查更新离线缓存清单if(window.applicationCache){
window.applicationCache.addEventListener('updateready',function(e){
if (window.applicationCache.status == window.applicationCache.UPDATEREADY){
applicationCache.swapCache()window.location.reload();
}
else{
// Manifest没有改动，nothing to do}
}
,false);
// 错误处理window.applicationCache.addEventListener('error',function(e){
// nothing to doreturn false;
}
,false);
}
CSS代码(endpic.css):
@charset "utf-8";.ad_foot li{margin:0 auto 1em;font-size:1.8em;padding:15px;background:#FFF;}
.ad_foot li a{display:block;}
.ad_foot li .l{width:75px;height:75px;float:left;overflow:hidden;}
.ad_foot li .l img{width:75px;width:75px;}
.ad_foot li .r{width:78%;float:left;margin-left:30px;color:#666;overflow:hidden;}
.ad_foot li .r p{color:#999;font-size:1.2em;}
.ad_foot li .r span{font-size:0.8em;}
.ad_foot li .r i{font-style:normal;}
.lazy-img,.lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family:"Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*声音播放按钮*/
#song_img{width:293px;height:41px;display:block;position:absolute;right:4.1em;top:1.6em;font-size:1.7em;text-align:center;line-height:41px;color:#FFF;background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推荐下在*/
.ad_list{margin-top:2em;}
.ad_list li{width:46%;background:none;padding:0;float:left;margin-bottom:1em;}
.ad_list li.r{float:right;}
.ad_list li a img{width:100%;height:auto;}
.ad_foot h3{width:100%;height:48px;line-height:48px;background:#F9F5EC;}
.ad_foot h3 a{display:inline-block;color:#444;width:50%;text-align:center;font-size:1.5em;height:48px;border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active{color:#FFF;background:#FF9240;}
.magazine_1 li{width:100%;margin-bottom:1em;font-size:1.8em;padding:15px;background:#FFF;}
.magazine_1 li a{display:block;}
.magazine_1 li .l{width:75px;height:75px;float:left;overflow:hidden;}
.magazine_1 li .l img{width:75px;height:75px;}
.magazine_1 li .r{width:78%;float:left;margin-left:30px;color:#666;overflow:hidden;}
.magazine_1 li .r p{color:#999;font-size:1.2em;}
.magazine_1 li .r span{font-size:0.8em;}
.ad_foot li .r i{font-style:normal;}
CSS代码(main.css):
/** * gobal全局样式 * ---------------------- * 作者：叼怎么写！ * 时间：2014-03-21 * 准则：NEC * 联系：wechat--shoe11414255 * 创意源于生活，代码如诗从你我开始 * OOCSS虽好，需培养，需规范，需慢慢品尝 *********************************************************************************************/
@charset "utf-8";/* =reset 网页样式重置------------------------------------------------------------------------------------------------------------------------------*/
html{font-size:1em;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;/*强制firefox出现滑动条*/
}
body{font-size:0.75em;}
label{cursor:pointer;}
a:link,a:visited{text-decoration:none;}
input:focus{outline:none;}
input,button,select,textarea{outline:none;/*-webkit-appearance:none;*/
/*强制去除表单自带的样式*/
}
textarea{resize:none;/*-webkit-appearance:none;*/
/*强制去除textarea自带的样式*/
}
input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px white inset;}
/*利用阴影来填充掉input自动填充色*/
textarea,input,select{background:none;border:none;margin:0;padding:0;}
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,menu,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{margin:0;padding:0;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption{display:block;}
/*html5设置*/
h1,h2,h3,h4,h5,h6,th,td,table,input,button,select,textarea,sub{font-size:1em;}
body,input,button,select,textarea,sub{font-family:Arial,sans-serif;}
em,cite,address,optgroup{font-style:normal;}
kbd,samp,code{font-family:monospace;}
img,input,button,select,textarea{vertical-align:middle;outline:none;}
ul,ol{list-style:none;}
img,fieldset{border:0;}
abbr,acronym{cursor:help;border-bottom:1px dotted black;}
table{width:100%;border-spacing:0;border:0;}
table th,table td{border:0;}
legend,hr{overflow:hidden;position:absolute;top:0;left:0;}
legend,hr,caption{visibility:hidden;font-size:0;width:0;height:0;line-height:0;}
/** * = global 统一样式 *******************************************************************************************************/
/* 改变动画的效果方式*/
*{-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-ms-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
html{height:100%;}
body{position:relative;font-family:"微软雅黑";width:640px;max-width:640px;min-width:640px;height:100%;margin:0 auto;}
body h1,body h2,body h3,body h4,body h5,body h6,body strong,body em{font-weight:normal;}
/*微软雅体 将原有的bold属性去掉*/
textarea:focus,input:focus{border:1px solid #71b643;}
/*sprite图片合并*/
.css_sprite01{background-image:url(../images/css_sprite01.png)!important;background-repeat:no-repeat!important;}
/** * = function 功能样式 *******************************************************************************************************/
.f-ofh{overflow:hidden;height:100%!important;}
/*隐藏内容-overflow-hidden*/
.f-hide{display:none!important;}
/*隐藏内容*/
.f-tc{text-align:center;}
.f-tr{text-align:right;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-fixed{position:fixed;}
.f-cur{cursor:pointer;}
/*bg-background*/
.s-bg-ddd{background:#ddd;}
/** * = unit 统一元件样式 *******************************************************************************************************/
/** * 箭头指示元件 * -u-arrow */
.u-arrow{position:fixed;bottom:30px;left:50%;z-index:150;width:80px;height:80px;margin-left:-39px;/*background:rgba(160,160,160,0.6);border-radius:50%;*/
}
.u-arrow p{position:absolute;top:50%;left:50%;margin:-14px 0 0 -25px;width:50px;height:28px;background-position:0 -82px;-webkit-animation:start 1.5s infinite ease-in-out;-moz-animation:start 1.5s infinite ease-in-out;animation:start 1.5s infinite ease-in-out;}
/** * 声音元件 * -u-audio */
.u-audio{position:absolute;top:40px;right:0;width:132px;height:73px;z-index:200;}
.u-audio .res_audio{position:absolute;top:0;left:0;opacity:0;height:0;width:0;}
.u-audio .btn_audio{width:100%;padding-top:29px;height:44px;}
.u-audio .btn_audio strong,.u-audio .btn_audio .audio_open{display:inline-block;height:44px;line-height:44px;vertical-align:middle;}
.u-audio .btn_audio strong{width:57px;font-size:24px;color:#fff;opacity:1;}
.u-audio .btn_audio .audio_open{position:absolute;bottom:0;left:56px;width:44px;}
.u-audio .btn_audio strong.z-hide{opacity:0;}
.u-audio .btn_audio strong.z-move{-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-ms-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s;}
.u-audio.z-low{z-index:1;}
/** * loading * -u-pageLoading */
.u-pageLoading{display:none;position:fixed;top:0;left:0;z-index:99999;height:100%;width:100%;background:rgba(0,0,0,0.6);}
.u-pageLoading img{position:absolute;top:40%;left:50%;height:100px;width:100px;margin:-50px 0 0 -50px;}
/** * 提示小纸条 * -u-note */
.u-note{position:fixed;left:120px;top:50%;margin-top:-40px;width:400px;padding:15px 0;text-align:center;font-size:26px;border-radius:8px;opacity:0;z-index:-1;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;}
.u-note-error{background:#f48813;}
.u-note-sucess{background:#55e224;}
.u-note.on{opacity:1;z-index:99;}
/** * = Layout 布局样式 *******************************************************************************************************/
.p-ct{position:relative;width:640px;height:100%;overflow:hidden;}
.p-ct.fixed{overflow:hidden;}
.translate-front{position:fixed;top:0;left:0;z-index:100;height:100%;width:100%;opacity:0;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s;}
.translate-front .mengban-warn{position:absolute;}
.translate-front.z-show{opacity:1;}
.translate-back{position:relative;width:100%;height:100%;}
/** * = modle 模块样式 *******************************************************************************************************/
/** * 单页面page模块 * -m-page */
.m-page{position:absolute;top:0;left:0;width:100%;z-index:9;background:#ddd;}
.m-page .page-con{position:relative;width:100%;height:100%;overflow:hidden;}
.m-page.active{z-index:40;}
.m-page.fixed{position:fixed;}
.m-page.move{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
/** * 大图文模块 * -m-bigTxt */
.bigTxt-bd,.bigTxt-arrow,.bigTxt-detail,.bigTxt-detail p{-webkit-transition:all .8s;-moz-transition:all .8s;-ms-transition:all .8s;-o-transition:all .8s;transition:all .8s;}
.bigTxt-bd{position:absolute;top:50px;left:30px;width:450px;overflow:hidden;border-radius:12px;background:rgba(255,255,255,0.7);opacity:0;-webkit-transform:translate(200px,0);-moz-transform:translate(200px,0);-ms-transform:translate(200px,0);-o-transform:translate(200px,0);transform:translate(200px,0);}
.bigTxt-bd p{padding:0 65px 0 25px;color:#000;}
.bigTxt-title{position:absolute;top:0;left:0;width:100%;padding:25px 0;overflow:hidden;font-size:28px;}
.bigTxt-title p{height:100%;line-height:130%;overflow:hidden;}
.bigTxt-arrow{position:absolute;bottom:5px;right:20px;display:inline-block;width:34px;height:34px;background-position:0 -46px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
.bigTxt-detail{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;}
.bigTxt-detail p{width:400px;overflow:hidden;padding:25px;line-height:150%;font-size:24px;border-top:2px solid #fff;}
.bigTxt-btn{position:absolute;bottom:120px;left:50%;width:480px;height:80px;margin-left:-240px;background-size:auto!important;}
.bigTxt-btn a{display:inline-block;width:100%;height:80px;line-height:80px;text-align:center;font-size:36px;color:#000;letter-spacing:0.5em;}
.bigTxt-weixin{display:none;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;background:rgba(0,0,0,0.7);}
.bigTxt-weixin img{max-width:100%;}
.bigTxt-weixin.z-show{display:block;}
.bigTxt-arrow.z-toggle{-webkit-transform:rotate(405deg);-moz-transform:rotate(405deg);-ms-transform:rotate(405deg);-o-transform:rotate(405deg);transform:rotate(405deg);}
.bigTxt-detail.z-show p,.z-animate .bigTxt-bd{opacity:1;-webkit-transform:translate(0,0)!important;-moz-transform:translate(0,0)!important;-ms-transform:translate(0,0)!important;-o-transform:translate(0,0)!important;transform:translate(0,0)!important;}
/**/
** * = pluns 插件样式 *******************************************************************************************************/
/*lazy-img*/
.lazy-img,.lazy-finish{background-size:cover;background-repeat:no-repeat;background-position:center;}
/*声音*/
.coffee-steam-box{display:none;}
/*轮播图*/
.m-imgBox{height:380px;width:640px;}
/*地图*/
.ylmap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:300;overflow:hidden;-webkit-transition:all 0.8s;-moz-transition:all 0.8s;-ms-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;-webkit-transform:translate(0,100%);-moz-transform:translate(0,100%);-ms-transform:translate(0,100%);-o-transform:translate(0,100%);transform:translate(0,100%);}
.ylmap.mapOpen{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0);}
.ylmap.show{display:block;}
.ylmap .bk{position:absolute;width:100%;height:100%;text-align:center;z-index:-1;background:#efebed;}
.ylmap .bk span{display:inline-block;margin-top:48%;width:59px;height:49px;background-position:-72px -93px;}
.ylmap .tit p a span{background-position:-72px -144px;}
/** * = animate 动画样式 *******************************************************************************************************/
/*箭头指示引导*/
@-webkit-keyframes start{0%,30%{opacity:0;-webkit-transform:translate(0,10px);}
60%{opacity:1;-webkit-transform:translate(0,0);}
100%{opacity:0;-webkit-transform:translate(0,-8px);}
}
@-moz-keyframes start{0%,30%{opacity:0;-moz-transform:translate(0,10px);}
60%{opacity:1;-moz-transform:translate(0,0);}
100%{opacity:0;-moz-transform:translate(0,-8px);}
}
@keyframes start{0%,30%{opacity:0;transform:translate(0,10px);}
60%{opacity:1;transform:translate(0,0);}
100%{opacity:0;transform:translate(0,-8px);}
}
/*封面手引*/
@keyframes fengJump{0%{transform:translateY(0);}
20%{transform:translateY(0);}
40%{transform:translateY(-40px);}
50%{transform:translateY(0);}
60%{transform:translateY(-15px);}
80%{transform:translateY(0);}
100%{transform:translateY(0);}
}
@-webkit-keyframes fengJump{0%{-webkit-transform:translateY(0);}
20%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-40px);}
50%{-webkit-transform:translateY(0);}
60%{-webkit-transform:translateY(-15px);}
80%{-webkit-transform:translateY(0);}
100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes fengJump{0%{-moz-transform:translateY(0);}
20%{-moz-transform:translateY(0);}
40%{-moz-transform:translateY(-40px);}
50%{-moz-transform:translateY(0);}
60%{-moz-transform:translateY(-15px);}
80%{-moz-transform:translateY(0);}
100%{-moz-transform:translateY(0);}
}
@-ms-keyframes fengJump{0%{-ms-transform:translateY(0);}
20%{-ms-transform:translateY(0);}
40%{-ms-transform:translateY(-40px);}
50%{-ms-transform:translateY(0);}
60%{-ms-transform:translateY(-15px);}
80%{-ms-transform:translateY(0);}
100%{-ms-transform:translateY(0);}
}
@-o-keyframes fengJump{0%{-o-transform:translateY(0);}
20%{-o-transform:translateY(0);}
40%{-o-transform:translateY(-40px);}
50%{-o-transform:translateY(0);}
60%{-o-transform:translateY(-15px);}
80%{-o-transform:translateY(0);}
100%{-o-transform:translateY(0);}
}
/*地图跳动*/
@keyframes mapJump{0%{transform:scale(0.1);opacity:0;}
90%{transform:scale(2);opacity:0.9;}
100%{transform:scale(2);opacity:1;}
}
@-webkit-keyframes mapJump{0%{-webkit-transform:scale(0.1);opacity:0;}
90%{-webkit-transform:scale(2);opacity:0.9;}
100%{-webkit-transform:scale(2);opacity:1;}
}
@-moz-keyframes mapJump{0%{-moz-transform:scale(0.1);opacity:0;}
90%{-moz-transform:scale(2);opacity:0.9;}
100%{-moz-transform:scale(2);opacity:1;}
}
/** * 模版提示的样式以及动画 */
.m-alert strong{font-size:35px;opacity:0;-webkit-transition:opacity .8s;-moz-transition:opacity .8s;transition:opacity .8s;}
.m-alert strong.z-show{opacity:1;}
.scene{position:relative;display:block;width:300px;height:200px;margin:0 auto;}
.plane,.cloud{position:absolute;}
.plane{display:block;margin:0 auto;left:30%;-webkit-animation:anim-plane 1s linear infinite alternate forwards;-moz-animation:anim-plane 1s linear infinite alternate forwards;animation:anim-plane 1s linear infinite alternate forwards;-webkit-transform:translateY(80px);-moz-transform:translateY(80px);transform:translateY(80px);}
.cloud{display:block;height:40px;width:53px;margin:0 auto;-webkit-animation:10s linear infinite normal both;-moz-animation:10s linear infinite normal both;animation:10s linear infinite normal both;-webkit-animation-name:move,fade;-moz-animation-name:move,fade;animation-name:move,fade;background:url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2xvdWQiIHZpZXdCb3g9IjAgMCA1MiA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MnB4IiBoZWlnaHQ9IjQwcHgiPgoJPGRlZnM+CgkJPGZpbHRlciBpZD0iZjEiIHg9Ii0xMDAlIiB5PSItMTAwJSIgd2lkdGg9IjMwMCUiIGhlaWdodD0iMzAwJSI+IAoJCQk8ZmVPZmZzZXQgcmVzdWx0PSJvdXQiIGluPSJTb3VyY2VHcmFwaGljIiBkeD0iMCIgZHk9IjEiLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSJvdXQiIGluPSJvdXQiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjQgMCIvPgoJCQk8ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJvdXQiIGluPSJvdXQiIHN0ZERldmlhdGlvbj0iMiIvPgoJCQk8ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJvdXQiIG1vZGU9Im5vcm1hbCIgcmVzdWx0PSJkcCIvPgoJCTwvZmlsdGVyPgoJPC9kZWZzPiAKCTxwYXRoIGlkPSJmZy1jbG91ZCIgZmlsdGVyPSJ1cmwoI2YxKSIgZD0iTTYuMyAzNS4xQzQuNyAzNC4yLTAuNCAzMi4zIDEuNCAyNSAzLjEgMTguMSA4LjcgMTkuNSA4LjcgMTkuNSA4LjcgMTkuNSAzLjIgMTQuMSAxMC40IDYuOCAxNi45IDAuMiAyMy4xIDQuNiAyMy4xIDQuNiAyMy4xIDQuNiAzMC0xLjcgMzUuMiAyLjQgNDQuNiA5LjcgNDIuOCAyNS4zIDQyLjggMjUuMyA0Mi44IDI1LjMgNDggMjIuNiA0OS44IDI4LjYgNTEgMzIuNyA0NiAzNS44IDQyLjggMzYuNyAzOS43IDM3LjUgOC45IDM2LjYgNi4zIDM1LjFaIiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4=);}
.cloud--small{top:65px;-webkit-animation-duration:6s;-moz-animation-duration:6s;animation-duration:6s;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);transform:scale(0.5);}
.cloud--medium{top:95px;-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);transform:scale(0.7);}
.cloud--large{top:95px;-webkit-animation-duration:4.5s;-moz-animation-duration:4.5s;animation-duration:4.5s;-webkit-animation-delay:2.5s;-moz-animation-delay:2.5s;animation-delay:2.5s;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);transform:scale(0.8);}
/*飞机*/
@keyframes anim-plane{to{transform:translateY(95px);}
}
@-webkit-keyframes anim-plane{to{-webkit-transform:translateY(95px);}
}
@-moz-keyframes anim-plane{to{-moz-transform:translateY(95px);}
}
/*云*/
@keyframes fade{0%{opacity:0;}
10%{opacity:1;}
90%{opacity:1;}
100%{opacity:0;}
}
@-webkit-keyframes fade{0%{opacity:0;}
10%{opacity:1;}
90%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fade{0%{opacity:0;}
10%{opacity:1;}
90%{opacity:1;}
100%{opacity:0;}
}
@keyframes move{from{left:200px;}
to{left:0px;}
}
@-webkit-keyframes move{from{left:200px;}
to{left:0px;}
}
@-moz-keyframes move{from{left:200px;}
to{left:0px;}
}
/*播放按钮*/
@-webkit-keyframes video_btnPlay{0%{-webkit-transform:scale(1);opacity:0.8;}
100%{-webkit-transform:scale(2);opacity:0.3;}
}
@-moz-keyframes video_btnPlay{0%{-moz-transform:scale(1);opacity:0.8;}
100%{-moz-transform:scale(2);opacity:0.3;}
}
@keyframes video_btnPlay{0%{transform:scale(1);opacity:0.8;}
100%{transform:scale(2);opacity:0.3;}
}
分享到QQ
分享到微博
微信扫一扫
