Skip to content

Instantly share code, notes, and snippets.

@naoyeye

naoyeye/canvas.js

Last active December 19, 2018 02:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save naoyeye/385da5d015a84a26b71c to your computer and use it in GitHub Desktop.
Save naoyeye/385da5d015a84a26b71c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas.js
/**
* canvas蒙板图片处理插件
* -----------------------------
* 作者：叼怎么写！- -||
* 时间：2014-03-21
* 准则：JS原型
* 联系：wechat--shoe11414255
* 一张网页，要经历怎样的过程，才能抵达用户面前
* 一个特效，要经历这样的修改，才能让用户点个赞
* 一个产品，创意源于生活，源于内心，需要慢慢品味
*********************************************************************************************
* 这是别人写的东西，我只是重复利用，微调了下--努力努力 ^-^||
*
* -----------保持队形------------------
* <div id='Lottery'></div>
*********************************************************************************************/
/**
* [Lottery description]蒙板插件
* @param {DOM} node canvas对象父辈
* @param {地址值} url 背景图片或者文字
* @param {地址值} canvas_url 蒙板的图片
* @param {DOM类型} type 蒙板的类型
* @param {px} w 画布的宽度
* @param {px} h 画布的高度
* @param {fn} callback 回调函数
*/
function Lottery(node, cover, coverType, width, height, drawPercentCallback) {
//canvas
this.conNode = node;
// 背景canvas
this.background = null;
this.backCtx = null;
// 蒙板canvas
this.mask = null;
this.maskCtx = null;
// 背景图
this.lottery = null;
this.lotteryType = 'image';
// 蒙板图
this.cover = cover || "#000";
this.coverType = coverType;
this.pixlesData = null;
// canvas宽高
this.width = width;
this.height = height;
this.lastPosition = null;
// 回调函数
this.drawPercentCallback = drawPercentCallback;
this.vail = false;
}
Lottery.prototype = {
// 创建元素
createElement: function (tagName, attributes) {
var ele = document.createElement(tagName);
for (var key in attributes) {
ele.setAttribute(key, attributes[key]);
}
return ele;
},
// 获取当前canvas透明像素的百分比
getTransparentPercent: function(ctx, width, height) {
// 获取画布的像素点
var imgData = ctx.getImageData(0, 0, width, height),
pixles = imgData.data,
transPixs = [];
// 计算画布中，透明程度（第四个值为透明度0-255）
for (var i = 0, j = pixles.length; i < j; i += 4) {
var a = pixles[i + 3];
if (a < 128) {
transPixs.push(i);
}
}
return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
},
// 重置画布
resizeCanvas: function (canvas, width, height) {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').clearRect(0, 0, width, height);
},
resizeCanvas_w : function(canvas, width, height){
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').clearRect(0, 0, width, height);
// canvas画布，生成对应的DOM开始--(前者判断是否生成背景图)
if(this.vail) this.drawLottery();
else this.drawMask();
},
// 画布上画点
drawPoint: function (x, y, fresh) {
this.maskCtx.beginPath();
this.maskCtx.arc(x, y, 30, 0, Math.PI * 2);
this.maskCtx.fill();
// 蒙板-路径还是记录
this.maskCtx.beginPath();
// 画笔大小
this.maskCtx.lineWidth = 60;
// 前者是线的末端样式，后者是线连接处的样式---圆
this.maskCtx.lineCap = this.maskCtx.lineJoin = 'round';
// 画点
if (this.lastPosition) {
this.maskCtx.moveTo(this.lastPosition[0], this.lastPosition[1]);
}
this.maskCtx.lineTo(x, y);
this.maskCtx.stroke();
this.lastPosition = [x,y];
this.mask.style.zIndex = (this.mask.style.zIndex == 20) ? 21 : 20;
},
// 事件处理
bindEvent: function () {
var _this = this;
// 判断是否为移动端
var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
var clickEvtName = device ? 'touchstart' : 'mousedown';
var moveEvtName = device? 'touchmove': 'mousemove';
if (!device) {
var isMouseDown = false;
_this.conNode.addEventListener('mouseup', function(e) {
e.preventDefault();
isMouseDown = false;
var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height);
if(per>=50){
// 执行回调函数
if(typeof(_this.drawPercentCallback)=='function') _this.drawPercentCallback();
}
}, false);
} else {
_this.conNode.addEventListener("touchmove", function(e) {
if (isMouseDown) {
e.preventDefault();
}
if (e.cancelable) { e.preventDefault(); }else{window.event.returnValue = false;}
}, false);
_this.conNode.addEventListener('touchend', function(e) {
isMouseDown = false;
var per = _this.getTransparentPercent(_this.maskCtx, _this.width, _this.height);
if(per>=50){
// 执行回调函数
if(typeof(_this.drawPercentCallback)=='function') _this.drawPercentCallback();
}
}, false);
}
// move事件来画点
this.mask.addEventListener(clickEvtName, function (e) {
e.preventDefault();
// 记录开始move
isMouseDown = true;
var x = (device ? e.touches[0].pageX : e.pageX||e.x);
var y = (device ? e.touches[0].pageY : e.pageY||e.y);
// 画点
_this.drawPoint(x, y,isMouseDown);
}, false);
this.mask.addEventListener(moveEvtName, function (e) {
e.preventDefault();
// 记录是否开始move
if (!isMouseDown) return false;
e.preventDefault();
var x = (device ? e.touches[0].pageX : e.pageX||e.x);
var y = (device ? e.touches[0].pageY : e.pageY||e.y);
// 画点
_this.drawPoint(x, y,isMouseDown);
}, false);
},
// 画背景图
drawLottery: function () {
if (this.lotteryType == 'image') {
var image = new Image(),
_this = this;
image.onload = function () {
this.width = _this.width;
this.height = _this.height;
_this.resizeCanvas(_this.background, _this.width, _this.height);
_this.backCtx.drawImage(this, 0, 0, _this.width, _this.height);
_this.drawMask();
}
image.src = this.lottery;
} else if (this.lotteryType == 'text') {
this.width = this.width;
this.height = this.height;
this.resizeCanvas(this.background, this.width, this.height);
this.backCtx.save();
this.backCtx.fillStyle = '#FFF';
this.backCtx.fillRect(0, 0, this.width, this.height);
this.backCtx.restore();
this.backCtx.save();
var fontSize = 30;
this.backCtx.font = 'Bold ' + fontSize + 'px Arial';
this.backCtx.textAlign = 'center';
this.backCtx.fillStyle = '#F60';
this.backCtx.fillText(this.lottery, this.width / 2, this.height / 2 + fontSize / 2);
this.backCtx.restore();
this.drawMask();
}
},
// 画蒙板
drawMask: function() {
if (this.coverType == 'color') {
this.maskCtx.fillStyle = this.cover;
this.maskCtx.fillRect(0, 0, this.width, this.height);
this.maskCtx.globalCompositeOperation = 'destination-out';
} else if (this.coverType == 'image'){
var image = new Image(),
_this = this;
image.onload = function () {
_this.resizeCanvas(_this.mask, _this.width, _this.height);
var android = (/android/i.test(navigator.userAgent.toLowerCase()));
_this.maskCtx.globalAlpha=0.98;
// _this.maskCtx.drawImage(this, 0, 0,_this.width, _this.height);
_this.maskCtx.drawImage(this,0,0,this.width,this.height,0,0,_this.width,_this.height);
var fontSize = 50;
var txt = $('#ca-tips').val();
var gradient=_this.maskCtx.createLinearGradient(0,0,_this.width,0);
gradient.addColorStop("0","#fff");
gradient.addColorStop("1.0","#000");
_this.maskCtx.font = 'Bold ' + fontSize + 'px Arial';
_this.maskCtx.textAlign = 'left';
_this.maskCtx.fillStyle = gradient;
_this.maskCtx.fillText(txt,_this.width/2-_this.maskCtx.measureText(txt).width/2, 100);
_this.maskCtx.globalAlpha=1;
_this.maskCtx.globalCompositeOperation = 'destination-out';
}
image.src = this.cover;
}
},
// 函数初始化
init: function (lottery, lotteryType) {
// 判断是否传入背景图参数，并储存值
// 生成背景图的DOM
if(lottery){
this.lottery = lottery;
this.lottery.width = this.width;
this.lottery.height = this.height;
this.lotteryType = lotteryType || 'image';
this.vail = true;
}
if(this.vail){
this.background = this.background || this.createElement('canvas', {
style: 'position:fixed;left:50%;top:0;width:640px;margin-left:-320px;height:100%;background-color:transparent;'
});
}
// 生成蒙板DOM
this.mask = this.mask || this.createElement('canvas', {
style: 'position:fixed;left:50%;top:0;width:640px;margin-left:-320px;height:100%;background-color:transparent;'
});
this.mask.style.zIndex = 20;
// 将目标wrapDOM的HTML内容全部清空--(canvas-clear）
if (!this.conNode.innerHTML.replace(/[\w\W]| /g, '')) {
if(this.vail) this.conNode.appendChild(this.background);
this.conNode.appendChild(this.mask);
this.bindEvent();
}
if(this.vail) this.backCtx = this.backCtx || this.background.getContext('2d');
this.maskCtx = this.maskCtx || this.mask.getContext('2d');
// canvas画布，生成对应的DOM开始--(前者判断是否生成背景图)
if(this.vail) this.drawLottery();
else this.drawMask();
var _this = this;
window.addEventListener('resize',function(){
// canvas宽高
_this.width = document.documentElement.clientWidth;
_this.height = document.documentElement.clientHeight;
_this.resizeCanvas_w(_this.mask, _this.width, _this.height);
},false);
}
}
Raw
floating-notes.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-one
var num = 0; // fisrt-one
for( 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);
Raw
index.html
<!doctype html>
<html lang="ch" manifest="http://appcache.5.cn/2014/10/13/5383/index.appcache">
<head>
<title>从男妓到名模-JR-我为你传媒微杂志</title>
<meta name="keywords" content="我为你传媒,微杂志,手机阅读,二维码扫描">
<meta name="description" content="从男妓到名模-我为你传媒微杂志，JR。手机扫描二维码轻松阅读。">
<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="http://img0.hx.com/magazine/css/copyright.css"/>
<link rel="stylesheet" type="text/css" href="http://img0.hx.com/magazine/css/main.css"/>
<link rel="stylesheet" type="text/css" href="http://img0.hx.com/magazine/css/add2home.css"/>
<link rel="stylesheet" type="text/css" href="http://img0.hx.com/magazine/css/store.css"/>
<link rel="stylesheet" type="text/css" href="http://img0.hx.com/magazine/css/endpic.css"/>
<script type="text/javascript" src="http://img0.hx.com/magazine/js/offline.js"></script>
<!--移动端版本兼容 -->
<script type="text/javascript">
var mengvalue = -1;
//if(mengvalue<0){mengvalue=0;}
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
// andriod 2.3
if (version > 2.3) {
document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
// andriod 2.3以上
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
// 其他系统
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>
<!--移动端版本兼容 end -->
</head>
<body class='s-bg-ddd'>
<!--模版加载提示--><section class="u-alert"><img alt="从男妓到名模" style='display:none;' src="http://img0.hx.com/magazine/img/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><!--模版加载提示 end--><!-- 声音控件 --><section class='u-audio f-hide' data-src='http://img0.hx.com/20141013/543b38cfea7ea.mp3'>
<p id='coffee_flow' class="btn_audio">
<strong class='txt_audio z-hide'>关闭</strong><span class='css_sprite01 audio_open'></span>
</p>
</section><!-- 声音控件 end--><section class='u-arrow f-hide'>
<p class="css_sprite01">
</p>
</section><!-- 箭头指示引导 end--><!-- page页面内容 --><section class='p-ct'><!-- 旋转反面 -->
<div class='translate-back f-hide'>
<!-- 擦一擦--><input id="ca-tips" type="hidden" value=""/><!-- 蒙板背景图--><input id="r-cover" type="hidden" value=""/><!-- 大图文 3--><!-- 封页 1-->
<div class='m-page m-fengye f-hide' data-page-type='info_pic3' data-statics='info_pic3'>
<div class="page-con lazy-img" data-src='http://img.800.cn/20141013/n_543b30e34e7ba.jpg'>
</div>
</div>
<!-- 封页 end-->
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30e527248.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30e6ace97.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30e83b604.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30ea16f75.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30ec43dfc.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30ee26d05.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30efaec25.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30f13e319.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30f3171bc.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30f4ea857.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30f6c90ec.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36e465c8c.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30f8a98be.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36d0a520a.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36d2461ea.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36d3cd219.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36d8c96ea.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36db0e6aa.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36dd249d9.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36e08e8f5.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36e9dd9b1.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36cce8817.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36cec26ef.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36d5a2e47.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36e273edc.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36df04df6.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36eb7b753.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36ed08740.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30fa3be65.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30fbacab1.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b30fd2bbf0.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b31016e5c7.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36e67d300.jpg">
</div>
</div>
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div class="page-con j-txtWrap lazy-img" data-src="http://img.800.cn/20141013/n_543b36e8569d6.jpg">
</div>
</div>
<!-- 大图文 end--><!--列表位s-->
<div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
<div id="j-mengban" class='translate-front' style="display:none">
<div class='mengban-warn'>
</div>
</div>
<div class="page-con j-txtWrap lazy-img" data-src='http://img.800.cn/END3.jpg'>
<a id="wx-link" href="http://mp.weixin.qq.com/s?__biz=MjM5MjQyODk5OA==&mid=200616630&idx=5&sn=f210df44503259ef54fb8f935758fe5a#rd&qq-pf-to=pcqq.c2c"><img alt="从男妓到名模" src="http://img.800.cn/END1.jpg" usemap="#Map"/></a>
<p class="page-list">
您可能还会喜欢的杂志
</p>
<div class="ad_foot">
<ul>
<li><a href="http://www.5.cn/magazine/5/1093/index.html">
<div class="l">
<img src="http://img.800.cn/20140916/m_5417dc9238d0d.jpg" alt="从男妓到名模"/>
</div>
<div class="r">
<h2>迟到40年的表白，震撼了</h2>
<p>
by 5.cn
</p>
<span>阅读数：<i>6612745</i></span>
</div>
<div style="clear:both">
</div>
</a></li>
<li><a href="http://www.5.cn/magazine/650/4024/index.html">
<div class="l">
<img src="http://img.800.cn/20141009/m_5436321f0fa5c.jpg" alt="从男妓到名模"/>
</div>
<div class="r">
<h2>走着走着，人就老了</h2>
<p>
by 5.cn
</p>
<span>阅读数：<i>2947225</i></span>
</div>
<div style="clear:both">
</div>
</a></li>
<li><a href="http://www.5.cn/magazine/19/4275/index.html">
<div class="l">
<img src="http://img.800.cn/20141010/m_5437b6a5b028d.jpg" alt="从男妓到名模"/>
</div>
<div class="r">
<h2>如何制作微杂志</h2>
<p>
by 5.cn
</p>
<span>阅读数：<i>44925</i></span>
</div>
<div style="clear:both">
</div>
</a></li>
<li><a href="http://www.5.cn/magazine/19/420/index.html">
<div class="l">
<img src="http://img.800.cn/20140923/m_5420d82c612a0.jpg" alt="从男妓到名模"/>
</div>
<div class="r">
<h2>泰国最美人妖的私密照</h2>
<p>
by 5.cn
</p>
<span>阅读数：<i>29736109</i></span>
</div>
<div style="clear:both">
</div>
</a></li>
<li><a href="http://www.5.cn/magazine/222/1180/index.html">
<div class="l">
<img src="http://img.800.cn/20140917/m_5418e3d8687b2.jpg" alt="从男妓到名模"/>
</div>
<div class="r">
<h2>25款婚礼配色美翻天</h2>
<p>
by 5.cn
</p>
<span>阅读数：<i>40208</i></span>
</div>
<div style="clear:both">
</div>
</a></li>
</ul>
</div>
</div>
</div>
<!--列表位s--><!-- 大图文 end-->
</div>
<!-- 旋转反面 end--></section><!-- 正文介绍 end--><!--pageLoading--><section class="u-pageLoading"><img src="http://img0.hx.com/magazine/img/load.gif" alt="loading"/></section><!--pageLoading end--><!-- 资源传递 --><!-- 模版ID --><input id="activity_id" type="hidden" value='3464'/><!-- 微信分享信息 --><input id="r-wx-title" type="hidden" value="从男妓到名模"/><!-- 微信分享信息 --><input id="r-wx-img" type="hidden" value="http://img.800.cn/20141013/543b38d0247d3.jpg"/><!-- 微信分享信息 --><input id="r-wx-con" type="hidden" value="从男妓到名模：若不是曾经乱码，绝不会如此优雅"/><!-- 资源传递 end--><!--脚本加载-->
<script src="http://img0.hx.com/magazine/js/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="http://img0.hx.com/magazine/js/weixin.js" type="text/javascript" charset="utf-8"></script>
<script src="http://img0.hx.com/magazine/js/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="http://img0.hx.com/magazine/js/10_ylMap.js" type="text/javascript" charset="utf-8"></script>
<script src="http://img0.hx.com/magazine/js/Lottery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://img0.hx.com/magazine/js/99_main.js?v=1" type="text/javascript" charset="utf-8" defer＝'defer'></script>
<script src="http://img1.hx.com/newjs/view.js?v=1" type="text/javascript" charset="utf-8"></script>
<!--脚本加载 end-->
</body>
</html>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F28d43317e8a419b40943c2a7906e7fd9' type='text/javascript'%3E%3C/script%3E"));
</script>
Raw
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(../img/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;
}
/**
* 小图文模块
* -m-samllTxt
*/
.smallTxt-bd { position: relative; height: 49%; width: 100%; }
.smallTxt-bd p { padding: 0 25px; color: #000; }
.smallTxt-bd:first-child { border-bottom: 2px solid #fff; }
.smallTxt-bd:last-child { height: 51%; }
.smallTxt-bd.action { z-index: 10; }
.bd-wrap,
.smallTxt-arrow,
.smallTxt-detail,
.smallTxt-detail p {
-webkit-transition:all 0.8s;
-moz-transition:all 0.8s;
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
transition:all 0.8s;
}
.bd-wrap { position: absolute; z-index: 20; width: 400px; overflow: hidden; border-radius: 12px; font-size: 24px; opacity: 0; }
.smallTxt-title { position: absolute; left: 0; width: 100%; padding: 25px 0; overflow: hidden; font-size: 28px; background: rgba(255,255,255,0.7); }
.smallTxt-title p { height: 100%; line-height: 130%; overflow: hidden; }
.smallTxt-arrow { position: absolute; bottom: 5px; 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);
}
.smallTxt-detail { position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; }
.smallTxt-detail p { position: absolute; top: 0; left: 0; width: 350px; line-height: 150%; padding:25px; overflow: hidden; background: rgba(255,255,255,0.7); }
.smallTxt-bd:first-child .bd-wrap { top: 30px; }
.smallTxt-bd:first-child .smallTxt-title { top: 0; }
.smallTxt-bd:first-child .smallTxt-detail { top: 150px; }
.smallTxt-bd:first-child .smallTxt-detail p { border-top:2px solid #fff; }
.smallTxt-bd:last-child .bd-wrap { bottom: 120px; }
.smallTxt-bd:last-child .smallTxt-title { bottom: 0; }
.smallTxt-bd:last-child .smallTxt-detail { bottom: 150px; }
.smallTxt-bd:last-child .smallTxt-detail p { border-bottom:2px solid #fff; }
.z-left .bd-wrap { left: 30px;
-webkit-transform: translate(200px,0);
-moz-transform: translate(200px,0);
-ms-transform: translate(200px,0);
-o-transform: translate(200px,0);
transform: translate(200px,0);
}
.z-right .bd-wrap { right: 30px;
-webkit-transform: translate(-200px,0);
-moz-transform: translate(-200px,0);
-ms-transform: translate(-200px,0);
-o-transform: translate(-200px,0);
transform: translate(-200px,0);
}
.z-left .bd-wrap .smallTxt-title p { padding: 0 65px 0 25px; }
.z-right .bd-wrap .smallTxt-title p { padding: 0 25px 0 65px; }
.z-left .bd-wrap .smallTxt-arrow { right: 20px; }
.z-right .bd-wrap .smallTxt-arrow { left:20px; }
.smallTxt-arrow.z-toggle {
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-ms-transform: rotate(405deg);
-o-transform: rotate(405deg);
transform: rotate(405deg);
}
.z-animate .bd-wrap,
.smallTxt-detail.z-show p { 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;
}
/**
* 视频模块
* -m-video
*/
.video-title { width: 580px; padding: 200px 30px 50px; margin-bottom: 50px; overflow: hidden; opacity: 0;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition:all 0.8s;
-moz-transition:all 0.8s;
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
transition:all 0.8s;
}
.video-title h3 { height: 48px; overflow: hidden; font-size: 48px; margin-bottom: 30px; line-height: 100%; }
.video-title p { height: 30px; overflow: hidden; font-size: 30px; line-height: 150%; line-height: 100%; }
.video-con { position: relative; width: 640px; height: 400px; background: #000; }
.video-con video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; }
.video-con .img { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; }
.video-con .img span { display: inline-block; position: absolute; top: 50%; left: 50%; width:77px; height: 77px; margin-left: -38px; margin-top: -38px; z-index: 11; background-position: 0 -233px;
-webkit-animation: video_btnPlay 1s linear infinite; opacity: 1;
-moz-animation: video_btnPlay 1s linear infinite; opacity: 1;
animation: video_btnPlay 1s linear infinite; opacity: 1;
}
.z-animate .video-title { opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/**
* 预约模块
* -m-book
*/
.book-bd { position: relative; height: 100%; padding: 0 40px; }
.book-bd .bd-map { position: relative; height: 250px; overflow: hidden;
-webkit-transform: translate(0,-250px);
-moz-transform: translate(0,-250px);
-ms-transform: translate(0,-250px);
-o-transform: translate(0,-250px);
transform: translate(0,-250px);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.book-bd .bd-map span { position: absolute; top: 70px; right: 100px; display: inline-block; width: 55px; height: 72px; background-position: 0 -159px; }
.book-bd .bd-map .map-animate { position: absolute; top: 140px; right: 119px; width: 20px; height: 20px; border-radius: 50%; background:#fff;
-webkit-transform: rotateX(-110deg);
-moz-transform: rotateX(-110deg);
transform: rotateX(-110deg);
-webkit-transform-origin:50%;
-moz-transform-origin:50%;
transform-origin:50%;
}
.book-bd .bd-map .map-animate strong { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; }
.book-bd .bd-map .map-animate strong:nth-child(1) {
-webkit-animation: mapJump 1s linear infinite;
-moz-animation: mapJump 1s linear infinite;
animation: mapJump 1s linear infinite;
}
.book-bd .bd-map .map-animate strong:nth-child(2) {
-webkit-animation: mapJump 1.5s .75s linear infinite;
-moz-animation: mapJump 1.5s .75s linear infinite;
animation: mapJump 1.5s .75s linear infinite;
}
.book-bd .bd-tit { position: absolute; top: 50%; height: 40px; line-height: 40px; width:560px; margin-top: -160px; overflow: hidden; color: #fff; font-size: 36px;
opacity: 0;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transform: scale(0.1);
-webkit-transition:all 0.5s .5s;
-moz-transition:all 0.5s .5s;
-ms-transition:all 0.5s .5s;
-o-transition:all 0.5s .5s;
transition:all 0.5s .5s;
}
.book-bd .bd-form { position: absolute; bottom: 120px; left: 40px; width: 480px; padding:30px 40px; background: #e5e5e5; border-radius:12px; overflow: hidden;
-webkit-transform: translate(0,500px);
-moz-transform: translate(0,500px);
-ms-transform: translate(0,500px);
-o-transform: translate(0,500px);
transform: translate(0,500px);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.book-bd .bd-form p { position: relative; padding-left: 70px; margin-bottom: 20px; text-align: left; }
.book-bd .bd-form p a { font-size: 30px; color: #34495e; }
.book-bd .bd-form p span { position: absolute; top: 0; left: 0; display: inline-block; width: 32px; height: 29px; }
.book-bd .bd-form .tel span { background-position: -72px 0; }
.book-bd .bd-form .email span { background-position: -72px -31px; }
.book-bd .bd-form .wx span { background-position: -72px -62px; }
.book-bd .bd-form .btn { width: 420px; height: 80px; margin:0 auto; line-height: 80px; text-align: center; color: #34495e; background: #e67e22; border-radius: 12px; font-size: 36px; }
.book-bd .bd-form .btn.z-stop { background: #bbb; }
.book-bg { position: absolute; top: 0; left: 0; z-index: 40; width: 100%; height: 100%; background: rgba(0,0,0,0);
-webkit-transition:background 0.5s;
-moz-transition:background 0.5s;
-ms-transition:background 0.5s;
-o-transition:background 0.5s;
transition:background 0.5s;
}
.book-bg.z-show { background: rgba(0,0,0,0.7); }
.book-form { position: absolute; top: 50%; left: 40px; z-index: 50; width: 480px; height: 700px; padding:40px; margin-top: -350px; background: #e5e5e5; border-radius:12px; opacity: 0;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-ms-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.book-form h3 { margin-bottom: 15px; color: #34495e; font-size: 36px; text-align: center; }
.book-form th,
.book-form td { padding: 20px 0; }
.book-form th { font-size: 30px; color: #34495e; }
.book-form td input { width: 350px; border: 1px solid #ccc; padding: 12px 0 12px 30px; font-size: 24px; color: #34495e; border-radius: 6px; }
.book-form td input.z-error { border-color: red; }
.book-form td.btn p { width: 420px; height: 80px; margin:0 auto; line-height: 80px; text-align: center; color: #34495e; background: #e67e22; border-radius: 12px; font-size: 36px; }
.book-form td.btn p.z-fial { background: #aaa; }
.book-form td.btn p.z-success { background: #e74c3c; }
.book-form .sex { overflow:hidden; }
.book-form .sex p { float:left; overflow:hidden; height:100%; width:130px; cursor:pointer; }
.book-form .sex p span { display:block; float:left; margin-right:10px; font-size: 30px; }
.book-form .sex p .select { padding:4px; margin-right:20px; width:20px; height:20px; border-radius:50%; border:1px solid #aaa; background:#f8f9f8; }
.book-form .sex p .select strong { display:none; border-radius:50%; width:20px; height:20px; background:#6a6a6a; }
.book-form .sex p .select strong.open { display:block; }
.book-form .j-close { position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; }
.book-form.z-show,
.z-animate .book-bd .bd-map,
.z-animate .book-bd .bd-form{ opacity: 1;
-webkit-transform: translate(0,0) scale(1);
-moz-transform: translate(0,0) scale(1);
-ms-transform: translate(0,0) scale(1);
-o-transform: translate(0,0) scale(1);
transform: translate(0,0) scale(1);
}
.z-animate .book-bd .bd-tit { opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*销售入口****/
.market-notice{position:absolute;left:0;z-index:9;bottom:0px;height:170px;width:100%;text-align:center; color:#FFFFFF; font-size:25px;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:all 0.5s;
}
.market-notice img{display:inline-block;width:640px;}
.market-notice.show {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.market-page{position:fixed;left:0;bottom:0;height:100%;width:100%;overflow:hidden;background:rgba(0,0,0,0.7);z-index:10;opacity: 0;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
transition:all 0.2s;
}
.market-page.show{ opacity: 1; }
.market-img{position:absolute;bottom:0;left:50%;height:280px;width:640px;margin-left:-320px;background-image:url(../img/market-bk.jpg);background-repeat:no-repeat;
-webkit-transform: translateY(500px);
-moz-transform: translateY(500px);
-ms-transform: translateY(500px);
-o-transform: translateY(500px);
transform: translateY(500px);
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
transition:all 0.5s;
}
.market-img a:nth-of-type(1){position:absolute;top:170px;left:165px;}
.market-img a:nth-of-type(2){position:absolute;top:350px;left:40px;width:560px;height:90px;}
.market-img.show {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
/**
* = 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;}
}
Raw
main.js
/**
* 全局函数处理
* -----------------------------
* 作者：叼怎么写！- -||
* 时间：2014-03-26
* 准则：Zpote、字面量对象
* 联系：wechat--shoe11414255
* 一张网页，要经历怎样的过程，才能抵达用户面前
* 一个特效，要经历这样的修改，才能让用户点个赞
* 一个产品，创意源于生活，源于内心，需要慢慢品味
*********************************************************************************************/
var car2 = {
/****************************************************************************************************/
/* 对象私有变量/函数返回值/通用处理函数
*****************************************************************************************************/
/*************************
* = 对象变量，判断函数
*************************/
_events : {}, // 自定义事件---this._execEvent('scrollStart');
_windowHeight : $(window).height(), // 设备屏幕高度
_windowWidth : $(window).width(),
_rotateNode : $('.p-ct'), // 旋转体
_page : $('.m-page'), // 模版页面切换的页面集合
_pageNum : $('.m-page').size(), // 模版页面的个数
_pageNow : 0, // 页面当前的index数
_pageNext : null, // 页面下一个的index数
_touchStartValY : 0, // 触摸开始获取的第一个值
_touchDeltaY : 0, // 滑动的距离
_moveStart : true, // 触摸移动是否开始
_movePosition : null, // 触摸移动的方向（上、下）
_movePosition_c : null, // 触摸移动的方向的控制
_mouseDown : false, // 判断鼠标是否按下
_moveFirst : true,
_moveInit : false,
_firstChange : false,
_map : $('.ylmap'), // 地图DOM对象
_mapValue : null, // 地图打开时，存储最近打开的一个地图
_mapIndex : null, // 开启地图的坐标位置
_audioNode : $('.u-audio'), // 声音模块
_audio : null, // 声音对象
_audio_val : true, // 声音是否开启控制
_elementStyle : document.createElement('div').style, // css属性保存对象
_UC : RegExp("Android").test(navigator.userAgent)&&RegExp("UC").test(navigator.userAgent)? true : false,
_weixin : RegExp("MicroMessenger").test(navigator.userAgent)? true : false,
_iPhone : RegExp("iPhone").test(navigator.userAgent)||RegExp("iPod").test(navigator.userAgent)||RegExp("iPad").test(navigator.userAgent)? true : false,
_Android : RegExp("Android").test(navigator.userAgent)? true : false,
_IsPC : function(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
} ,
_isload : false ,//是否加载音乐
_audio_src :"", //音乐url
/***********************
* = gobal通用函数
***********************/
// 判断函数是否是null空值
_isOwnEmpty : function (obj) {
for(var name in obj) {
if(obj.hasOwnProperty(name)) {
return false;
}
}
return true;
},
// 微信初始化函数
_WXinit : function(callback){
if(typeof window.WeixinJSBridge == 'undefined' || typeof window.WeixinJSBridge.invoke == 'undefined'){
setTimeout(function(){
this.WXinit(callback);
},200);
}else{
callback();
}
},
// 判断浏览器内核类型
_vendor : function () {
var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
transform,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
transform = vendors[i] + 'ransform';
if ( transform in this._elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
}
return false;
},
// 判断浏览器来适配css属性值
_prefixStyle : function (style) {
if ( this._vendor() === false ) return false;
if ( this._vendor() === '' ) return style;
return this._vendor() + style.charAt(0).toUpperCase() + style.substr(1);
},
// 判断是否支持css transform-3d（需要测试下面属性支持）
_hasPerspective : function(){
var ret = this._prefixStyle('perspective') in this._elementStyle;
if ( ret && 'webkitPerspective' in this._elementStyle ) {
this._injectStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) {
ret = node.offsetLeft === 9 && node.offsetHeight === 3;
});
}
return !!ret;
},
_translateZ : function(){
if(car2._hasPerspective){
return ' translateZ(0)';
}else{
return '';
}
},
// 判断属性支持是否
_injectStyles : function( rule, callback, nodes, testnames ) {
var style, ret, node, docOverflow,
div = document.createElement('div'),
body = document.body,
fakeBody = body || document.createElement('body'),
mod = 'modernizr';
if ( parseInt(nodes, 10) ) {
while ( nodes-- ) {
node = document.createElement('div');
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
div.appendChild(node);
}
}
style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
div.id = mod;
(body ? div : fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if ( !body ) {
fakeBody.style.background = '';
fakeBody.style.overflow = 'hidden';
docOverflow = docElement.style.overflow;
docElement.style.overflow = 'hidden';
docElement.appendChild(fakeBody);
}
ret = callback(div, rule);
if ( !body ) {
fakeBody.parentNode.removeChild(fakeBody);
docElement.style.overflow = docOverflow;
} else {
div.parentNode.removeChild(div);
}
return !!ret;
},
// 自定义事件操作
_handleEvent : function (type) {
if ( !this._events[type] ) {
return;
}
var i = 0,
l = this._events[type].length;
if ( !l ) {
return;
}
for ( ; i < l; i++ ) {
this._events[type][i].apply(this, [].slice.call(arguments, 1));
}
},
// 给自定义事件绑定函数
_on : function (type, fn) {
if ( !this._events[type] ) {
this._events[type] = [];
}
this._events[type].push(fn);
},
//禁止滚动条
_scrollStop : function(){
//禁止滚动
$(window).on('touchmove.scroll',this._scrollControl);
$(window).on('scroll.scroll',this._scrollControl);
},
//启动滚动条
_scrollStart : function(){
//开启屏幕禁止
$(window).off('touchmove.scroll');
$(window).off('scroll.scroll');
},
//滚动条控制事件
_scrollControl : function(e){e.preventDefault();},
/**************************************************************************************************************/
/* 关联处理函数
***************************************************************************************************************/
/**
* 单页面-m-page 切换的函数处理
* -->绑定事件
* -->事件处理函数
* -->事件回调函数
* -->事件关联函数【
*/
// 页面切换开始
page_start : function(){
car2._page.on('touchstart mousedown',car2.page_touch_start);
car2._page.on('touchmove mousemove',car2.page_touch_move);
car2._page.on('touchend mouseup',car2.page_touch_end);
},
// 页面切换停止
page_stop : function(){
car2._page.off('touchstart mousedown');
car2._page.off('touchmove mousemove');
car2._page.off('touchend mouseup');
},
// page触摸移动start
page_touch_start: function(e){
if(!car2._moveStart) return;
if(e.type == "touchstart"){
car2._touchStartValY = window.event.touches[0].pageY;
}else{
car2._touchStartValY = e.pageY||e.y;
car2._mouseDown = true;
}
car2._moveInit = true;
// start事件
car2._handleEvent('start');
},
// page触摸移动move
page_touch_move : function(e){
e.preventDefault();
if(!car2._moveStart) return;
if(!car2._moveInit) return;
// 设置变量值
var $self = car2._page.eq(car2._pageNow),
h = parseInt($self.height()),
moveP,
scrollTop,
node=null,
move=false;
// 获取移动的值
if(e.type == "touchmove"){
moveP = window.event.touches[0].pageY;
move = true;
}else{
if(car2._mouseDown){
moveP = e.pageY||e.y;
move = true;
}else return;
}
// 获取下次活动的page
node = car2.page_position(e,moveP,$self);
// page页面移动
car2.page_translate(node);
// move事件
car2._handleEvent('move');
},
// page触摸移动判断方向
page_position : function(e,moveP,$self){
var now,next;
// 设置移动的距离
if(moveP!='undefined') car2._touchDeltaY = moveP - car2._touchStartValY;
// 设置移动方向
car2._movePosition = moveP - car2._touchStartValY >0 ? 'down' : 'up';
if(car2._movePosition!=car2._movePosition_c){
car2._moveFirst = true;
car2._movePosition_c = car2._movePosition;
}else{
car2._moveFirst = false;
}
// 设置下一页面的显示和位置
if(car2._touchDeltaY<=0){
if($self.next('.m-page').length == 0){
car2._pageNext = 0;
} else {
car2._pageNext = car2._pageNow+1;
}
next = car2._page.eq(car2._pageNext)[0];
}else{
if($self.prev('.m-page').length == 0 ) {
if (car2._firstChange) {
car2._pageNext = car2._pageNum - 1;
} else {
return;
}
} else {
car2._pageNext = car2._pageNow-1;
}
next = car2._page.eq(car2._pageNext)[0];
}
now = car2._page.eq(car2._pageNow)[0];
node = [next,now];
// move阶段根据方向设置页面的初始化位置--执行一次
if(car2._moveFirst) init_next(node);
function init_next(node){
var s,l,_translateZ = car2._translateZ();
car2._page.removeClass('action');
$(node[1]).addClass('action').removeClass('f-hide');
car2._page.not('.action').addClass('f-hide');
// 模版高度适配函数处理
car2.height_auto(car2._page.eq(car2._pageNext),'false');
// 显示对应移动的page
$(node[0]).removeClass('f-hide').addClass('active');
// 设置下一页面的显示和位置
if(car2._movePosition=='up'){
s = parseInt($(window).scrollTop());
if(s>0) l = $(window).height()+s;
else l = $(window).height();
node[0].style[car2._prefixStyle('transform')] = 'translate(0,'+l+'px)'+_translateZ;
$(node[0]).attr('data-translate',l);
$(node[1]).attr('data-translate',0);
}else{
node[0].style[car2._prefixStyle('transform')] = 'translate(0,-'+Math.max($(window).height(),$(node[0]).height())+'px)'+_translateZ;
$(node[0]).attr('data-translate',-Math.max($(window).height(),$(node[0]).height()));
$(node[1]).attr('data-translate',0);
}
}
return node;
},
// page触摸移动设置函数
page_translate : function(node){
// 没有传值返回
if(!node) return;
var _translateZ = car2._translateZ(),
y_1,y_2,scale,
y = car2._touchDeltaY;
// 切换的页面移动
if($(node[0]).attr('data-translate')) y_1 = y + parseInt($(node[0]).attr('data-translate'));
node[0].style[car2._prefixStyle('transform')] = 'translate(0,'+y_1+'px)'+_translateZ;
// 当前的页面移动
if($(node[1]).attr('data-translate')) y_2 = y + parseInt($(node[1]).attr('data-translate'));
scale = 1 - Math.abs(y*0.2/$(window).height());
y_2 = y_2/5;
node[1].style[car2._prefixStyle('transform')] = 'translate(0,'+y_2+'px)'+_translateZ+' scale('+scale+')';
},
// page触摸移动end
page_touch_end : function(e){
car2._moveInit = false;
car2._mouseDown = false;
if(!car2._moveStart) return;
if(!car2._pageNext&&car2._pageNext!=0) return;
car2._moveStart = false;
// 确保移动了
if(Math.abs(car2._touchDeltaY)>10){
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transition')] = 'all .3s';
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transition')] = 'all .3s';
}
// 页面切换
if(Math.abs(car2._touchDeltaY)>=100){ // 切换成功
car2.page_success();
}else if(Math.abs(car2._touchDeltaY)>10&&Math.abs(car2._touchDeltaY)<100){ // 切换失败
car2.page_fial();
}else{ // 没有切换
car2.page_fial();
}
// end事件
car2._handleEvent('end');
// 注销控制值
car2._movePosition = null;
car2._movePosition_c = null;
car2._touchStartValY = 0;
if($('#j-mengban').hasClass('z-show')){
if(car2._pageNext == mengvalue){
car2.page_stop();
}
}
},
// 切换成功
page_success : function(){
var _translateZ = car2._translateZ();
// 下一个页面的移动
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = 'translate(0,0)'+_translateZ;
// 当前页面变小的移动
var y = car2._touchDeltaY > 0 ? $(window).height()/5 : -$(window).height()/5;
var scale = 0.8;
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = 'translate(0,'+y+'px)'+_translateZ+' scale('+scale+')';
// 成功事件
car2._handleEvent('success');
},
// 切换失败
page_fial : function(){
var _translateZ = car2._translateZ();
// 判断是否移动了
if(!car2._pageNext&&car2._pageNext!=0) {
car2._moveStart = true;
car2._moveFirst = true;
return;
}
if(car2._movePosition=='up'){
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = 'translate(0,'+$(window).height()+'px)'+_translateZ;
}else{
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = 'translate(0,-'+$(window).height()+'px)'+_translateZ;
}
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = 'translate(0,0)'+_translateZ+' scale(1)';
// fial事件
car2._handleEvent('fial');
},
/**
* 对象函数事件绑定处理
* -->start touch开始事件
* -->mov move移动事件
* -->end end结束事件
*/
haddle_envent_fn : function(){
// 当前页面移动，延迟加载以后的图片
car2._on('start',car2.lazy_bigP);
// 当前页面移动
car2._on('move',function(){
});
// 切换失败事件
car2._on('fial',function(){
setTimeout(function(){
car2._page.eq(car2._pageNow).attr('data-translate','');
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transition')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transition')] = '';
car2._page.eq(car2._pageNext).removeClass('active').addClass('f-hide');
car2._moveStart = true;
car2._moveFirst = true;
car2._pageNext = null;
car2._touchDeltaY = 0;
car2._page.eq(car2._pageNow).attr('style','');
},300)
})
// 切换成功事件
car2._on('success',function(){
// 判断最后一页让，开启循环切换
if (car2._pageNext == 0 && car2._pageNow == car2._pageNum -1) {
car2._firstChange = true;
//window.location.href="http://www.5.cn/magazine/822/1883/index.html";
}
// 判断是否是最后一页，让轻APP关联页面隐藏
if(car2._page.eq(car2._pageNext).next('.m-page').length != 0){
car2.lightapp_intro_hide(true);
}
setTimeout(function(){
// 设置富文本的高度
car2.Txt_init(car2._page.eq(car2._pageNow));
// 判断是否为最后一页，显示或者隐藏箭头
if(car2._pageNext == car2._pageNum-1 ) $('.u-arrow').addClass('f-hide');
else $('.u-arrow').removeClass('f-hide');
car2._page.eq(car2._pageNow).addClass('f-hide');
car2._page.eq(car2._pageNow).attr('data-translate','');
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNow)[0].style[car2._prefixStyle('transition')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transform')] = '';
car2._page.eq(car2._pageNext)[0].style[car2._prefixStyle('transition')] = '';
// 初始化切换的相关控制值
$('.p-ct').removeClass('fixed');
car2._page.eq(car2._pageNext).removeClass('active');
car2._page.eq(car2._pageNext).removeClass('fixed');
car2._pageNow = car2._pageNext;
car2._moveStart = true;
car2._moveFirst = true;
car2._pageNext = null;
car2._page.eq(car2._pageNow).attr('style','');
car2._page.eq(car2._pageNow).removeClass('fixed');
car2._page.eq(car2._pageNow).attr('data-translate','');
car2._touchDeltaY = 0;
// 切换成功后，执行当前页面的动画---延迟200ms
setTimeout(function(){
if(car2._page.eq(car2._pageNow).hasClass('z-animate')) return;
car2._page.eq(car2._pageNow).addClass('z-animate');
},20)
// 隐藏图文组件的文本
$('.j-detail').removeClass('z-show');
$('.txt-arrow').removeClass('z-toggle');
// 切换停止视频的播放
$('video').each(function(){
if(!this.paused) this.pause();
})
// 设置富文本的高度
car2.Txt_init(car2._page.eq(car2._pageNow));
// 判断是否滑动最后一页，并让轻APP介绍关联页面贤淑
if(car2._page.eq(car2._pageNow).next().next('.m-page').length == 0){
car2.lightapp_intro_show();
car2.lightapp_intro();
$(".market-notice").show();
}
if(car2._page.eq(car2._pageNow).next('.m-page').length == 0){
car2.lightapp_intro_hide(false);
$(".market-notice").hide();
}
},300)
// 切换成功后，发送统计
var laytouType = car2._page.eq(car2._pageNow).attr('data-statics');
car2.ajaxTongji(laytouType);
})
},
/**
* 地图创建函数处理
* -->绑定事件
* -->事件处理函数
* -->创建地图
* -->函数传值
* -->关闭函数回调处理
*/
// 自定义绑定事件
mapAddEventHandler : function(obj,eventType,fn,option){
var fnHandler = fn;
if(!car2._isOwnEmpty(option)){
fnHandler = function(e){
fn.call(this, option); //继承监听函数,并传入参数以初始化;
}
}
obj.each(function(){
$(this).on(eventType,fnHandler);
})
},
//点击地图按钮显示地图
mapShow : function(option){
// 获取各自地图的资源信息
var str_data = $(this).attr('data-detal');
option.detal = str_data != '' ? eval('('+str_data+')') : '';
option.latitude = $(this).attr('data-latitude');
option.longitude = $(this).attr('data-longitude');
// 地图添加
var detal = option.detal,
latitude = option.latitude,
longitude = option.longitude,
fnOpen = option.fnOpen,
fnClose = option.fnClose;
car2._scrollStop();
car2._map.addClass('show');
$(document.body).animate({scrollTop: 0}, 0);
//判断开启地图的位置是否是当前的
if($(this).attr('data-mapIndex')!=car2._mapIndex){
car2._map.html($('<div class="bk"><span class="css_sprite01 s-bg-map-logo"></span></div>'));
car2._mapValue = false;
car2._mapIndex = $(this).attr('data-mapIndex');
}else{
car2._mapValue = true;
}
setTimeout(function(){
//将地图显示出来
if(car2._map.find('div').length>=1){
car2._map.addClass("mapOpen");
car2.page_stop();
car2._scrollStop();
car2._audioNode.addClass('z-low');
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',15);
setTimeout(function(){
//如果开启地图的位置不一样则，创建新的地图
if(!car2._mapValue) car2.addMap(detal,latitude,longitude,fnOpen,fnClose);
},500)
}else return;
},100)
},
//地图关闭，将里面的内容清空（优化DON结构）
mapSave : function(){
$(window).on('webkitTransitionEnd transitionend',mapClose);
car2.page_start();
car2._scrollStart();
car2._map.removeClass("mapOpen");
car2._audioNode.removeClass('z-low');
if(!car2._mapValue) car2._mapValue = true;
function mapClose(){
car2._map.removeClass('show');
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',9);
$(window).off('webkitTransitionEnd transitionend');
}
},
//地图函数传值，创建地图
addMap : function (detal,latitude,longitude,fnOpen,fnClose){
var detal = detal,
latitude = Number(latitude),
longitude = Number(longitude);
var fnOpen = typeof(fnOpen)==='function'? fnOpen : '',
fnClose = typeof(fnClose)==='function'? fnClose : '';
//默认值设定
var a = {sign_name:'',contact_tel:'',address:'天安门'};
//检测传值是否为空，设置传值
car2._isOwnEmpty(detal) ? detal=a:detal=detal;
!latitude? latitude=39.915:latitude=latitude;
!longitude? longitude=116.404:longitude=longitude;
//创建地图
car2._map.ylmap({
/*参数传递，默认为天安门坐标*/
//需要执行的函数（回调）
detal : detal, //地址值
latitude : latitude, //纬度
longitude : longitude, //经度
fnOpen : fnOpen, //回调函数，地图开启前
fnClose : fnClose //回调函数，地图关闭后
});
},
//绑定地图出现函数
mapCreate : function(){
if('.j-map'.length<=0) return;
var node = $('.j-map');
//option地图函数的参数
var option ={
fnOpen : car2._scrollStop,
fnClose : car2.mapSave
};
car2.mapAddEventHandler(node,'click',car2.mapShow,option);
},
/**
* media资源管理
* -->绑定声音控制事件
* -->函数处理声音的开启和关闭
* -->异步加载声音插件（延迟做）
* -->声音初始化
* -->视频初始化
* -->声音和视频切换的控制
*/
// 声音初始化
audio_init : function(){
// media资源的加载
var options_audio = {
loop: true,
preload: "auto",
src: car2._audioNode.attr('data-src')
}
car2._audio = new Audio();
for(var key in options_audio){
if(options_audio.hasOwnProperty(key) && (key in car2._audio)){
car2._audio[key] = options_audio[key];
}
}
car2._audio.load();
},
// 声音事件绑定
audio_addEvent : function(){
if(car2._audioNode.length<=0) return;
// 声音按钮点击事件
var txt = car2._audioNode.find('.txt_audio'),
time_txt = null;
car2._audioNode.find('.btn_audio').on('click',car2.audio_contorl);
// 声音打开事件
$(car2._audio).on('play',function(){
car2._audio_val = false;
audio_txt(txt,true,time_txt);
// 开启音符冒泡
$.fn.coffee.start();
$('.coffee-steam-box').show(500);
})
// 声音关闭事件
$(car2._audio).on('pause',function(){
audio_txt(txt,false,time_txt)
// 关闭音符冒泡
$.fn.coffee.stop();
$('.coffee-steam-box').hide(500);
})
function audio_txt(txt,val,time_txt){
if(val) txt.text('打开');
else txt.text('关闭');
if(time_txt) clearTimeout(time_txt);
txt.removeClass('z-move z-hide');
time_txt = setTimeout(function(){
txt.addClass('z-move').addClass('z-hide');
},1000)
}
},
// 声音控制函数
audio_contorl : function(){
if(!car2._audio_val){
car2.audio_stop();
}else{
car2.audio_play();
}
},
// 声音播放
audio_play : function(){
car2._audio_val = false;
if(car2._audio) car2._audio.play();
},
// 声音停止
audio_stop : function(){
car2._audio_val = true;
if(car2._audio) car2._audio.pause();
},
// 视频初始化
video_init : function(){
// 视频
$('.j-video').each(function(){
var option_video = {
controls: 'controls',
preload : 'none',
// poster : $(this).attr('data-poster'),
width : $(this).attr('data-width'),
height : $(this).attr('data-height'),
src : $(this).attr('data-src')
}
var video = $('<video class="f-hide"></video>')[0];
for(var key in option_video){
if(option_video.hasOwnProperty(key) && (key in video)){
video[key] = option_video[key];
}
this.appendChild(video);
}
var img = $(video).prev();
$(video).on('play',function(){
img.hide();
$(video).removeClass('f-hide');
});
$(video).on('pause',function(){
img.show();
$(video).addClass('f-hide');
});
})
$('.j-video .img').on('click',function(){
var video = $(this).next()[0];
if(video.paused){
$(video).removeClass('f-hide');
video.play();
$(this).hide();
}
})
},
//处理声音和动画的切换
media_control : function(){
if(!car2._audio) return;
if($('video').length<=0) return;
$(car2._audio).on('play', function(){
$('video').each(function(){
if(!this.paused){
this.pause();
}
});
});
$('video').on('play', function(){
if(!car2._audio_val){
car2.audio_contorl();
}
});
},
// media管理初始化
media_init : function(){
// 声音初始化
car2.audio_init();
// 视频初始化
car2.video_init();
// 绑定音乐加载事件
car2.audio_addEvent();
// 音频切换
car2.media_control();
},
/**
* 图片延迟加载功能
* -->替代需要延迟加载的图片
* -->优化加载替代图片
* -->切换功能触发图片的延迟加载
* -->替代图片为400*400的透明大图片
*/
/* 图片延迟加载 */
lazy_img : function(){
var lazyNode = $('.lazy-img');
lazyNode.each(function(){
var self = $(this);
if(self.is('img')){
self.attr('src','http://img0.hx.com/magazine/img/load.gif');
}else{
// 把原来的图片预先保存下来
var position = self.css('background-position'),
size = self.css('background-size');
self.attr({
'data-position' : position,
'data-size' : size
});
if(self.attr('data-bg')=='no'){
self.css({
'background-repeat' : 'no-repeat'
})
}
self.css({
'background-image' : 'url(http://img0.hx.com/magazine/img/load.gif)',
'background-size' : '120px 120px',
'background-position': 'center'
})
if(self.attr('data-image')=='no'){
self.css({
'background-image' : 'none'
})
}
}
})
},
// 开始加载前三个页面
lazy_start : function(){
// 前三个页面的图片延迟加载
setTimeout(function(){
for(var i=0;i<3;i++){
var node = $(".m-page").eq(i);
if(node.length==0) break;
if(node.find('.lazy-img').length!=0){
car2.lazy_change(node,false);
// 飞出窗口的延迟
if(node.attr('data-page-type')=='flyCon'){
car2.lazy_change($('.m-flypop'),false);
}
}else continue;
}
},200)
},
// 加载当前后面第三个
lazy_bigP : function(){
for(var i=3;i<=5;i++){
var node = $(".m-page").eq(car2._pageNow+i);
if(node.length==0) break;
if(node.find('.lazy-img').length!=0){
car2.lazy_change(node,false);
// 飞出窗口的延迟
if(node.attr('data-page-type')=='flyCon'){
car2.lazy_change($('.m-flypop'),false);
}
}else continue;
}
},
// 图片延迟替换函数
lazy_change : function(node,goon){
// 3d图片的延迟加载
if(node.attr('data-page-type')=='3d') car2.lazy_3d(node);
// 飞出窗口的延迟
if(node.attr('data-page-type')=='flyCon'){
var img = $('.m-flypop').find('.lazy-img');
img.each(function(){
var self = $(this),
srcImg = self.attr('data-src');
$('<img />')
.on('load',function(){
if(self.is('img')){
self.attr('src',srcImg)
}
})
.attr("src",srcImg);
})
}
// 其他图片的延迟加载
var lazy = node.find('.lazy-img');
lazy.each(function(){
var self = $(this),
srcImg = self.attr('data-src'),
position = self.attr('data-position'),
size = self.attr('data-size');
if(self.attr('data-bg')!='no'){
$('<img />')
.on('load',function(){
if(self.is('img')){
self.attr('src',srcImg)
}else{
self.css({
'background-image' : 'url('+srcImg+')',
'background-position' : position,
'background-size' : size
})
}
// 判断下面页面进行加载
if(goon){
for(var i =0;i<$(".m-page").size();i++){
var page = $(".m-page").eq(i);
if($(".m-page").find('.lazy-img').length==0) continue
else{
car2.lazy_change(page,true);
}
}
}
})
.attr("src",srcImg);
self.removeClass('lazy-img').addClass('lazy-finish');
}else{
if(self.attr('data-auto')=='yes') self.css('background','none');
}
})
},
/**
* 表单验证函数控制
* -->提交按钮的点击事件
* -->每一个表单的输入值进行验证
* -->正则验证的函数
* -->异步提交的函数
* -->提交显示信息的函数
*/
// 提交按钮点击，进行验证函数
signUp_submit : function(){
$('#j-signUp-submit').on('click',function(e){
console.log('click')
e.preventDefault();
var form = $(this).parents('#j-signUp');
var valid = car2.signUpCheck_input(form);
if(valid) {
car2.signUpCheck_submit(form);
}
else return;
})
},
// 我要报名表单验证函数
signUpCheck_input : function (form, type){
var valid = true;
var inputs = form.find('input');
inputs.each(function(){
if(this.name != '' && this.name != 'undefined'){
//函数验证
var name = this.name;
var backData = car2.regFunction(name);
var empty_tip = backData.empty_tip,
reg = backData.reg,
reg_tip = backData.reg_tip;
//根据结果处理
if ($.trim($(this).val()) == '') {
car2.showCheckMessage(empty_tip, true);
$(this).focus();
$(this).addClass('z-error');
valid = false;
return false;
}
if (reg != undefined && reg != '') {
if(!$(this).val().match(reg)){
$(this).focus();
$(this).addClass('z-error');
car2.showCheckMessage(reg_tip, true);
valid = false;
return false;
}
}
$(this).removeClass('z-error');
$('.u-note-error').html('');
}
});
if (valid == false) {
return false;
}else{
return true;
}
},
// 正则函数验证
regFunction : function(inputName){
var empty_tip = '',
reg_tip = '',
reg = '';
//判断
switch (inputName) {
case 'name':
reg = /^[\u4e00-\u9fa5|a-z|A-Z|\s]{1,20}$/;
empty_tip = '不能落下姓名哦！';
reg_tip = '这名字太怪了！';
break;
case 'sex':
empty_tip = '想想，该怎么称呼您呢？';
reg_tip = '想想，该怎么称呼您呢？';
break;
case 'tel':
reg = /^1[0-9][0-9]\d{8}$/;
empty_tip = '有个联系方式，就更好了！';
reg_tip = '这号码,可打不通... ';
break;
case 'email':
reg = /(^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$)/i;
empty_tip = '都21世纪了，应该有个电子邮箱吧！';
reg_tip = '邮箱格式有问题哦！';
break;
case 'company':
reg = /^[\u4e00-\u9fa5|a-z|A-Z|\s|\d]{1,20}$/;
empty_tip = '填个公司吧！';
reg_tip = '这个公司太奇怪了！';
break;
case 'job':
reg = /^[\u4e00-\u9fa5|a-z|A-Z|\s]{1,20}$/;
empty_tip = '请您填个职位';
reg_tip = '这个职位太奇怪了！';
break;
case 'date':
empty_tip = '给个日期吧！';
reg_tip = '';
break;
case 'time':
empty_tip = '填下具体时间更好哦！' ;
reg_tip = '' ;
break;
case 'age':
reg = /^([3-9])|([1-9][0-9])|([1][0-3][0-9])$/;
empty_tip = '有个年龄就更好了！';
reg_tip = '这年龄可不对哦！' ;
break;
}
return {
empty_tip :empty_tip,
reg_tip :reg_tip,
reg :reg
}
},
// ajax异步提交表单数据
signUpCheck_submit : function (form){
car2.loadingPageShow();
var url = '/auto/submit/'+$('#activity_id').val();
// // ajax提交数据
$.ajax({
url: url,
cache: false,
dataType: 'json',
async: true,
type:'POST',
data: form.serialize(),
success: function(msg){
car2.loadingPageHide();
if(msg.code==200){
// 提示成功
car2.showCheckMessage('提交成功！',true)
// 关闭窗口
setTimeout(function(){
$('.book-form').removeClass('z-show');
$('.book-bg').removeClass('z-show');
setTimeout(function(){
$(document.body).css('height','100%');
car2.page_start();
car2._scrollStop();
$('.book-bg').addClass('f-hide');
$('.book-form').addClass('f-hide');
},500)
},1000)
// 按钮变色
$('.book-bd .bd-form .btn').addClass("z-stop");
$('.book-bd .bd-form .btn').attr("data-submit",'true');
}else if(msg.code=='400'){
car2.showCheckMessage('提交失败',false);
}
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
car2.showCheckMessage(errorThrown,true);
setTimeout(function(){
car2.loadingPageHide();
},500)
}
})
},
// 显示验证信息
showCheckMessage : function (msg, error) {
if (error) {
$('.u-note-error').html(msg);
$(".u-note-error").addClass("on");
$(".u-note-sucess").removeClass("on");
setTimeout(function(){
$(".u-note").removeClass("on");
},2000);
} else {
$(".u-note-sucess").addClass("on");
$(".u-note-error").removeClass("on");
setTimeout(function(){
$(".u-note").removeClass("on");
},2000);
}
},
/**************************************************************************************************************/
/* 单个处理函数
***************************************************************************************************************/
/**
* 单个函数处理-unit
* -->高度的计算
* -->文本的展开
* -->文本的收起
* -->输入表单的操作
* -->微信的分享提示
*/
// 根据设备的高度，来适配每一个模版的高度，并且静止滑动
// --文档初始化计算
// --页面切换完成计算
height_auto : function(ele,val){
ele.children('.page-con').css('height','auto');
var height = $(window).height();
// 需要解除固定高度的page卡片
var vial = true;
if(!vial){
if(ele.height()<=height){
ele.children('.page-con').height(height+2);
if((!$('.p-ct').hasClass('fixed'))&&val=='true') $('.p-ct').addClass('fixed');
}else{
car2._scrollStart();
if(val=='true') $('.p-ct').removeClass('fixed');
ele.children('.page-con').css('height','100%');
return;
}
}else{
ele.children('.page-con').height(height+2);
if((!$('.p-ct').hasClass('fixed'))&&val=='true') $('.p-ct').addClass('fixed');
}
},
// 富文本的设置
Txt_init : function(node){
if(node.find('.j-txt').length<=0) return;
if(node.find('.j-txt').find('.j-detail p').length<=0) return;
node.find('.j-txt').each(function(){
var txt = $(this).find('.j-detail'),
title = $(this).find('.j-title'),
arrow = title.find('.txt-arrow'),
p = txt.find('p'),
height_t = parseInt(title.height()),
height_p = parseInt(p.height()),
height_a = height_p+height_t;
if ($(this).parents('.m-page').hasClass('m-smallTxt')) {
if ($(this).parents('.smallTxt-bd').index() == 0) {
txt.css('top',height_t);
} else {
txt.css('bottom',height_t);
}
}
txt.attr('data-height',height_p);
$(this).attr('data-height-init',height_t);
$(this).attr('data-height-extand',height_a);
p[0].style[car2._prefixStyle('transform')] = 'translate(0,-'+height_p+'px)';
if($(this.parentNode).hasClass('z-left')) p[0].style[car2._prefixStyle('transform')] = 'translate(0,'+height_p+'px)';
txt.css('height','0');
arrow.removeClass('z-toggle');
$(this).css('height',height_t);
})
},
// 富文本组件点击展开详细内容
bigTxt_extand : function(){
$('body').on('click','.j-title',function(){
if($('.j-detail').length<=0) return;
// 定位
var detail = $(this.parentNode).find('.j-detail');
$('.j-detail').removeClass('action');
detail.addClass('action');
if($(this).hasClass('smallTxt-arrow')){
$('.smallTxt-bd').removeClass('action');
detail.parent().addClass('action');
}
// 设置
if(detail.hasClass('z-show')){
detail.removeClass('z-show');
detail.css('height',0);
$(this.parentNode).css('height',parseInt($(this.parentNode).attr('data-height-init')));
}
else{
detail.addClass('z-show');
detail.css('height',parseInt(detail.attr('data-height')));
$(this.parentNode).css('height',parseInt($(this.parentNode).attr('data-height-extand')));
}
$('.j-detail').not('.action').removeClass('z-show');
$('.txt-arrow').removeClass('z-toggle');
detail.hasClass('z-show') ? ($(this).find('.txt-arrow').addClass('z-toggle')) : ($(this).find('.txt-arrow').removeClass('z-toggle'))
})
}(),
// 文本点击其他地方收起
Txt_back : function(){
$('body').on('click','.m-page',function(e){
e.stopPropagation();
// 判断
var node = $(e.target);
var page = node.parents('.m-page');
var txtWrap = node.parents('.j-txtWrap').length==0 ? node : node.parents('.j-txtWrap');
if(page.find('.j-txt').find('.j-detail p').length<=0) return;
if(page.find('.j-txt').length<=0||node.parents('.j-txt').length>=1 || node.hasClass('bigTxt-btn') || node.parents('.bigTxt-btn').length>=1) return;
// 定位
var detail = txtWrap.find('.j-detail');
$('.j-detail').removeClass('action');
detail.addClass('action');
$('.j-detail').not('.action').removeClass('z-show');
// 设置
txtWrap.each(function(){
var detail = $(this).find('.j-detail');
var arrow = $(this).find('.txt-arrow');
var txt = $(this).find('.j-txt');
if(detail.hasClass('z-show')){
detail.removeClass('z-show');
detail.css('height',0);
txt.css('height',parseInt(txt.attr('data-height-init')));
}else{
detail.addClass('z-show');
detail.css('height',parseInt(detail.attr('data-height')));
txt.css('height',parseInt(txt.attr('data-height-extand')));
}
detail.hasClass('z-show') ? (arrow.addClass('z-toggle')) : (arrow.removeClass('z-toggle'));
})
})
}(),
// 表单显示，输入
input_form : function(){
$('body').on('click','.book-bd .bd-form .btn',function(){
var type_show = $(this).attr("data-submit");
if (type_show == 'true') {
return;
}
var heigt = $(window).height();
$(document.body).css('height',heigt);
car2.page_stop();
car2._scrollStart();
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',15);
$('.book-bg').removeClass('f-hide');
$('.book-form').removeClass('f-hide');
setTimeout(function(){
$('.book-form').addClass('z-show');
$('.book-bg').addClass('z-show');
},50)
$('.book-bg').off('click');
$('.book-bg').on('click',function(e){
e.stopPropagation();
var node = $(e.target);
if(node.parents('.book-form').length>=1 && !node.hasClass('j-close-img') && node.parents('.j-close').length<=0) return;
$('.book-form').removeClass('z-show');
$('.book-bg').removeClass('z-show');
setTimeout(function(){
$(document.body).css('height','100%');
car2.page_start();
car2._scrollStop();
// 设置层级关系-z-index
car2._page.eq(car2._pageNow).css('z-index',9);
$('.book-bg').addClass('f-hide');
$('.book-form').addClass('f-hide');
},500)
})
})
}(),
sex_select : function(){
var btn = $('#j-signUp').find('.sex p');
var strongs = $('#j-signUp').find('.sex strong');
var input = $('#j-signUp').find('.sex input');
btn.on('click',function(){
var strong = $(this).find('strong');
strongs.removeClass('open');
strong.addClass('open');
var value = $(this).attr('data-sex');
input.val(value);
})
}(),
// 显示轻APP按钮
lightapp_intro_show : function(){
$('.market-notice').removeClass('f-hide');
setTimeout(function(){
$('.market-notice').addClass('show');
},100)
},
// 隐藏轻APP按钮
lightapp_intro_hide : function(val){
if(val){
$('.market-notice').addClass('f-hide').removeClass('show');
return;
}
$('.market-notice').removeClass('show');
setTimeout(function(){
$('.market-notice').addClass('f-hide')
},500)
},
// 轻APP介绍弹窗关联
lightapp_intro : function(){
// 点击按钮显示内容
$('.market-notice').off('click');
$('.market-notice').on('click',function(){
$('.market-page').removeClass('f-hide');
setTimeout(function(){
$('.market-page').addClass('show');
setTimeout(function(){
$('.market-img').addClass('show');
},100)
car2.lightapp_intro_hide();
},100)
// 禁止滑动
car2.page_stop();
car2._scrollStop();
});
// 点击窗口让内容隐藏
$('.market-page').off('click');
$('.market-page').on('click',function(e){
if($(e.target).hasClass('market-page')){
$('.market-img').removeClass('show');
setTimeout(function(){
$('.market-page').removeClass('show');
setTimeout(function(){
$('.market-page').addClass('f-hide');
},200)
},500)
car2.lightapp_intro_show();
// 禁止滑动
car2.page_start();
car2._scrollStart();
}
});
},
//统计函数处理
ajaxTongji : function(laytouType){
var channel_id = location.search.substr(location.search.indexOf("channel=") + 8);
channel_id= channel_id.match(/^\d+/) ;
if (!channel_id || isNaN(channel_id) || channel_id<0) {
channel_id = 1;
}
var activity_id = $('#activity_id').val();
//var url = "/analyseplugin/plugin?activity_id="+activity_id + "&plugtype="+laytouType;
//报名统计请求
//$.get(url,{},function(){});
},
// 微信的分享提示
wxShare : function(){
$('body').on('click','.bigTxt-btn-wx',function(){
var img_wx = $(this).parent().find('.bigTxt-weixin');
img_wx.addClass('z-show');
car2.page_stop();
img_wx.on('click',function(){
$(this).removeClass('z-show');
car2.page_start();
$(this).off('click');
})
})
}(),
// loading显示
loadingPageShow : function(){
$('.u-pageLoading').show();
},
// loading隐藏
loadingPageHide : function (){
$('.u-pageLoading').hide();
},
// 对象私有变量刷新
refresh : function(){
$(window).height() = $(window).height();
car2._windowWidth = $(window).width();
},
/**************************************************************************************************************/
/* 函数初始化
***************************************************************************************************************/
/**
* 相关插件的启动
*/
//插件启动函数
plugin : function(){
// 地图
car2.mapCreate();
// 音符飘逸
$('#coffee_flow').coffee({
steams : ["<img src='http://img0.hx.com/magazine/img/audio_widget_01@2x.png' />","<img src='http://img0.hx.com/magazine/img/audio_widget_01@2x.png' />"],
steamHeight : 100,
steamWidth : 44
});
// 蒙板插件
//var node = $('#j-mengban')[0],
// url = 'img/page_01_bg@2x.jpg',
// canvas_url = $('#r-cover').val(),
// type = 'image',
// w = 640,
// h = $(window).height(),
// callback = car2.start_callback;
//
// car2.cover_draw(node,url,canvas_url,type,w,h,callback);
car2.start_callback();
// 微信分享
var option_wx = {};
if($('#r-wx-title').val()!='') option_wx.title = $('#r-wx-title').val();
if($('#r-wx-img').val()!='') option_wx.img = $('#r-wx-img').val();
if($('#r-wx-con').val()!='') option_wx.con = $('#r-wx-con').val();
if(car2._weixin) $(document.body).wx(option_wx);
},
// 蒙板插件初始化函数处理
cover_draw : function(node,url,canvas_url,type,w,h,callback){
if(node.style.display.indexOf('none')>-1) return;
var lottery = new Lottery(node, canvas_url, type, w, h, callback);
lottery.init();
},
menban_callback: function(){
$('#j-mengban').removeClass('z-show');
setTimeout(function(){
$('#j-mengban').addClass('f-hide');
},1500);
//alert(22);
car2.page_start();
//alert(11);
},
// 蒙板插件回调函数处理
start_callback : function(){
// 隐藏蒙板
//$('#j-mengban').removeClass('z-show');
// setTimeout(function(){
// $('#j-mengban').addClass('f-hide');
// },1500)
// 开启window的滚动
car2._scrollStart();
// 开启页面切换
car2.page_start();
// 箭头显示
$('.u-arrow').removeClass('f-hide');
// 播放声音
if(!car2._audio) return;
car2._audioNode.removeClass('f-hide');
car2._audio.play();
// 声音启动
$(document).one("touchstart", function(){
car2._audio.play();
});
// 蒙板插件
var node = $('#j-mengban')[0],
url = 'img/page_01_bg@2x.jpg',
canvas_url = $('#r-cover').val(),
type = 'image',
w = 640,
h = $(window).height(),
callback = car2.menban_callback;
car2.cover_draw(node,url,canvas_url,type,w,h,callback);
},
/**
* app初始化
*/
// 样式适配
styleInit : function(){
// 禁止文版被拖动
document.body.style.userSelect = 'none';
document.body.style.mozUserSelect = 'none';
document.body.style.webkitUserSelect = 'none';
// 判断设备的类型并加上class
if(car2._IsPC()) $(document.body).addClass('pc');
else $(document.body).addClass('mobile');
if(car2._Android) $(document.body).addClass('android');
if(car2._iPhone) $(document.body).addClass('iphone');
// 判断是否有3d
if(!car2._hasPerspective()){
car2._rotateNode.addClass('transformNode-2d');
$(document.body).addClass('no-3d');
}
else{
car2._rotateNode.addClass('transformNode-3d');
$(document.body).addClass('perspective');
$(document.body).addClass('yes-3d');
}
// 图片延迟加载的处理
this.lazy_img();
// 设置富文本的高度
car2.Txt_init(car2._page.eq(car2._pageNow));
// 模版提示文字显示
setTimeout(function(){
$('.m-alert').find('strong').addClass('z-show');
},1000)
$('.u-arrow').on('touchmove',function(e){e.preventDefault()})
$('.p-ct').height($(window).height());
$('.m-page').height($(window).height());
$('#j-mengban').height($(window).height());
$('.translate-back').height($(window).height());
},
// 对象初始化
init : function(){
// 样式，标签的渲染
// 对象操作事件处理
this.styleInit();
this.haddle_envent_fn();
// 禁止滑动
// this._scrollStop();
// 绑定全局事件函数处理
// $(window).on('resize',function(){
// car2.refresh();
// })
$('input[type="hidden"]').appendTo($('body'));
// 图片预先加载
$('<img />').attr('src',$('#r-cover').val());
$('<img />').attr('src',$('.m-fengye').find('.page-con').attr('data-src'));
// loading执行一次
var loading_time = new Date().getTime();
$(window).on('load',function(){
var now = new Date().getTime();
var loading_end = false;
var time;
var time_del = now - loading_time;
if ( time_del >= 500 ) {
loading_end = true;
}
if ( loading_end ) {
time = 0;
} else {
time = 500 - time_del;
}
// loading完成后请求
setTimeout(function(){
// 模版提示隐藏
setTimeout(function(){
$('.m-alert').addClass('f-hide');
},1000)
// 显示正面
$('#j-mengban').addClass('z-show');
// 显示封面内容
setTimeout(function(){
$('.translate-back').removeClass('f-hide');
$('.m-fengye').removeClass('f-hide');
car2.height_auto(car2._page.eq(car2._pageNow),'false');
},1000)
// setTimeout(function(){
// window.scrollTo(0, 1);
// }, 0);
// media初始化
car2.media_init();
// 延迟加载后面三个页面图片
car2.lazy_start();
// 报名提交执行
car2.signUp_submit();
// 插件加载
car2.plugin();
var channel_id = location.search.substr(location.search.indexOf("channel=") + 8);
channel_id= channel_id.match(/^\d+/) ;
if (!channel_id || isNaN(channel_id) || channel_id<0) {
channel_id = 1;
}
var activity_id = $('#activity_id').val();
//var url = "/auto/analyse/"+activity_id + "?channel="+channel_id;
//报名统计请求
//$.get(url,{},function(){});
$('.p-ct').height($(window).height());
$('.m-page').height($(window).height());
$('#j-mengban').height($(window).height());
$('.translate-back').height($(window).height());
},time)
})
}
};
/*初始化对象函数*/
car2.init();
Raw
wechat.js
/**
* 微信相关功能插件
* -----------------------------
* 作者：叼怎么写！- -||
* 时间：2014-03-21
* 准则：Zepto
* 联系：wechat--shoe11414255
* 一张网页，要经历怎样的过程，才能抵达用户面前
* 一个特效，要经历这样的修改，才能让用户点个赞
* 一个产品，创意源于生活，源于内心，需要慢慢品味
*********************************************************************************************
* 这是别人写的东西，我只是重复利用，微调了下--努力努力 ^-^||
*********************************************************************************************/
// 微信相关功能插件--zpeto扩展
;(function($){
$.fn.wx = function(option){
// 初始化函数体
var $wx = $(this);
var opts = $.extend({},$.fn.wx.defaults,option); // 继承传入的值
// 确定微信是否准备好
document.addEventListener("WeixinJSBridgeReady", function(){
window.G_WEIXIN_READY = true;
}, false);
// 回到函数循环执行
function CallWeiXinAPI(fn, count){
var total = 2000; //30s
count = count || 0;
if(true === window.G_WEIXIN_READY || ("WeixinJSBridge" in window)){
fn.apply(null, []);
}else{
if(count <= total){
setTimeout(function(){
CallWeiXinAPI(fn, count++);
}, 15);
}
}
}
var _unit = {
/**
* 执行回调
* @param Object handler {Function callback, Array args, Object context, int delay}
*/
execHandler : function(handler){
if(handler && handler instanceof Object){
var callback = handler.callback || null;
var args = handler.args || [];
var context = handler.context || null;
var delay = handler.delay || -1;
if(callback && callback instanceof Function){
if(typeof(delay) == "number" && delay >= 0){
setTimeout(function(){
callback.apply(context, args);
}, delay);
}else{
callback.apply(context, args);
}
}
}
},
/**
* 合并参数后执行回调
* @param Object handler {Function callback, Array args, Object context, int delay}
* @param Array args 参数
*/
execAfterMergerHandler : function(handler, _args){
if(handler && handler instanceof Object){
var args = handler.args || [];
handler.args = _args.concat(args);
}
this.execHandler(handler);
}
}
// 微信的接口
var _api = {
Share : {
/**
* 分享到微博
* @param Object options {String content, String url}
* @param Object handler
*/
"weibo" : function(options, handler){
CallWeiXinAPI(function(){
WeixinJSBridge.on("menu:share:weibo",function(argv){
WeixinJSBridge.invoke('shareWeibo', options, function(res){
_unit.execAfterMergerHandler(handler, [res]);
});
});
});
},
/**
* 分享到微博
* @param Object options {
* String img_url,
* Number img_width,
* Number img_height,
* String link,
* String desc,
* String title
* }
* @param Object handler
*/
"timeline" : function(options, handler){
CallWeiXinAPI(function(){
WeixinJSBridge.on("menu:share:timeline",function(argv){
WeixinJSBridge.invoke('shareTimeline', options, function(res){
_unit.execAfterMergerHandler(handler, [res]);
});
});
});
},
/**
* 分享到微博
* @param Object options {
* String appid,
* String img_url,
* Number img_width,
* Number img_height,
* String link,
* String desc,
* String title
* }
* @param Object handler
*/
"message" : function(options, handler){
CallWeiXinAPI(function(){
WeixinJSBridge.on("menu:share:appmessage",function(argv){
WeixinJSBridge.invoke('sendAppMessage', options, function(res){
_unit.execAfterMergerHandler(handler, [res]);
});
});
});
}
},
/**
* 设置底栏
* @param boolean visible 是否显示
* @param Object handler
*/
"setToolbar" : function(visible, handler){
CallWeiXinAPI(function(){
if(true === visible){
WeixinJSBridge.call('showToolbar');
}else{
WeixinJSBridge.call('hideToolbar');
}
_unit.execAfterMergerHandler(handler, [visible]);
});
},
/**
* 设置右上角选项菜单
* @param boolean visible 是否显示
* @param Object handler
*/
"setOptionMenu" : function(visible, handler){
CallWeiXinAPI(function(){
if(true === visible){
WeixinJSBridge.call('showOptionMenu');
}else{
WeixinJSBridge.call('hideOptionMenu');
}
_unit.execAfterMergerHandler(handler, [visible]);
});
},
/**
* 调用微信支付
* @param Object data 微信支付参数
* @param Object handlerMap 回调句柄 {Handler success, Handler fail, Handler cancel, Handler error}
*/
"pay" : function(data, handlerMap){
CallWeiXinAPI(function(){
var requireData = {"appId":"","timeStamp":"","nonceStr":"","package":"","signType":"","paySign":""};
var map = handlerMap || {};
var handler = null;
var args = [data];
for(var key in requireData){
if(requireData.hasOwnProperty(key)){
requireData[key] = data[key]||"";
console.info(key + " = " + requireData[key]);
}
}
WeixinJSBridge.invoke('getBrandWCPayRequest', requireData, function(response){
var key = "get_brand_wcpay_request:";
switch(response.err_msg){
case key + "ok":
handler = map.success;
break;
case key + "fail":
handler = map.fail || map.error;
break;
case key + "cancel":
handler = map.cancel || map.error;
break;
default:
handler = map.error;
break;
}
_unit.execAfterMergerHandler(handler, args);
});
});
}
};
var opt1 = {
"content" : opts.con
};
var opt2 = {
"img_url" : opts.img,
"img_width" : 180,
"img_height" : 180,
"link" : opts.link,
"desc" : opts.con,
"title" : opts.title
};
// var opt3 = $.extend({"appid":"wx21f7e6a981efd178"}, opt2);
handler = {
callback : function(){
}
}
// 执行函数
_api.Share.timeline(opt2,handler);
_api.Share.message(opt2,handler);
_api.Share.weibo(opt1,handler);
return $wx;
}
$.fn.wx.defaults = {
title : '5cn,我为你传媒,制作你自己的微杂志',
con : '不一样的阅读新方式.颠覆手机新体验！',
link : document.URL,
img : location.protocol + "//" + location.hostname + ':' + location.port +'/magtemplate/one/img/5.jpg?time=1'
};
$.fn.wx.version = '1.0.0';
})(Zepto);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment