眼镜h5
// 填充博乐纯门店数据
(function() {
var $biotrueCitySelect = $('.regional-popup select.city');
jQuery.each(storedata.biotrue, function(i, item) {
if (item) {
var city = item[0];
var name = item[1];
var address = item[2];
var tel = item[3];
var cityData = $biotrueCitySelect.data(city);
if (!cityData) {
var cityData = {};
$biotrueCitySelect.data(city, cityData)
cityData.$option = $('<option>').text(city).val(city).appendTo($biotrueCitySelect.find('optgroup'));
cityData.$list = $('<div class="store-list"><ul></ul></div>').appendTo('.regional-popup');
}
var $li = $('<li>');
$('<p class="name">').text(name).appendTo($li);
$('<p class="addr">').text(address).wrapInner('<span></span>').appendTo($li);
$('<p class="tel">').text(tel).wrapInner('<span></span>').appendTo($li);
cityData.$list.find('ul').append($li);
}
});
$biotrueCitySelect.val('');
})();
// 填充合作商门店数据
(function() {
var $buttons = $('.dealer-popup .buttons');
for (var dealer in storedata) {
if (dealer == 'biotrue') {
continue;
}
var $button = $('<a href="javascript:;"></a>').appendTo($buttons);
$button.data('dealer', dealer).css({backgroundImage: 'url("/images/btn-'+dealer+'.png")'}); var stores = storedata[dealer];
var $container = $('<div class="store-list"><ul></ul></div>');
$container.data('dealer', dealer);
var $ul = $container.find('ul');
jQuery.each(stores, function(i, item) {
if (item) {
var city = item[0];
var name = item[1];
var address = item[2];
var tel = item[3];
var $li = $('<li>');
$('<p class="name">').text(name).appendTo($li);
$('<p class="addr">').text(address).wrapInner('<span></span>').appendTo($li);
$('<p class="tel">').text(tel).wrapInner('<span></span>').appendTo($li);
$li.appendTo($ul);
}
});
$container.appendTo('.dealer-popup');
}
})(); // 屏幕尺寸监测
(function () {
function checkScreen() {
if (document.documentElement.clientHeight < document.documentElement.clientWidth) {
var $msg = $('<div>为了达到最佳的体验效果，建议您使用竖屏浏览</div>').appendTo('body');
$msg.css({
position: 'fixed',
top: 0,
left: '50%',
padding: '.5em',
background: 'rgba(0,0,0,.8)',
color: '#fbfcc5',
zIndex: 1,
whiteSpace: 'nowrap',
opacity: 0,
borderRadius: '.5em'
});
$msg.css({ marginLeft: -$msg.width() / 2 });
$msg.animate({ opacity: 1 }, 500).delay(2000).animate({ opacity: 0 }, 500, function () {
$msg.remove();
})
}
}
function scaleContent() {
setTimeout(function() {
$('.scale-container').each(function(i, elem) {
var $container = $(this);
var t = parseFloat($container.css('top'));
var b = parseFloat($container.css('bottom'));
var h = parseFloat($container.height());
var ph = $container.parent().height();
$container.children('.scale-content').each(function(i, elem) {
var hContent = $(this).height();
if (h <= hContent) {
var scale = (ph-t-b) / hContent;
scale = Math.max(0, scale);
$(this).css({transform: 'scale('+scale+') '});
}
else {
$(this).css({transform: ''});
}
$(this).toggleClass('scale-enabled', h<=hContent);
});
});
});
}
// var $pageContent = $('.page-content');
$(window).resize(function () {
// $pageContent.height(window.document.documentElement);
checkScreen();
scaleContent();
});
checkScreen();
scaleContent();
})();
// 定义loading及各slide动画
(function () {
// var imgList = 'bottom-icons.png,digits.png,droplet1.png,droplet2.png,droplet3.png,droplet4.png,droplet5.png,droplet6.png,hr.png,light-mask.png,light-ray.png,loading-bg.jpg,loading-mask.png,loading-outline.png,logo-white.png,logo.png,s1-drop6.png,s1-eye.jpg,s1-text.png,s2-bg.jpg,s3-text1.png,s3-text2.png,s4-clock-bg.png,s4-glasses.png,s4-moon.png,s4-sun.png,s4-text1.png,s4-text2.png,s5-chart-new-3.png,s5-chart-new.png,s5-chart.png,s5-text1.png,s6-glass.jpg,s6-protect.png,s6-text1.png,s7-product.jpg,s8-product.jpg,water-text-1.png,water-text-2.png,wave.png,wave0.png,';
var imgList = 'bottom-icons.png,digits.png,droplet1.png,droplet2.png,droplet3.png,droplet4.png,droplet5.png,droplet6.png,hr.png,light-mask.png,light-ray.png,loading-bg.jpg,loading-mask.png,loading-outline.png,logo-white.png,logo.png,s1-drop6.png,s1-eye.jpg,s1-text.png,s2-bg.jpg,s3-text1.png,s3-text2.png,s4-glasses.png,s4-text1.png,s4-text2.png,s5-chart-new-3.png,s5-chart-new.png,s5-chart.png,s5-text1.png,s6-glass.jpg,s6-protect.png,s6-text1.png,s7-product.jpg,s8-product.jpg,water-text-1.png,water-text-2.png,wave.png,wave0.png,';
imgList = imgList.match(/[^,]+/g); $('<img src="/images/loading-outline.png">').load(function(e) {
$('.loading-icon').show(); var imgProgress = 0;
var timeProgress = 0;
function updateProgress() {
var progress = Math.min(imgProgress, timeProgress);
$('.loading-icon .mask-rotate').each(function(i, elem) {
var angle = -360 * progress;
var maskAngle = angle - 90 + 90 * i;
maskAngle = Math.min(maskAngle, 0);
maskAngle = Math.max(maskAngle, -180);
$(this).css({transform: 'rotate('+maskAngle+'deg)'});
});
if (progress == 1) {
initSlideAnim();
var swiper = $('.swiper-container').data('swiper');
swiper.slideTo(0, 0);
new TimelineLite({onComplete: function() {
if (swiper.activeIndex != 0) {
swiper.slideTo(0, 0);
}
else {
var slide = swiper.slides[swiper.activeIndex];
var tl = $(slide).data('tl');
tl && tl.play(0);
}
}}).to('.loading', 1, {opacity: 0})
.set('.loading', {display: 'none'})
.set('.swiper-container', {display: 'block'})
.from('.swiper-container', 1, {opacity: 0}, 0)
.timeScale(3)
;
}
}
var loadedCount = 0;
$.each(imgList, function(i, item) {
$('<img>').prop({src: '/images/' + item}).on('load error', function(e) {
loadedCount++;
imgProgress = loadedCount/imgList.length
updateProgress();
});
});
$({p:0}).animate({p:1}, {duration: 2000, progress: function(animation, progress, remainingMs) {
timeProgress = this.p;
updateProgress();
}});
}); function initSlideAnim() {
var $container = $('.swiper-container');
var html = $container.find('script[type="text/template"]').html();
$container.empty().append($.parseHTML(html));
$(window).resize(); // 确保内容可缩放。
// $.parseHTML(html);
var $swiperWrapper = $container.find('.swiper-wrapper');
// $swiperWrapper.appendTo('.swiper-container');
$('.swiper-slide').each(function (i, elem) {
var tl = new TimelineLite({ paused: true });
var $slide = $(this);
$slide.data().tl = tl;
});
$('.slide-1').each(function (i, elem) {
var $slide = $(this);
var tl = $slide.data().tl;
var $drops2 = $slide.find('.drops-2');
var $drop = $drops2.find('.drop');
var delay = 0;
var wh = $('.page-content').height();
tl
.delay(delay)
.from('.s1-text', 1, { opacity: 0 }, 1)
.from('.s1-eye', 1, { opacity: 0 }, 1)
.from($slide.find('.droplet-2, .droplet-5'), 3, {opacity: 0, y: -100}, 1)
.from($slide.find('.droplet-1, .droplet-4'), 3, {opacity: 0, y: -150}, 1)
//.from($slide.find('.droplet-3, .droplet-6'), 2, {opacity: 0, y: -50}, 'far')
.from($drops2, 4, { opacity: 0, bottom: '100%', ease: Power1.easeOut }, 1)
.to($slide.find('.droplet-1'), 2, {y: 5, yoyo: true, repeat: -1, ease: Sine.easeInOut}, 4)
.to($slide.find('.droplet-4'), 2, {y: -5, yoyo: true, repeat: -1, ease: Sine.easeInOut}, 4.2)
.timeScale(2.5)
;
});
$('.slide-2').each(function (i, elem) {
var $slide = $(this);
var tl = $slide.data().tl;
var $p = $slide.find('.texts p');
$p.each(function(i, elem) {
var $this = $(this);
var letters = $this.text().match(/./g);
$this.empty();
jQuery.each(letters, function(i, item) {
$('<span>').text(item).appendTo($this);
});
});
tl.staggerFrom($p.find('span'), .5, { opacity: 0, x: -20}, .05)
.from($slide.find('.glass'), .5, { opacity: 0, y: 50, scale: 1.5}, 1.5)
.timeScale(1.5)
;
});
$('.slide-3').each(function (i, elem) {
var $slide = $(this);
var slideData = $slide.data();
var $water = $slide.find('.water');
var $defaultWater = $water.not('.reverse-water');
var $reverseWater = $water.filter('.reverse-water');
var timeScale = 3;
var tlLow = new TimelineLite();
tlLow
.from($water.filter('.low-water'), 2, { bottom: '-50%', opacity: 0 })
.from($slide.find('.water-text-2'), 1, { opacity: 0 }, '-=.2')
.from($water.filter('.high-water'), 2, { bottom: '-50%', opacity: 0 }, 3)
.to($slide.find('.text-2,.water-0'), .5, { opacity: 0 }, '-=1')
.from($slide.find('.water-text-1'), 1, { opacity: 0 }, '-=.2')
.timeScale(timeScale)
;
var tlWave = new TimelineLite();
tlWave
.to($defaultWater, 1.5, { left: '-' + ($defaultWater.width() / 3), ease: Linear.easeIn, repeat: -1 }, 0)
.to($reverseWater, 1.5, { right: '-' + ($defaultWater.width() / 3), ease: Linear.easeIn, repeat: -1 }, 0)
;
slideData.tl.add([tlLow, tlWave]);
});
$('.slide-4').each(function (i, elem) {
var $slide = $(this);
var tl = $slide.data().tl;
tl
.add('begin', 0)
.to($slide.find('.compare-col-1 .glass-frame-1'), 1, {opacity: 0}, 2)
.fromTo($slide.find('.compare-col-1 .glass-frame-2'), 1, {opacity: 0}, {opacity: 1}, 2)
.to($slide.find('.compare-col-1 .glass-frame-2'), 1, {opacity: 0}, 6)
.fromTo($slide.find('.compare-col-1 .glass-frame-3'), 1, {opacity: 0}, {opacity: 1}, 6)
;
for (var i = 0; i < 8; i++) {
tl.to($slide.find('.compare-col-1 .time .digit'), .2, {top: -150*(i+1), delay: .8}, i);
}
for (var i = 0; i < 16; i++) {
tl.to($slide.find('.compare-col-2 .time .digit').last(), .2, {top: -150*(i+1), delay: .8}, i);
}
for (var i = 0; i < 1; i++) {
tl.to($slide.find('.compare-col-2 .time .digit').last().prev(), .2, {top: -150*(i+1), delay: .8}, 10*(i+1)-1);
}
tl
.fromTo($slide.find('.compare-col-1 .sun'), 8, {top: 100}, {top: 0, ease: Linear.easeIn}, 0)
.fromTo($slide.find('.compare-col-2 .sun'), 16, {top: 100}, {top: -100, ease: Linear.easeIn}, 0)
.fromTo($slide.find('.compare-col-1 .moon'), 8, {top: 280}, {top: 160, ease: Linear.easeIn}, 0)
.fromTo($slide.find('.compare-col-2 .moon'), 16, {top: 280}, {top: 40, ease: Linear.easeIn}, 0)
//.to($slide.find('.compare-col-1 .plate .bg'), 8, {left: -(452-172)/2, ease: Linear.easeIn}, 0)
//.to($slide.find('.compare-col-2 .plate .bg'), 16, {left: -(452-172), ease: Linear.easeIn}, 0)
//.set($slide.find('.plate .bg'), {left: -(452-172)/2, ease: Linear.easeIn}, 0)
.to($slide.find('.compare-col-1 .h-pointer'), 8, {rotation: '+='+(30*8), ease: Linear.easeIn}, 0)
.to($slide.find('.compare-col-1 .m-pointer'), 1, {rotation: '+=360', ease: Linear.easeIn, repeat: 8-1 }, 0)
.to($slide.find('.compare-col-2 .h-pointer'), 16, {rotation: '+='+(30*16), ease: Linear.easeIn}, 0)
.to($slide.find('.compare-col-2 .m-pointer'), 1, {rotation: '+=360', ease: Linear.easeIn, repeat: 16-1 }, 0)
.timeScale(6)
;
return;
// 以下为废弃代码
tl.add(createColTimeline($slide.find('.compare-col-1'), 8), 0);
tl.add(createColTimeline($slide.find('.compare-col-2'), 16), 0);
tl.eventCallback('onStart', function () {
$.each(this.getChildren(false), function (i, item) {
this.play(0);
});
});
tl.timeScale(4);
function createColTimeline($col, duration) {
var tl = new TimelineMax();
tl.add(createGlassTimeline($col.find('.glass'), duration), 0);
tl.add(craeteTimeTimeline($col.find('.time')), 0);
tl.add(createClockTimeline($col), 0);
tl.addPause(duration);
return tl;
}
function createGlassTimeline($glass, duration) {
var $frame = $glass.find('.glass-frame');
var stepDuration = Math.ceil(duration / $frame.length);
var tl = new TimelineLite();
var $currentFrame = $frame.first();
var animDuration = Math.min(stepDuration, 1);
var delay = stepDuration - animDuration;
while ($currentFrame.length) {
// 非第一个
if ($currentFrame.prev().length) {
tl.fromTo($currentFrame, animDuration, { opacity: 0 }, { opacity: 1 }, '-=' + animDuration);
}
// 第一个
else {
tl.set($currentFrame, { opacity: 1 });
}
// 非最后一个
if ($currentFrame.next().length) {
tl.to($currentFrame, animDuration, { opacity: 0, delay: delay });
}
$currentFrame = $currentFrame.next();
}
return tl;
}
function createClockTimeline($col) {
var tl = new TimelineLite();
tl
.fromTo($col.find('.sun'), 16.1, {top: 100}, {top: -100, ease: Linear.easeIn}, 0)
.from($col.find('.moon'), 16.1, {top: 270, ease: Linear.easeIn}, 0)
.to($col.find('.plate .bg'), 16.1, {left: -(452-172), ease: Linear.easeIn}, 0)
.to($col.find('.h-pointer'), 12, {force3D:false, rotation: '+=360', ease: Linear.easeIn, repeat: -1 }, 0)
.to($col.find('.m-pointer'), 1, {force3D:false, rotation: '+=360', ease: Linear.easeIn, repeat: -1 }, 0);
return tl;
}
/**
* 时间数字增长的效果。每秒增长一个数字。
*/
function craeteTimeTimeline($time) {
var tl = new TimelineLite();
var $digit = $time.find('.digit');
$digit.each(function (i, elem) {
var digitPosition = $digit.length - i;
var stepDuration = Math.pow(10, digitPosition - 1);
tl.add(createDigitTimeline($(this), stepDuration, digitPosition > 1), 0);
});
return tl;
}
/**
* 单个数字滑动切换的效果。stepDuration
* $digit 数字元素包装
* stepDuration 一次切换经过的时长（秒）
*/
function createDigitTimeline($digit, stepDuration, notFromZero) {
stepDuration = stepDuration || 1;
var $bg = $digit.find('.bg');
var h = $digit.height();
var delay = stepDuration - .3; var tl = new TimelineLite();
// 不是最后一个数字，则不显示第一个0
if (notFromZero) {
tl.set($bg, { marginTop: h, backgroundPosition: '0 -' + h + 'px' }, 0);
}
tl.to($bg, .3, { top: -h, delay: delay });
tl.set($bg, { marginTop: 0, backgroundPosition: '0 0' }); var tlRepeat = new TimelineMax();
tlRepeat.repeat(-1);
$.each(new Array(10), function (i, elem) {
tlRepeat.to($bg, .3, { top: -h * (i + 2), delay: delay })
});
return tl.add(tlRepeat);
}
});
$('.slide-5').each(function (i, elem) {
var $slide = $(this);
var tl = $slide.data().tl;
tl
.from($slide.find('.chart-new-1, .chart-new-3'), 2, { height: 0 }, 0)
.from($slide.find('.chart-new-2'), 2, { width: 0 }, 0)
.timeScale(1.5)
;
});
$('.slide-6').each(function (i, elem) {
var $slide = $(this);
var tl = $slide.data().tl;
tl
.fromTo($slide.find('.light-ray'), 2, { top: '-80%' }, { top: '130%', ease: Linear.easeIn, repeat: -1 }, 0)
;
});
// 应用swiper插件
(function () {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
direction: 'vertical',
hashnav: false,
onSlideChangeEnd: onSlideChangeEnd
});
function onSlideChangeEnd(swiper) {
// 播放切入的slide
var slide = swiper.slides[swiper.activeIndex];
var tl = $(slide).data().tl;
jQuery.each([].concat(tl), function(i, item) {
if (item) {
item.play(0);
}
});
// 停止切出的slide，
var prevSlide = swiper.slides[swiper.previousIndex];
prevTl = $(prevSlide).data().tl;
jQuery.each([].concat(prevTl), function(i, item) {
if (item) {
item.pause(0);
}
});
// 更新logo
var tlLogo = new TimelineLite();
$(slide).each(function(i, elem) {
var isWhite = !!+$(this).data('logo-white');
var opacityLogo = +!isWhite;
var opacityLogoWhite = +isWhite;
tlLogo.to($('.hud .logo').not('.logo-white'), .2, {opacity: opacityLogo}, 0)
.to($('.hud .logo-white'), .2, {opacity: opacityLogoWhite}, 0)
;
});
// 更新bottom
var tlBottom = new TimelineLite();
var bottomHL = $(slide).data('bottom-hl');
if (bottomHL) {
$('.bottom').show();
tlBottom.to('.bottom', .2, { opacity: 1});
tlBottom.to('.bottom .highlight-shim', .2, { left: (bottomHL - 1) * 25 + '%' }, 0);
}
else {
tlBottom.to('.bottom', .2, { opacity: 0, onComplete: function() {
$('.bottom').hide();
}})
}
//console.log(tl, prevTl);
// 初始化门店页，隐藏门店列表
$('.slide-8 em').css({opacity: 0});
$('.store-list').hide();
}
onSlideChangeEnd(swiper);
})();
// 定义功能交互
// 绑定页面跳转按钮
(function() {
$('[data-slide-to]').click(function(e) {
var selector = $(this).data('slide-to');
var $container = $('.swiper-container');
var swiper = $container.data('swiper');
var index = $(selector).index();
try {
swiper.slideTo(index);
} catch (e) {
console.error(e);
}
});
$('.btn-search-store').click(function(e) {
showSearchStorePopup();
});
$('.btn-apply-now').click(function(e) {
showApplyNowPopup();
});
})();
// 查找门店功能
(function() {
return; // 将废弃
// 门店查询控件事件
$('.fake-select select').each(function(i, elem) {
var $select = $(this);
$select.data().$selectedText = $select.closest('.fake-select').find('.selected-text');
var $em = $(this).siblings('em');
$em.data().tl = new TimelineLite({paused: true}).fromTo($em, .1, {opacity: 0}, {opacity: 1, repeat: 4, yoyo: true});
});
$('.fake-select select.city').change(function(e) {
var $option = $(this).find('option:selected');
var areas = $option.data('areas') || '';
var areaArray = areas.match(/[^,]+/g) || [];
var emptyOption = new Option();
emptyOption.selected = true;
$('select.area').empty().append(emptyOption).change();
jQuery.each(areaArray, function(i, item) {
$('select.area').append(new Option(item, item));
});
});
$('.fake-select select').change(function(e) {
$(this).data().$selectedText.text($(this).val());
});
$('.find-store').click(function(e) {
$(this).closest('.form').find('select').each(function(i, elem) {
var $em = $(this).siblings('em');
var tl = $em.data('tl');
if (this.value) {
tl.pause(0);
}
else {
tl.play(0);
}
});
var city = $('select.city').val();
var area = $('select.area').val();
if (city && area) {
$('.store-list').show().find('li').each(function(i, elem) {
var data = $(this).data();
$(this).toggle(data.city == city && data.area == area);
});
}
});
$('.change-city').click(function(e) {
$('.store-list').hide();
});
})();
// 自定义兼容HTML5 ValidityState 的jQuery validation插件
(function($) {
var defaults = {};
$.fn.validate = function(options) {
return this.each(function() {
var settings = $.extend({}, defaults, options);
//if (!this.validity) {
// 某些旧浏览器貌似对validationMessage支持不完善，
// 所以在此处强制判断有效性，并保存在 validationMessage2 中。
var required = $(this).is('[required]');
var pattern = $(this).attr('pattern');
this.validationMessage2 = '';
if (required && !this.value) {
this.validationMessage2 = '请填写此字段。';
} else if (pattern != void(0) && !this.value.match(new RegExp(pattern))) {
this.validationMessage2 = '请与所请求的格式保持一致。';
}
try {
this.validationMessage = this.validationMessage2;
} catch (e) {
// IE10+ strict 模式不允许对只读属性赋值
}
//}
});
};
$.fn.valid = function(options) {
var valid;
this.first().each(function(i, elem) {
var required = $(this).is('[required]');
var pattern = $(this).attr('pattern');
this.validationMessage2 = '';
if (required && !this.value) {
this.validationMessage2 = '请填写此字段。';
}
else if (pattern != void(0) && !this.value.match(new RegExp(pattern))) {
this.validationMessage2 = '请与所请求的格式保持一致。';
}
try {
this.validationMessage = this.validationMessage2;
} catch (e) {
// IE10+ strict 模式不允许对只读属性赋值
}
valid = !(this.validationMessage || this.validationMessage2);
});
return valid;
};
})(jQuery);
// 申领功能
(function() {
var $popup = $('.apply-now-popup');
var $form = $popup.find('.apply-form');
var action2ajax = {}; //$popup.data('action2ajax', $.extend($form.data('action2ajax'), {})).data('action2ajax');
var QueryTodayOfInventory = '/OneDay_Product/QueryTodayOfInventory'; //查询今日免费申领次数库存
var QueryCannotGetProducts = '/OneDay_Product/QueryCannotGetProducts'; //查询已无库存的产品
var AuthCodeValidate = '/OneDay_Product/AuthCodeValidate';//发送短信验证码
var ApplySample = '/OneDay_Product/ApplySample';//申领小样
var countdownPromise; // 发短信倒计时
function closePopup() {
$popup.hide();
for (var action in action2ajax) {
var ajax = action2ajax[action];
try {
ajax.abort();
} catch (e) {
// noop
}
}
}
function showLoading() {
$popup.find('.loading-popup').show().siblings('.popup').hide();
}
function showApplySuccess() {
$popup.find('.apply-success-popup').show().siblings('.popup').hide();
}
function hideSubPopup() {
$popup.find('.popup').hide();
}
function showApplyRunOut() {
$popup.find('.apply-run-out-popup').show().siblings('.popup').hide();
}
window.showApplyNowPopup = function() {
$popup.show();
// $form.find(':input').val(''); //清空表单
// 查询当前是否为可申领状态
// 当还未查询过时，才继续执行查询状态
if (!action2ajax[QueryTodayOfInventory]) {
showLoading();
var ajax;
action2ajax[QueryTodayOfInventory] = $.post(QueryTodayOfInventory);
action2ajax[QueryTodayOfInventory].done(function(data, textStatus, jqXHR) {
// 可以申领
if (data.result == 1) {
// 显示立即申领，隐藏二级弹框
hideSubPopup();
$form.find(':input').val(''); //清空表单
// 初始化申领列表
action2ajax[QueryCannotGetProducts] = $.post(QueryCannotGetProducts).done(function(data, textStatus, jqXHR) {
var list = '-1.00,-1.25,-1.50,-1.75,-2.00,-2.25,-2.50,-2.75,-3.00,-3.25,-3.50,-3.75,-4.00,-4.25,-4.50,-4.75,-5.00,-5.25,-5.50,-5.75,-6.00,-6.25,-6.50,-7.00,-7.50,-8.00,-8.50,-9.00'.match(/[^,]+/g);
var nisSet = {}; // not in stock
if (data.result == 1) {
jQuery.each(data.list.match(/[^,]+/g), function(i, item) {
nisSet[item] = true;
});
}
var $select = $('.apply-now-popup select.degrees');
var $optgroup = $select.find('optgroup').empty();
// $(new Option).val('').text('请选择').appendTo($select);
jQuery.each(list, function(i, item) {
if (!nisSet[item]) {
$(new Option).val(item).text(item).appendTo($optgroup);
}
});
$select.val('');
$select.trigger('change', [true]); // 触发change事件以填充模拟的文本框。
});
}
// 当前无法申领
else {
action2ajax[QueryTodayOfInventory] = null;
// 当对话框可见（未关闭时）
$popup.filter(':visible').each(function(i, elem) {
// 已申领完
if (data.result == 0) {
showApplyRunOut();
}
else {
alert('不在活动时间范围内。');
closePopup();
}
});
}
}).fail(function(jqXHR, textStatus, errorThrown) {
action2ajax[QueryTodayOfInventory] = null;
// 如果存在可见的popup，再弹框
$popup.filter(':visible').each(function(i, elem) {
alert('网络错误，请稍候再试。');
closePopup();
});
});
} else {
// 已查询过状态，则直接显示弹层，不做其它处理
hideSubPopup();
}
/*
// 查询当前是否为可申领状态
// 当目前不存在正在查询的请求时，才继续执行
if ($.when(action2ajax[QueryTodayOfInventory]).state() != 'pending') {
showLoading();
action2ajax[QueryTodayOfInventory] = $.post(QueryTodayOfInventory).done(function(data, textStatus, jqXHR) {
// 可以申领
if (data.result == 1) {
// 显示立即申领，隐藏二级弹框
hideSubPopup();
// 初始化申领列表
action2ajax[QueryCannotGetProducts] = $.post(QueryCannotGetProducts).done(function(data, textStatus, jqXHR) {
var list = '-1.00,-1.25,-1.50,-1.75,-2.00,-2.25,-2.50,-2.75,-3.00,-3.25,-3.50,-3.75,-4.00,-4.25,-4.50,-4.75,-5.00,-5.25,-5.50,-5.75,-6.00,-6.25,-6.50,-7.00,-7.50,-8.00,-8.50,-9.00'.match(/[^,]+/g);
var nisSet = {}; // not in stock
if (data.result == 1) {
jQuery.each(data.list.match(/[^,]+/g), function(i, item) {
nisSet[item] = true;
});
}
var $select = $('.apply-now-popup select.degrees');
var $optgroup = $select.find('optgroup').empty();
// $(new Option).val('').text('请选择').appendTo($select);
jQuery.each(list, function(i, item) {
if (!nisSet[item]) {
$(new Option).val(item).text(item).appendTo($optgroup);
}
});
$select.val('');
$select.trigger('change', [true]); // 触发change事件以填充模拟的文本框。
});
}
// 当前无法申领
else {
// 当对话框可见（未关闭时）
$popup.filter(':visible').each(function(i, elem) {
// 已申领完
if (data.result == 0) {
showApplyRunOut();
}
else {
alert('不在活动时间范围内。');
closePopup();
}
});
}
}).fail(function(jqXHR, textStatus, errorThrown) {
$popup.filter(':visible').each(function(i, elem) {
alert('网络错误，请稍候再试。');
closePopup();
});
});
}
*/
};
$popup.find('.close-btn').click(function(e) {
closePopup();
});
// 解决弹出的键盘把文本框遮住的问题
$form.find(':input').on('focus select', function(e) {
var field = this;
setTimeout(function() {
try {
field.scrollIntoViewIfNeeded();
} catch (e) {
}
}, 500);
});
// 修改表单项时，更新错误消息。
$form.find(':input').on('blur change', function(e, doNotValidate) {
if (!doNotValidate) {
$(this).closest('label').find('.error-message').toggle(!$(this).valid());
}
});
// 选择select
$form.find('select').change(function(e) {
var $text = $(this).closest('.select').find('.select-text');
var text = $(this).find('option:selected').text();
$text.text(text);
});
// 点击发送验证码
$('.send-auth-code,.resend-auth-code').click(function(e) {
e.preventDefault();
// 判断上一次发送验证码间隔时间是否结束
if ($.when(action2ajax[AuthCodeValidate], countdownPromise).state() == 'pending') {
return;
}
// 手机号填写正确则发送验证码
var $mobile = $form.find('[name="mobile"]');
$.Deferred(function(deferred) {
var fieldValid = $mobile.valid();
$mobile.closest('label').find('.error-message').toggle(!fieldValid);
if (!fieldValid) {
$mobile.focus().select();
}
fieldValid || deferred.reject();
deferred.resolve();
/*
$mobile.validate().each(function(i, elem) {
var fieldValid = !this.validationMessage;
$(this).closest('label').find('.error-message').toggle(!fieldValid);
if (!fieldValid) {
try {
$(this).select()[0].scrollIntoViewIfNeeded();
} catch (e) {
// noop
}
}
fieldValid || deferred.reject();
});
deferred.resolve();
*/
}).done(function() {
$('.send-auth-code').hide();
$('.auth-code-sent').show();
$('.auth-code-message').text('正在发送验证码，请稍候……');
action2ajax[AuthCodeValidate] = $.post(AuthCodeValidate, {mobile: $mobile.val()});
action2ajax[AuthCodeValidate].always(function() {
$('.auth-code-message').text('验证码发送失败');
}).done(function(data, textStatus, jqXHR) {
switch (data.result) {
case -1:
alert('无法识别的手机号');
break;
case 1:
$('.auth-code-message').text('验证码发送成功');
break;
case 2:
alert('不在活动时间范围内');
break;
case 3:
alert('此手机号已领取过');
break;
case 4:
alert('当日名额已领完');
break;
case 5:
default:
$('.auth-code-message').text('系统繁忙，请稍候再试。');
break;
}
}).fail(function(jqXHR, textStatus, errorThrown) {
$('.auth-code-message').text('网络错误，请稍候再试。');
}).done(function(data, textStatus, jqXHR) {
// 发送成功后倒计时
if (data.result == 1) {
countdownPromise = $.Deferred(function(deferred) {
var t = new Date;
t.setSeconds(t.getSeconds() + 60);
function checkTime() {
if (deferred.state() == 'pending') {
var t1 = new Date;
if (t1 < t) {
var s = Math.ceil((t-t1) / 1000);
deferred.notify(s);
setTimeout(checkTime, 1000);
}
else {
deferred.resolve();
}
}
}
checkTime();
}).promise().done(function() {
$('.resend-auth-code').text('重新发送验证码');
}).progress(function(s) {
$('.resend-auth-code').text(s + '秒后可重新发送验证码');
});
}
});
});
});
// 提交前验证表单
$form.find(':submit').click(function(e) {
// 上一次ajax提交已结束才可以继续处理
if ($.when(action2ajax[ApplySample]).state() == 'pending') {
e.preventDefault();
return;
}
// 验证表单，无误则提交
var $invalid = $();
$form.find(':input').each(function(i, elem) {
var fieldValid = $(this).valid();
$(this).closest('label').find('.error-message').toggle(!fieldValid);
if (!fieldValid) {
$invalid = $invalid.add(this);
e.preventDefault();
}
});
$invalid.first().each(function(i, elem) {
var field = this;
$(this).focus().select();
});
/*
$.Deferred(function(deferred) {
$form.find(':input').validate().each(function(i, elem) {
var fieldValid = !this.validationMessage;
$(this).closest('label').find('.error-message').toggle(!fieldValid);
if (!fieldValid) {
try {
$(this).focus().select()[0].scrollIntoViewIfNeeded();
} catch (e) {
// noop
}
}
fieldValid || deferred.reject();
});
deferred.resolve();
}).fail(function() {
e.preventDefault();
});
*/
});
// 申领表单提交
$form.on('submit', function(e) {
e.preventDefault();
// 上一次ajax提交已结束才可以继续处理
if ($.when(action2ajax[ApplySample]).state() == 'pending') {
return;
}
// 验证表单，无误则提交
$.Deferred(function(deferred) {
// 验证表单，无误则提交
var $invalid = $();
$form.find(':input').each(function(i, elem) {
var fieldValid = $(this).valid();
$(this).closest('label').find('.error-message').toggle(!fieldValid);
if (!fieldValid) {
$invalid = $invalid.add(this);
deferred.reject();
}
});
$invalid.first().focus().select();
deferred.resolve();
/*
$form.find(':input').validate().each(function(i, elem) {
var fieldValid = !this.validationMessage;
$(this).closest('label').find('.error-message').toggle(!fieldValid);
if (!fieldValid) {
try {
$(this).focus().select()[0].scrollIntoViewIfNeeded();
} catch (e) {
// noop
}
}
fieldValid || deferred.reject();
});
deferred.resolve();
*/
}).done(function() {
// 提交申领表单
$form.find('.submit-btn').text('提交中，请稍候…');
var data = $form.serializeArray();
action2ajax[ApplySample] = $.post(ApplySample, data);
var name = $form.find('[name="name"]').val(); // 用于成功后显示名字
// 显示状态
action2ajax[ApplySample].always(function() {
$form.find('.submit-btn').text('提交申领信息');
}).done(function(data, textStatus, jqXHR) {
switch (data.result) {
case -7:
alert('右眼度数选择有误');
break;
case -6:
alert('左眼度数选择有误');
break;
case -5:
alert('地址填写有误');
break;
case -4:
alert('姓名填写有误');
break;
case -2:
alert('手机号码填写有误');
break;
case -1:
case 0:
alert('验证码无效');
break;
case 1:
// 申领成功
showApplySuccess();
$('.apply-success-popup').find('.name').text(name);
$form.find(':input').val(''); //清空表单
break;
case 2:
alert('不在活动时间范围内');
break;
case 3:
alert('此手机号已领取过');
break;
case 4:
showApplyRunOut();
break;
case 5:
alert('左眼度数缺货');
break;
case 6:
alert('右眼度数缺货');
break;
case 7:
alert('左右眼度数都缺货');
break;
default:
alert('系统繁忙，请稍候再试。');
break;
}
}).fail(function(jqXHR, textStatus, errorThrown) {
alert('网络错误，请稍候再试。');
});
});
});
})();
// 查找门店
(function() {
var $popup = $('.search-store-popup');
function closePopup() {
$popup.hide();
}
function hideSubPopup() {
$popup.find('.popup').hide();
}
function showNearby() {
$popup.find('.nearby-popup').show().siblings('.popup').hide();
// 加载地图
loadMapScript();
// $.getScript('http://api.map.baidu.com/api?v=2.0&ak=Fu43MGOr8Szn1HzCB5wgnMpc&callback=mapInit');
// 初始化Marker信息列表
var swiper = $('.marker-swiper-container')[0].swiper;
if (!swiper) {
swiper = new Swiper('.marker-swiper-container', {
nextButton: '.marker-swiper-container .swiper-button-next',
prevButton: '.marker-swiper-container .swiper-button-prev',
slidesPerView: 1,
spaceBetween: 30,
loop: true,
//onTransitionStart: function(swiper) {
onSlideChangeStart: function(swiper) {
// marker icon改为绿色
try {
var slide = swiper.slides[swiper.activeIndex];
// swiper.activeIndex取出的index并不是原始的index，而是算上首位复制品之后的index，通过data().swiperSlideIndex可以获取原始的index.
$slide = $(swiper.slides).not('.swiper-slide-duplicate').eq($(slide).data().swiperSlideIndex);
var marker = $slide.data().marker;
var icon = marker.getIcon();
icon.setImageOffset(new BMap.Size(-19,0));
marker.setIcon(icon);
// setViewport
(function() {
var map = $('#allmap').data().map;
try {
var viewport = map.getViewport();
viewport.center = marker.getPosition();
map.setViewport(viewport, {enableAnimation: true});
} catch (e) {
}
})();
} catch (e) {
console.log(e);
} // previousMarker icon改为原色
try {
var previousSlide = swiper.slides[swiper.previousIndex];
$previousSlide = $(swiper.slides).not('.swiper-slide-duplicate').eq($(previousSlide).data().swiperSlideIndex);
var previousMarker = $previousSlide.data().marker;
var icon = previousMarker.getIcon();
icon.setImageOffset(new BMap.Size(0,0));
previousMarker.setIcon(icon);
} catch (e) {
console.log(e);
}
}
});
}
}
function loadMapScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=Fu43MGOr8Szn1HzCB5wgnMpc&callback=mapInit";
document.body.appendChild(script);
}
window.mapInit = function() {
$('.map-loading').show();
var map = new BMap.Map("allmap");
$('#allmap').data().map = map;
$('#allmap').css({opacity: 0});
$('.allmap-container').siblings().css({opacity: 0});
map.addEventListener("tilesloaded",function(){
$('.map-loading').hide();
$('#allmap').css({opacity: 1});
$('.allmap-container').siblings().css({opacity: 1});
$('html,body').each(function(i, elem) {
var sh = this.scrollHeight;
var ch = this.clientHeight;
var scrollTop = sh - ch;
$(this).animate({scrollTop: scrollTop});
});
});
// 当前城市的门店数组。
var currentCityStores = [];
// 根据IP获得当前城市
var localCity = new BMap.LocalCity();
localCity.get(function (result){
var cityName = result.name;
// 根据当前城市过滤门店列表，
jQuery.each(window.storedata.biotrue, function(i, item) {
if (cityName.search(item[0]) >= 0) {
currentCityStores.push(item);
}
});
// 如果当前城市不存在任何门店，则取全部门店。
if (!currentCityStores.length) {
currentCityStores = window.storedata.biotrue.concat();
}
var myGeo = new BMap.Geocoder();
var geolocation = new BMap.Geolocation();
var viewportPoints = [];
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
viewportPoints.push(r.point);
var storePromise = $.Deferred(function(deferred) {
var count = 0;
jQuery.each(currentCityStores, function(i, item) {
myGeo.getPoint(item[2], function(point) {
if (point) {
item.point = point;
item.distance = map.getDistance(point, r.point);
} else {
item.distance = Infinity;
//confirm(point);
//console.warn(point);
}
count++;
if (count >= currentCityStores.length) {
deferred.resolve();
}
});
});
}).done(function() {
currentCityStores.sort(function(s1, s2) {
return(s1.distance>s2.distance)-(s1.distance<s2.distance);
});
// 取出距离最近的前5名：
(function() {
var swiper = $('.marker-swiper-container')[0].swiper;
swiper.removeAllSlides();
currentCityStores.slice(0, 5).forEach(function(data, i) {
viewportPoints.push(r.point);
// marker
//var marker = new BMap.Marker(data.point, {icon: new BMap.Icon('/images/marker-green.png', new BMap.Size(15,23), {anchor: new BMap.Size(7.5,23)})});
var marker = new BMap.Marker(data.point, {icon: new BMap.Icon('/images/marker_sprite.png', new BMap.Size(19,25), {anchor: new BMap.Size(9.5,25)})});
marker.addEventListener("click",function() {
swiper.slideTo(this.$slide.index());
// marker icon改为绿色
//var icon = this.getIcon();
//icon.setImageOffset(new BMap.Size(-19,0));
//this.setIcon(icon);
});
map.addOverlay(marker);
var label = new BMap.Label((i+1));
label.setStyle({padding: 0, width: '19px', height: '19px', lineHeight: '19px', border: 'none', color: '#fff', background: 'none', textAlign: 'center'});
marker.setLabel(label);
var $slide = $('<li class="swiper-slide">');
$('<p class="title"></p>').text((i+1)+'. '+data[1]+' '+(data.distance/1000).toFixed(1)+'km').appendTo($slide);
$('<p class="address"></p>').text(data[2]).appendTo($slide);
$('<p class="phoneNumber"></p>').text(data[3]).appendTo($slide);
swiper.appendSlide($slide);
$slide.data().marker = marker;
marker.$slide = $slide;
});
swiper.slideTo($(swiper.slides).not('.swiper-slide-duplicate').eq(0).index());
})();
var viewport = map.getViewport(viewportPoints);
// map.setViewport(viewport);
// TODO setViewport() 无法获取理想效果。
});
map.centerAndZoom(cityName, 12);
try {
map.centerAndZoom(r.point,12);
} catch (e) {
}
var marker = new BMap.Marker(r.point, {icon: new BMap.Icon('/images/marker_sprite.png', new BMap.Size(19,25), {anchor: new BMap.Size(9.5,25)})});
map.addOverlay(marker);
map.panTo(r.point);
myGeo.getLocation(r.point, function(rs) {
marker.addEventListener('click', function() {
var addComp = rs.addressComponents;
var add = (addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
alert('您的位置：'+add); // +'('+r.point.lng+','+r.point.lat+')');
});
});
// 根据名称检索并获取API提供的信息，已废弃
(function() {
return;
var options = {
pageCapacity: 2,
onSearchComplete: function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
//alert(results.getCurrentNumPois());
var swiper = $('.marker-swiper-container')[0].swiper;
swiper.removeAllSlides();
for (var i = 0; i < results.getCurrentNumPois(); i ++){
// 添加搜索地点的Marker
var marker = new BMap.Marker(results.getPoi(i).point, {icon: new BMap.Icon('/images/marker-green.png', new BMap.Size(15,23), {anchor: new BMap.Size(7.5,23)})});
map.addOverlay(marker);
map.panTo(r.point);
marker.poi = results.getPoi(i);
marker.addEventListener("click",function() {
console.log(this);
var info = [];
info.push(this.poi.title);
info.push(this.poi.address);
alert(info.join('\n'));
});
var $slide = $('<li class="swiper-slide">');
$('<p class="title"></p>').text(marker.poi.title).appendTo($slide);
$('<p class="address"></p>').text(marker.poi.address).appendTo($slide);
$('<p class="phoneNumber"></p>').text(marker.poi.phoneNumber).appendTo($slide);
swiper.appendSlide($slide);
}
}
}
};
var local = new BMap.LocalSearch(map, options);
local.search("博士伦");
})();
}
else {
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
});
};
function showRegional() {
$popup.find('.regional-popup').show().siblings('.popup').hide();
$popup.find('.regional-popup').find('.store-list').hide();
}
function showDealer() {
$popup.find('.dealer-popup').show().siblings('.popup').hide();
$popup.find('.dealer-popup').find('.store-list').hide();
}
window.showSearchStorePopup = function() {
$popup.show();
$popup.find('.panel').addClass('panel-default');
$popup.find('.popup').hide();
};
// nav点击
$popup.find('nav a').click(function(e) {
e.preventDefault();
$popup.find('.panel').removeClass('panel-default');
$(this).addClass('hl').siblings().removeClass('hl');
});
$popup.find('nav a.nearby').click(function(e) {
showNearby();
});
$popup.find('nav a.regional').click(function(e) {
showRegional();
});
$popup.find('nav a.dealer').click(function(e) {
showDealer();
});
// 关闭popup
$popup.find('.close-btn').click(function(e) {
closePopup();
});
var $form = $popup.find('.regional-popup form');
// 修改表单项时，更新错误消息。
$form.find(':input').on('blur change', function(e, doNotValidate) {
if (!doNotValidate) {
$(this).closest('label').find('.error-message').toggle(!$(this).valid());
}
});
// 切换select选择项时，更新模拟文本内容
$form.find('select').change(function(e) {
var $text = $(this).closest('.select').find('.select-text');
var text = $(this).find('option:selected').text() || '';
$text.text(text);
});
// 选择城市
$form.find('select.city').change(function(e) {
var $option = $(this).find('option:selected');
var regions = $option.data('regions') || '';
var regionArray = regions.match(/[^,]+/g) || [];
//var emptyOption = new Option();
//emptyOption.selected = true;
//$(emptyOption).text('请选择').val('');
$('select.region optgroup').empty();
jQuery.each(regionArray, function(i, item) {
var option = new Option;
$(option).text(item).val(item);
$('select.region optgroup').append(option);
});
$('select.region').val('').trigger('change',[true]);
}).val('');
// 表单提交
$form.find(':submit').click(function(e) {
$.Deferred(function(deferred) {
$form.find('.select').each(function(i, elem) {
var $message = $(this).find('.error-message');
var $select = $(this).find('select');
$message.toggle(!$select.val());
$select.val() || deferred.reject();
});
}).fail(function() {
e.preventDefault();
});
});
$form.on('submit', function(e) {
e.preventDefault();
$form.find('.select').each(function(i, elem) {
var $message = $(this).find('.error-message');
var $select = $(this).find('select');
$message.toggle(!$select.val());
});
var city = $('select.city').val();
var region = $('select.region').val();
// 仅城市
if (city) {
var cityData = $form.find('select.city').data(city);
cityData.$list.show().siblings('.store-list').hide();
/*
$popup.find('.store-list').show().find('li').each(function(i, elem) {
var data = $(this).data();
$(this).toggle(data.city == city);
});
// 解决微信中，首次显示时，滚动失效的问题
setTimeout(function() {
$popup.find('.regional-popup').find('.store-list').hide();
setTimeout(function() {
$popup.find('.regional-popup').find('.store-list').show();
},1);
},1);
*/
}
/* 城市+区域
if (city && region) {
$popup.find('.store-list').show().find('li').each(function(i, elem) {
var data = $(this).data();
$(this).toggle(data.city == city && data.region == region);
});
// 解决微信中，首次显示时，滚动失效的问题
setTimeout(function() {
$popup.find('.regional-popup').find('.store-list').hide();
setTimeout(function() {
$popup.find('.regional-popup').find('.store-list').show();
},1);
},1);
}
*/
});
// 合作商
$popup.on('click', '.dealer-buttons a', function(e) {
var dealer = $(this).data('dealer');
var $list = $(this).closest('.popup').find('.store-list');
$list.hide().filter(function() {
return $(this).data('dealer') == dealer;
}).show();
});
})();
}
})();
(function(){
var DEFAULT_WIDTH = 640, // 页面的默认宽度
ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息
deviceWidth = window.screen.width, // 设备的宽度
devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1
targetDensitydpi; // Android4.0以下手机不支持viewport的width，需要设置target-densitydpi
if (ua.indexOf("android") !== -1 && parseFloat(ua.slice(ua.indexOf("android")+8)) < 4) {
targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160;
$('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi +
', width=device-width, user-scalable=no');
}
})();
// for debug
jQuery(document).ready(function ($) {
return;
$('<input type="range" id="" min=-5 max=5 />').appendTo('body').css({
position: 'fixed',
bottom: 0,
width: '100%',
zIndex: 100
}).change(function (e) {
var $range = $(this);
$('.swiper-slide').each(function (i, elem) {
var tl = $(this).data().tl;
if (tl) {
var v = $range.val();
var s = +v || 1.
if (v < 0) {
s = -1 / v;
}
tl.timeScale(s);
console.debug('time scale:', s);
}
});
});
});
眼镜h5的更多相关文章
- 【H5最强攻略】百度人脸情绪实时识别
最近看的各位大佬都在体验百度大脑2019年全新上线的24项AI能力! (我也按耐不住了,赶紧走一波- 哈哈) 接下来要介绍的就是H5端的人脸检测攻略. 附带详细的介绍,代码,以及演示体验等 欢迎提出各 ...
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- WinForm ListBox 控件用法
下面演示如何利用列表控件 ListBox 实现多选与移动选项: using IMS.WinFormClient.UserControls; using System; using System.Col ...
- Spark性能优化指南-高级篇(spark shuffle)
Spark性能优化指南-高级篇(spark shuffle) 非常好的讲解
- 6.12---知道参数的重要性------插入数据-删除数据-修改数据注意Map
---------------
- Ubuntu下查看服务器cpu是否支持VT
http://blog.51cto.com/zhangmingqian/1249522 Ubuntu下查看服务器cpu是否支持VT 原创wazjajl 2013-07-15 16:25评论(0)119 ...
- thinkphp配置设置
thinkphp惯例文件是不可更改的,有配置设置通常在Application->Commen->Conf->config.php更改. 绑定数据库信息 //'配置项'=>'配置 ...
- 基于Crypto++的aes 字符串加解密实现
esaes.h: #ifndef ESAES_H #define ESAES_H #include <cryptopp/aes.h> #include <iostream> # ...
- java虚拟机(四)--内存溢出、内存泄漏、SOF
学习了java运行时数据区,知道每个内存区域保存什么数据,可以参考:https://www.cnblogs.com/huigelaile/p/diamondshine.html,然后了 解内存溢出和内 ...
- java几种连接数据库的方法
package bean; import java.sql.Connection;import java.sql.DriverManager; public class jdbcTest { //不同 ...
- PIE SDK 监督分类对话框类（SupervisedClassificaitonDialog）使用经验
最近研究遥感,用到分类算法,PIE SDK正好提供了一些方法可供调用,他们的官方博客上也有相应的示例代码(可参考:https://www.cnblogs.com/PIESat/p/10725270.h ...
- git 的 基础操作及使用
/* git svn版本控制器 */ /*git把文件对应的储存空间分为三个区: 1.工作区 2.缓存区 3.历史区 直接操作文件,不做add时,咱们是在工作区做的修改 右键 git bash her ...