init
This commit is contained in:
117
public/frontend/m_web/js/scroll/flexible.js
Executable file
117
public/frontend/m_web/js/scroll/flexible.js
Executable file
@@ -0,0 +1,117 @@
|
||||
;(function(win, lib) {
|
||||
var doc = win.document;
|
||||
var docEl = doc.documentElement;
|
||||
var metaEl = doc.querySelector('meta[name="viewport"]');
|
||||
var flexibleEl = doc.querySelector('meta[name="flexible"]');
|
||||
var dpr = 0;
|
||||
var scale = 0;
|
||||
var tid;
|
||||
var flexible = lib.flexible || (lib.flexible = {});
|
||||
|
||||
if (metaEl) {
|
||||
console.warn('将根据已有的meta标签来设置缩放比例');
|
||||
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
|
||||
if (match) {
|
||||
scale = parseFloat(match[1]);
|
||||
dpr = parseInt(1 / scale);
|
||||
}
|
||||
} else if (flexibleEl) {
|
||||
var content = flexibleEl.getAttribute('content');
|
||||
if (content) {
|
||||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
|
||||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
|
||||
if (initialDpr) {
|
||||
dpr = parseFloat(initialDpr[1]);
|
||||
scale = parseFloat((1 / dpr).toFixed(2));
|
||||
}
|
||||
if (maximumDpr) {
|
||||
dpr = parseFloat(maximumDpr[1]);
|
||||
scale = parseFloat((1 / dpr).toFixed(2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!dpr && !scale) {
|
||||
var isAndroid = win.navigator.appVersion.match(/android/gi);
|
||||
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
|
||||
var devicePixelRatio = win.devicePixelRatio;
|
||||
if (isIPhone) {
|
||||
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
|
||||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
|
||||
dpr = 3;
|
||||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
|
||||
dpr = 2;
|
||||
} else {
|
||||
dpr = 1;
|
||||
}
|
||||
} else {
|
||||
// 其他设备下,仍旧使用1倍的方案
|
||||
dpr = 1;
|
||||
}
|
||||
scale = 1 / dpr;
|
||||
}
|
||||
|
||||
docEl.setAttribute('data-dpr', dpr);
|
||||
if (!metaEl) {
|
||||
metaEl = doc.createElement('meta');
|
||||
metaEl.setAttribute('name', 'viewport');
|
||||
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(metaEl);
|
||||
} else {
|
||||
var wrap = doc.createElement('div');
|
||||
wrap.appendChild(metaEl);
|
||||
doc.write(wrap.innerHTML);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshRem(){
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
if (width / dpr > 768) {
|
||||
width = 768 * dpr;
|
||||
}
|
||||
var rem = width / 10;
|
||||
docEl.style.fontSize = rem + 'px';
|
||||
flexible.rem = win.rem = rem;
|
||||
}
|
||||
|
||||
win.addEventListener('resize', function() {
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
win.addEventListener('pageshow', function(e) {
|
||||
if (e.persisted) {
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === 'complete') {
|
||||
doc.body.style.fontSize = 12 * dpr + 'px';
|
||||
} else {
|
||||
doc.addEventListener('DOMContentLoaded', function(e) {
|
||||
doc.body.style.fontSize = 12 * dpr + 'px';
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
refreshRem();
|
||||
|
||||
flexible.dpr = win.dpr = dpr;
|
||||
flexible.refreshRem = refreshRem;
|
||||
flexible.rem2px = function(d) {
|
||||
var val = parseFloat(d) * this.rem;
|
||||
if (typeof d === 'string' && d.match(/rem$/)) {
|
||||
val += 'px';
|
||||
}
|
||||
return val;
|
||||
}
|
||||
flexible.px2rem = function(d) {
|
||||
var val = parseFloat(d) / this.rem;
|
||||
if (typeof d === 'string' && d.match(/px$/)) {
|
||||
val += 'rem';
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
})(window, window['lib'] || (window['lib'] = {}));
|
||||
2121
public/frontend/m_web/js/scroll/iscroll.js
Executable file
2121
public/frontend/m_web/js/scroll/iscroll.js
Executable file
File diff suppressed because it is too large
Load Diff
91
public/frontend/m_web/js/scroll/navbarscroll.js
Executable file
91
public/frontend/m_web/js/scroll/navbarscroll.js
Executable file
@@ -0,0 +1,91 @@
|
||||
/*
|
||||
* 移动端模拟导航可点击自动滑动 0.1.4
|
||||
* Date: 2017-01-11
|
||||
* by: xiewei
|
||||
* 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围【依赖于iscroll.js】
|
||||
*/
|
||||
(function ($) {
|
||||
$.fn.navbarscroll = function (options) {
|
||||
//各种属性、参数
|
||||
var _defaults = {
|
||||
className:'cur', //当前选中点击元素的class类名
|
||||
clickScrollTime:300, //点击后滑动时间
|
||||
duibiScreenWidth:0.4, //单位以rem为准,默认为0.4rem
|
||||
scrollerWidth:200, //单位以px为准,默认为3,[仅用于特殊情况:外层宽度因为小数点造成的不精准情况]
|
||||
defaultSelect:0, //初始选中第n个,默认第0个
|
||||
fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致,方可用此项
|
||||
endClickScroll:function(thisObj){}//回调函数
|
||||
}
|
||||
var _opt = $.extend(_defaults, options);
|
||||
this.each(function () {
|
||||
//插件实现代码
|
||||
var _wrapper = $(this);
|
||||
var _win = $(window);
|
||||
var _win_width = _win.width(),_wrapper_width = _wrapper.width(),_wrapper_off_left = _wrapper.offset().left;
|
||||
var _wrapper_off_right=_win_width-_wrapper_off_left-_wrapper_width;
|
||||
var _obj_scroller = _wrapper.children('.scroller');
|
||||
var _obj_ul = _obj_scroller.children('ul');
|
||||
var _obj_li = _obj_ul.children('li');
|
||||
var _scroller_w = 0;
|
||||
_obj_li.css({"margin-left":"0","margin-right":"0"});
|
||||
for (var i = 0; i < _obj_li.length; i++) {
|
||||
_scroller_w += _obj_li[i].offsetWidth+_obj_li.length*2;
|
||||
}
|
||||
_obj_scroller.width(_scroller_w+_opt.scrollerWidth);
|
||||
//alert( _scroller_w);
|
||||
|
||||
var myScroll = new IScroll('#'+_wrapper.attr('id'), {
|
||||
eventPassthrough: true,
|
||||
scrollX: true,
|
||||
scrollY: false,
|
||||
preventDefault: false
|
||||
});
|
||||
_init(_obj_li.eq(_opt.defaultSelect));
|
||||
_obj_li.click(function(){
|
||||
_init($(this));
|
||||
});
|
||||
//解决PC端谷歌浏览器模拟的手机屏幕出现莫名的卡顿现象,滑动时禁止默认事件(2017-01-11)
|
||||
_wrapper[0].addEventListener('touchmove',function (e){e.preventDefault();},false);
|
||||
function _init(thiObj){
|
||||
var $this_obj=thiObj;
|
||||
var duibi=_opt.duibiScreenWidth*_win_width/10,this_index=$this_obj.index(),this_off_left=$this_obj.offset().left,this_pos_left=$this_obj.position().left,this_width=$this_obj.width(),this_prev_width=$this_obj.prev('li').width(),this_next_width=$this_obj.next('li').width();
|
||||
var this_off_right=_win_width-this_off_left-this_width;
|
||||
if(_scroller_w+2>_wrapper_width){
|
||||
if(_opt.fingerClick==1){
|
||||
if(this_index==1){
|
||||
myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
|
||||
}else if(this_index==0){
|
||||
myScroll.scrollTo(-this_pos_left,0, _opt.clickScrollTime);
|
||||
}else if(this_index==_obj_li.length-2){
|
||||
myScroll.scrollBy(this_off_right-_wrapper_off_right-this_width,0, _opt.clickScrollTime);
|
||||
}else if(this_index==_obj_li.length-1){
|
||||
myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
|
||||
}else{
|
||||
if(this_off_left-_wrapper_off_left-(this_width*_opt.fingerClick)<duibi){
|
||||
myScroll.scrollTo(-this_pos_left+this_prev_width+(this_width*_opt.fingerClick),0, _opt.clickScrollTime);
|
||||
}else if(this_off_right-_wrapper_off_right-(this_width*_opt.fingerClick)<duibi){
|
||||
myScroll.scrollBy(this_off_right-this_next_width-_wrapper_off_right-(this_width*_opt.fingerClick),0, _opt.clickScrollTime);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(this_index==1){
|
||||
myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
|
||||
}else if(this_index==_obj_li.length-1){
|
||||
if(this_off_right-_wrapper_off_right>1||this_off_right-_wrapper_off_right<-1){
|
||||
myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
|
||||
}
|
||||
}else{
|
||||
if(this_off_left-_wrapper_off_left<duibi){
|
||||
myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
|
||||
}else if(this_off_right-_wrapper_off_right<duibi){
|
||||
myScroll.scrollBy(this_off_right-this_next_width-_wrapper_off_right,0, _opt.clickScrollTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$this_obj.addClass(_opt.className).siblings('li').removeClass(_opt.className);
|
||||
_opt.endClickScroll.call(this,$this_obj);
|
||||
}
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user