jq -項目記錄，雜亂
判定 ie8
(function(){
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Internet Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]
};
BrowserDetect.init();
if(BrowserDetect.version <= 8 && BrowserDetect.browser.indexOf('Explorer') != -1 ){
var browsehappy = document.createElement('div')
browsehappy.className = 'browsehappy'
browsehappy.innerHTML = 'You are using an outdated browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.'
document.body.id = 'ie8'
document.body.appendChild(browsehappy)
}
})();全屏輪播圖，方法一，其實並非優級，需引入 jquery.transit.js,圖片規格為四級：pc:1920 xx ；m:640 xx; ipad: 1366 1024 ; 1024 1366
function Eononslide(o) {
if(!o.length){return}
this.o = $(o);
this.hd = this.o.find('.hd');
this.hdul = this.hd.find('ul');
this.hdli = this.hdul.find('li');
this.bd = this.o.find('.bd');
this.bdul = this.bd.find('ul');
this.bdli = this.bdul.find('li');
this.lastli = this.bdli.last().clone(true)
this.firstli = this.bdli.first().clone(true)
this.imgsrc = this.bdli.find('.bdimg').eq(0).attr('src');
this.pn = this.o.find('.pn');
this.pna = this.pn.find('a');
this.lilen = this.bdli.length;
this.num = 1;
this.b = !0;
this._t = null;
this._t_m = null;
this.downX = 0;
this.dTime = 0;
this.bdul.prepend(this.lastli).append(this.firstli);
this.or = 4;//>766
this.m = 1;
this.etc = ''
var at = ''
this.options = {
'autoPlay': true,
'pn': false,
'touch': true,
'hd': true,
'speed':300,
'easing':'swing',
callback:function(){}
}
}
Eononslide.prototype = {
constructor: Eononslide,
init: function (opt) {
$.extend(this.options, opt);
this._cssUse()
this._imgLoad();
this.options.autoPlay && this._hd();
this.options.autoPlay && this._autoPlay();
this.options.touch && this._touchmove();
this._resize();
this._landport();
},
_changeW: function () {
if (this.or == 0) {
return $(window).width()
}
else if (this.or == 1) {
return 768
}
else if (this.or == 2){
return 1024
}
else if(this.or == 3){
return 1366
}
else(this.or == 4)
{
// return 1920 //中心點縮進
return $(window).width()
}
},
_imgLoad: function () {
var _this = this;
var imgload = new Image();
imgload.src = _this.imgsrc;
_this._imgresizeW()
imgload.onload = function () {
typeof _this.options.callback == 'function' && _this.options.callback();
setTimeout(function(){
var _liallimg = _this.bdul.find('.bdimg')
_liallimg.css('opacity',1)
_this.options.pn && _this._pnRun();
},300)
}
},
_or: function () {
if ($(window).width() < 766) {
this.or = 0; // <766
}
else if ($(window).width() == 768) {
this.or = 1; // 766
}
else if($(window).width() == 1024){
this.or = 2;
}
else if($(window).width() == 1366){
this.or = 3;
}
else {
this.or = 4;//>766
}
return this.or;
},
_imgresizeW: function () {
var _this = this;
_this._or()
var _initL = $(window).width() - _this._changeW() < 0 ? $(window).width() - _this._changeW() : 0
var _liali = _this.bdul.find('li')
var j = {}
var j2 = {}
var j3 = {}
j[at] = _initL / 2 + 'px'
j["width"] = _this._changeW() + 'px'
j2[at] = 'auto'
j2["width"] = _this._changeW()
j2['height'] = _this._changeW() * 1.32
j3[at] = -_this._changeW()
j3["width"] = (_this.lilen + 2) * _this._changeW()
function _pl() {
if ($(window).width() == 1024 && (window.orientation == 90 || window.orientation == -90)) { //横
if (_this.or == 2) {
_this.o.css({'height': '768px', 'max-height': '768px'})
}
}
if ($(window).width() == 1024 && (window.orientation == 180 || window.orientation == 0)) { //竖
if (_this.or == 2) {
_this.o.css({'height': '1366px', 'max-height': '1366px'})
}
}
if ($(window).width() == 1366 && (window.orientation == 90 || window.orientation == -90)) { //横
if (_this.or == 2) {
_this.o.css({'height': '1366px', 'max-height': '1366px'})
}
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", _pl, false);
if (_this.or == 0) {
_liali.css(j2);
_this.o.css({'height': Math.ceil(_this._changeW() * 1.33)})
}
if (_this.or == 1 || _this.or == 2 || _this.or == 3 || _this.or == 4) {
_liali.css(j)
}
if (_this.or == 1) {
_this.o.css({'height': '925px', 'max-height': '925px'})
}
if ($(window).width() == 768) {
if (_this.or == 2) {
_this.o.css({'height': '1024px', 'max-height': '1024px'})
}
}
if ($(window).width() == 1024 && (window.orientation == 90 || window.orientation == -90)) { //横
if (_this.or == 2) {
_this.o.css({'height': '768px', 'max-height': '768px'})
}
}
if ($(window).width() == 1024 && (window.orientation == 180 || window.orientation == 0)) { //竖
if (_this.or == 2) {
_this.o.css({'height': '1366px', 'max-height': '1366px'})
}
}
_pl()
if(_this.or == 3 ){
_this.o.css({'height': '1024px','max-height':'1024px'})
}
if (_this.or == 4) {
_this.o.css({'height': Math.ceil(_this._changeW() / 2.33)})
}
_this.bdul.css(j3)
},
_hd: function () {
var html = ''
var _this = this;
for (var i = 0; i < this.lilen; i++) {
html += '<li></li>'
}
this.hdul.html(html)
this.hdli = this.hdul.find('li')
if (this.lilen > 0) {
this.hdli.first().addClass('on')
}
this.hdli.on('click', function (e) {
e.stopPropagation()
$(this).addClass('on').siblings().removeClass('on')
_this._hdRun($(this).index());
})
return this;
},
_hdRun: function (_index) {
var _this = this;
var j = {}
j[at] = -(_index + 1) * this._changeW()
this.bdul.stop(true, true)[_this.etc](j, function () {
_this.num = _index + 1;
})
},
_hdon: function () {
this.hdli = this.hdul.find('li')
var _linum = this.num - 1;
if (_linum == this.lilen) {
_linum = 0;
}
this.hdli.eq(_linum).addClass('on').siblings().removeClass('on')
},
_pnRun: function () {
var _this = this;
this.pna.eq(1).on('click', function (e) {
e.stopPropagation()
_this._Rrun()
})
this.pna.eq(0).on('click', function (e) {
e.stopPropagation()
_this._Lrun()
})
this.o.on({
'mouseenter': function () {
_this.pn.show('fast')
},
'mouseleave': function () {
_this.pn.hide('fast')
}
})
_this.pn.css({'opacity':1})
return this;
},
_Rrun: function () {
var _this = this;
if (this.b) {
this.num++;
this.b = !1
var j = {}
var j2 = {}
j[at] = -_this._changeW() * this.num;
j2[at] = - _this._changeW();
this.bdul[_this.etc](j, _this.options.speed,_this.options.easing, function () {
if (_this.num == _this.lilen + 1) {
_this.bdul.css(j2)
_this.num = 1
}
_this.b = !0;
_this.m = 1;
})
_this._hdon()
}
},
_Lrun: function () {
var _this = this;
if (this.b) {
this.num--;
this.b = !1;
var j = {}
var j2 = {}
j[at] = - this._changeW() * this.num;
j2[at] = -_this._changeW() * _this.lilen
this.bdul.stop(true)[_this.etc](j, _this.options.speed,_this.options.easing, function () {
if (_this.num == 0) {
_this.bdul.css(j2)
_this.num = _this.lilen;
}
_this.b = !0;
_this.m = 1;
})
_this._hdon()
}
},
_autoPlay: function () {
var _this = this;
this._t = setInterval(function () {
_this._Rrun()
}, 8000)
clautoPlay(_this.bdul);
clautoPlay(_this.hd);
clautoPlay(_this.pn);
function clautoPlay(obj) {
obj.on({
'mouseenter': function () {
clearInterval(_this._t)
_this._t = null;
},
'mouseleave': function () {
clearInterval(_this._t)
_this._t = setInterval(function () {
_this._Rrun()
}, 8000)
}
})
}
},
_touchmove: function () {
var _this = this;
var xx,yy,XX,YY,swipeX,swipeY;
_this.bdul.on('touchstart', function (e) {
xx = e.originalEvent.changedTouches[0].pageX;
yy = e.originalEvent.changedTouches[0].pageY;
swipeX = true;
swipeY = true;
clearInterval(_this._t);
var touch = e.originalEvent.changedTouches[0];
_this.downX = touch.pageX;
if (_this.m) {
var initLeft = parseInt(_this.bdul.css(at))
_this.m = 0;
}
_this.dTime = Date.now();
_this.bdul.on('touchmove', function (e) {
XX = e.originalEvent.changedTouches[0].pageX;
YY = e.originalEvent.changedTouches[0].pageY;
var touch = e.originalEvent.changedTouches[0];
var disX = touch.pageX - _this.downX;
var j = {}
var j2 = {}
j[at] = initLeft + disX
j2[at] = initLeft
if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) {
e.stopPropagation();
e.preventDefault();
swipeY = false ;
if (Math.abs(disX) > 20) {
_this.bdul.css(j)
}
else {
_this.bdul.css(j2)
}
}
else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) {
swipeX = false;
}
});
_this.bdul.on('touchend', function (e) {
XX = e.originalEvent.changedTouches[0].pageX;
YY = e.originalEvent.changedTouches[0].pageY;
_this._cssUse()
var touch = e.originalEvent.changedTouches[0];
var j = {}
j[at] = initLeft
if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) {
e.stopPropagation();
e.preventDefault();
swipeY = false ;
if (touch.pageX < _this.downX) {
if (Date.now() - _this.dTime < 200 && Date.now() - _this.dTime > 30) {
_this._Rrun();
}
else {
_this.bdul[_this.etc](j, _this.options.speed,_this.options.easing, function () {
_this.m = 1;
})
}
}
else {
if (Date.now() - _this.dTime < 200 && Date.now() - _this.dTime > 30) {
_this._Lrun();
}
else {
_this.bdul[_this.etc](j, _this.options.speed,_this.options.easing, function () {
_this.m = 1;
})
}
}
_this.bdul.off('touchmove');
_this.bdul.off('touchend');
}
else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) {
swipeX = false;
}
})
})
},
_resize: function () {
var _this = this;
$(window).resize(function () {
_this._imgresizeW()
})
},
_landport:function(){
var _this = this;
var _mq = window.matchMedia("(orientation: portrait)");
_mq.addListener(function (m) {
if (m.matches) {
_this._imgresizeW()
}
else {
_this._imgresizeW()
}
});
},
_cssUse:function(){
if(!!$.support.transition){
this.etc = 'transition'
at = 'x'
this.options.speed = '300'
this.options.easing = 'linear'
}
else{
this.etc = 'animate'
at = 'left'
}
}
}<div class="i-banner">
<div class="i-banner-slide">
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul><li><img class='bdimg' src='1.png' /><a href='#' class='i-banner-bda-1'></a></li></ul>
<ul><li><img class='bdimg' src='2.png' /></li></ul>
<ul><li><img class='bdimg' src='3.png' /></li></ul>
</div>
<div class="pn">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</div>.i-banner-slide{position:relative;min-height:300px}
.i-banner-slide .bd ul{position:absolute;left:0;margin:0;padding:0;}
.i-banner-slide .bd li{list-style:none;float:left;margin:0;padding:0;background:url(/img/loading.gif) center center no-repeat}
.i-banner-slide .bd .bdimg{position:relative;left:0;width:100%;vertical-align:top;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-webki-transition:opacity .3s;-moz-transition:opacity .3s;-ms-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s;min-width:320px}
.i-banner-slide .hd{position:absolute;width:100%;text-align:center;bottom:20px;z-index:1}
.i-banner-slide .hd li{cursor:pointer;display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 9px;background-color:#646464;border:1px solid #646464}
.i-banner-slide .hd .on{border:1px solid #fff;background-color:transparent}
.i-banner-slide .pn{font-size:28px;opacity:0;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;transition:.5s;}
.i-banner-slide .pn a{display:inline-block;text-decoration:none;position:absolute;top:50%;margin:-57px auto auto;outline:0;width:55px;height:114px;border:none;overflow:hidden;background:no-repeat transparent;cursor:pointer;color:#FFF;line-height:114px}
.cart_empty a:hover,.footer a:hover{text-decoration:underline}
.h-nav-cart-c{display:none;position:relative}
.i-banner-slide .pn a:nth-of-type(1):after,.i-banner-slide .pn a:nth-of-type(2):after{content:'';border-bottom:1px solid #797979;width:50px;height:50px;top:50%;margin-top:-25px;position:absolute}
.i-banner-slide .pn a:nth-of-type(1){left:0}
.i-banner-slide .pn a:nth-of-type(1):after{border-left:1px solid #797979;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);left:18px}
.i-banner-slide .pn a:nth-of-type(2){right:0}
.i-banner-slide .pn a:nth-of-type(2):after{border-right:1px solid #797979;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);right:18px}
.i-banner-slide .pn a:hover{outline:0}
.i-banner-slide .bd li{position:relative}
.i-banner-slide {width:100%;position:relative;}
.i-banner-slide .bd .bdimg{width:100%}
.i-banner-slide .pn{display:none!important}
.i-banner-slide .bd li{position:relative;height:auto}banner可點擊區域計算：
function ibannerImgWS(o, json) {
var ibliWidth = $('.i-banner-slide').find('.bd').find('li').width()
var obj = $(o);
var iscale = 1;
var ietc = ''
if ($(window).width() < 766) {
ietc = 'm'
iscale = ibliWidth / 640
}
else {
if (navigator.userAgent.indexOf("iPad") != -1 && ($(window).width() == 768 || 1024 || 1366)) {
if ((window.orientation == 180 || window.orientation == 0)) {
if ($(window).width() == 768) {
iscale = 768 / 1024;
}
if ($(window).width() == 1024) {
iscale = 1;
}
ietc = 'ipad-p'
}
if ((window.orientation == 90 || window.orientation == -90)) {
if ($(window).width() == 1024) {
iscale = 1024 / 1366;
}
if ($(window).width() == 1366) {
iscale = 1;
}
ietc = 'ipad-l'
}
}
else {
ietc = 'pc'
iscale = ibliWidth / 1920;
}
}
if (!json[ietc]) {
return false;
}
obj.css({
'position': 'absolute',
'left': Math.ceil(json[ietc][0] * iscale),
'top': Math.ceil(json[ietc][1] * iscale),
'width': Math.ceil(json[ietc][2] * iscale),
'height':Math.ceil(json[ietc][3] * iscale)
})
}
})();結合調用
var elslide = new Eononslide('.i-banner-slide');
elslide.init({
'pn': true,
callback: function () {
ibannerImgWS('.i-banner-bda-1', {
'pc': [left,top,width,height],
'm': [left,top,width,height],
'ipad-p': [left,top,width,height],
'ipad-l': [left,top,width,height],
})
}
})touch方向修正
function stopPro(obj){
if(!obj){return;}
var xx,yy,XX,YY,swipeX,swipeY ;
_on(obj,'touchstart',function(event){
var event = event || window.event;
xx = event.targetTouches[0].screenX ;
yy = event.targetTouches[0].screenY ;
swipeX = true;
swipeY = true ;
})
_on(obj,'touchmove',function(event){
var event = event || window.event;
XX = event.targetTouches[0].screenX ;
YY = event.targetTouches[0].screenY ;
if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) //左右
{
event.stopPropagation();
event.preventDefault();
swipeY = false ;
}
else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) { //上下
swipeX = false ;
}
})
function _on(obj, ev, fn) {
if (obj.addEventListener) {
obj.addEventListener(ev, fn, false);
} else {
obj.attachEvent('on' + ev, function() {
fn.call(obj);
});
}
}
}圖片預加載
jQuery.reloadimg = function () {
var objImg = [];
for (var i = 0; i < arguments.length; i++) {
objImg[i] = new Image();
objImg[i].src = arguments[i];
}
};
// $.reloadimg('1.jpg','2.jpg')