(function(window){ /** * 默认配置 * contentId {string} - (必选)指定弹出层元素 * closeId {string} - 指定关闭弹出层的元素 * shadowId {string} - 指定遮盖层元素 * contentShowCenter {boolean} - 指定弹出层是否居中显示 * shadowUseCss {boolean} - 指定遮盖层是否使用外部样式控制 * beforeShow {func} - 弹出层弹出前执行的函数 * afterShow {func} - 弹出层弹出后执行的函数 * beforeHide {func} - 弹出层隐藏前执行的函数 * afterHide {func} - 弹出层隐藏后执行的函数 * @private */ var _defaultConfigs = { contentId:'', closeId:'', shadowId:'', contentShowCenter:true, shadowUseCss:false, isShowShadow:true, beforeShow:function(){}, afterShow:function(){}, beforeHide:function(){}, afterHide:function(){} }; /** * 创建实例 * @class * @constructor * @param {Object} cfg - 初始化Tab实例所需的配置参数 */ function Popup(cfg){ var that = this; if(cfg){ for(var p in cfg){ _defaultConfigs[p] = cfg[p]; } } for(var p in _defaultConfigs){ that[p] = _defaultConfigs[p]; } that._init(); }; /** * 绑定事件兼容性处理 * @staticclass */ var EventCompatibility = function() { var _events = { bind:function(sender, eventName, fn, useCapture) { if (eventName === "mousewheel" && document.mozHidden !== undefined) eventName = "DOMMouseScroll"; if(sender.addEventListener) sender.addEventListener(eventName, fn, useCapture); else sender.attachEvent('on' + eventName, fn); }, unbind:function(sender,eventName,fn,useCapture) { if (eventName === "mousewheel" && document.mozHidden !== undefined) eventName = "DOMMouseScroll"; if(sender.removeEventListener) sender.removeEventListener(eventName, fn, useCapture); else sender.detachEvent('on' + eventName, fn); } } return _events; }(); /** * 绑定隐藏事件 * @function * @param {HTMLElement} sender - 指定要绑定隐藏事件的元素 * @param {json} eventargs - 指定传入的参数,eventargs.target 表示当前的UXPopup对象 */ var BindHideOperater = function(sender, eventargs) { EventCompatibility.bind(sender, 'click', function() { eventargs.target.hide(); }, false); }; /** * 判断是否为搜狗手机浏览器,做兼容处理 * @function * @return [boolean] */ var IsSogouMobile = function() { return navigator.userAgent.indexOf('SogouMobileBrowser') >= 0; } /** * 阻止页面滑动事件 * @staticclass */ var TouchOperater = function() { function preventScroll(e) { e = e || window.event; if(e.preventDefault) { e.preventDefault(); } else e.returnValue = false; } var _Touch = { unallowScroll:function() { //EventCompatibility.bind(document,'scroll', preventScroll, false); }, allowScroll:function() { //EventCompatibility.unbind(document,'mousewheel', preventScroll, false); } }; return _Touch; }(); /** * 设置遮罩层透明度 * @private */ function setOpacity(obj, opacity) { if(opacity >= 1) opacity = opacity / 100; try { obj.style.opacity = opacity; } catch(e){ } try { obj.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'; }catch(e){} } /** * 计算页面高度 * @private */ function calcTotalHeight() { //var wh = window.screen.height,bh = document.body.clientHeight; //return ((bh - wh > 0 ? bh : wh) + 'px'); return (document.body.scrollHeight + 'px'); } /** * 计算居中高度 * @private */ function calcCurrentHeight(obj) { var oh = obj.offsetHeight; var sh = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var ch = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; return ((sh + (ch - oh) / 2) + 'px'); } /** * 计算居中宽度 * @private */ function calcCurrentWidth(obj) { var ow = obj.offsetWidth; var sh = document.body.scrollLeft; var ch = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; return ((sh + (ch - ow) / 2) + 'px'); } /** * 内部多元素选择器 * @private */ function _$arr(where) { var arr = document.querySelectorAll(where); var _op = { addEventListener:function(eventName,fn,useCapture) { for(var i = 0;i < arr.length;i++) { EventCompatibility.bind(arr[i], eventName, fn, useCapture); } }, removeEventListener:function(eventName,fn,useCapture) { for(var i = 0;i < arr.length;i++) { EventCompatibility.unbind(arr[i], eventName, fn, useCapture); } } }; return _op; } /** * 内部选择器 * @private */ function _$(where) { if(!where || where.length <= 0) return; var arr = document.querySelectorAll(where); if(!arr || arr.length <= 0) return null; // if(arr.length === 1) // return arr[0]; return arr[0]; } Popup.prototype = { constructor: Popup, isInit:false, /** * 对组件进行初始化 * @private */ _init: function() { var that = this; try { that.content = _$(that.contentId); if(that.closeId) BindHideOperater(_$(that.closeId),{target:that}); that._getShadow(); that.isInit = true; } catch(e){ console.log(e); } }, /** * 获取遮罩层 * @private */ _getShadow:function() { var that = this; if(!that.isShowShadow) return; var shadowId = that.shadowId || '#pop_shadow_div'; var shadow = _$(shadowId); if(!shadow) { shadow = document.createElement('div'); shadow.id = shadowId.substring(1); _$('body').appendChild(shadow); } BindHideOperater(shadow,{target:that}); that.shadow = shadow; }, /** * 显示遮罩层 * @private */ _showShadow:function() { var that = this; if(!that.isShowShadow) return; that.shadow.style.display = 'block'; that.shadow.style.visibility = 'visible'; if(that.shadowUseCss) return; that.shadow.style.position = 'absolute'; that.shadow.style.left = 0; that.shadow.style.top = 0; that.shadow.style.width = '100%'; that.shadow.style.zIndex = '10'; that.shadow.style.backgroundColor = '#000'; that.shadow.style.height = calcTotalHeight(); setOpacity(that.shadow, 50); }, /** * 隐藏遮罩层 * @private */ _hideShadow:function() { var that = this; if(!that.isShowShadow) return; that.shadow.style.display = 'none'; }, /** * 显示内容层 * @private */ _showContent:function() { var that = this; that.content.style.display = 'block'; that.content.style.visibility = 'visible'; if(that.contentShowCenter) { that.content.style.position = 'absolute'; that.content.style.top = calcCurrentHeight(that.content); that.content.style.left = calcCurrentWidth(that.content); } }, /** * 显示弹出层 * @public */ show: function() { var that = this; if(!that.isInit) return; if(that.beforeShow) that.beforeShow(); TouchOperater.unallowScroll(); that._showShadow(); that._showContent(); if(that.afterShow) that.afterShow(); }, /** * 隐藏 * @public */ hide:function() { var that = this; if(!that.isInit) return; if(that.beforeHide) that.beforeHide(); TouchOperater.allowScroll(); that._hideShadow(); that.content.style.display = 'none'; if(that.afterHide) that.afterHide(); } }; window.UXPopup = Popup; })(window); // AMD exports if(typeof(module) !== 'undefined'){ module.exports = window.UXPopup; }else if (typeof define === 'function' && define.amd){ define([], function () { 'use strict'; return window.UXPopup; }); } UX.q.push(function() { //加载主图 window.UXLazy.load($('.cd_m_info_mainimg').get(0)); }); UX.q.push(function() { $(".cd_m_xstj").slide({ titCell:".cd_m_i_slide ul", mainCell:".cd_m_i_carslide ul", effect:"leftLoop", autoPlay:true, autoPage:true, trigger:"click" }); window.UX.scroll = { _fn:function(e) { if(e.preventDefault) e.preventDefault(); else e.returnValue = true; }, _fnEx:function(e) { var delta = (e.originalEvent.wheelDelta) ? e.originalEvent.wheelDelta / 120 : -(e.originalEvent.detail || 0) / 3; $(e.currentTarget).scrollTop($(e.currentTarget).scrollTop() + (delta * 15 * -1)); if(e.preventDefault) e.preventDefault(); else e.returnValue = true; }, eventName: document.mozHidden !== undefined ? "DOMMouseScroll" : "mousewheel", run:function() { $(document).unbind(this.eventName,this._fn); }, pause:function() { $(document).bind(this.eventName,this._fn); }, addEx:function(id) { $(id).bind(this.eventName,this._fnEx); }, removeEx:function(id) { $(id).unbind(this.eventName); } }; }); UX.q.push(function() { //外观、内饰、发动机切换效果 $('.cd_m_pop_pictype a').click(function(e) { changeType.call(this); }); /**点击图片切换大图模式 开始**/ $('.cd_m_pop_pics_left li').click(function() { var target = $('.cd_m_pop_pictype .cd_m_select'); //判断如果是列表模式,需要先切换为大图模式 if($('.cd_m_pop_pics').hasClass('cd_m_list')) { switchShowModel(); } bindSlide(target.attr('attrid'),$(this).index()); }); /**点击图片切换大图模式 结束**/ //车辆实拍顶部 类型选择修改 $('.cd_m_i_sptit a').click(function(){ if(this.className === 'cd_m_clsp_sptit_more') { position = 'realshot'; initShow(3); return; } //$('.cd_m_i_sptit .cd_m_select').removeClass('cd_m_select'); //$(this).addClass('cd_m_select'); $(document).scrollTop($('#' + $(this).attr('attrid')).offset().top - 180); }); function initShow(num) { var up = new UXPopup({ contentId:'.cd_m_pop_pics', closeId:'.cd_m_pop_pics .cd_m_pop_close', beforeShow:function() { var resizeTimer; $(window).bind('resize',function(){ if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(function(){ up._showContent(); }, 500); }); window.UX.scroll.pause(); window.UX.scroll.addEx('.cd_m_pop_pics_left>div'); //如果图片数量为0,则禁止点击 $('.cd_m_pop_pictype .cd_m_pop_total').each(function() { var value = $.trim($(this).text()); if(value === '0') { $(this).parent().removeClass('cd_m_select').addClass('cd_m_disable'); } }); if($('.cd_m_pop_pics').hasClass('cd_m_list')) switchShowModel(); //去掉图片的选中状态 $('.cd_m_pop_pics_left .cd_m_select').removeClass('cd_m_select'); //去掉当前选中类型的选中状态,保证能执行方法 changeType.call($('.cd_m_pop_pictype a').get(num)); $('.cd_m_pop_pics img[data-manual]').each(function(i,d) { window.UXLazy.load(d); }); }, beforeHide:function() { $(window).unbind('resize'); window.UX.scroll.run(); window.UX.scroll.removeEx('.cd_m_pop_pics_left>div'); } }); up.show(); } function changeType() { if($(this).hasClass('cd_m_select') || $(this).hasClass('cd_m_disable')) return; $('.cd_m_pop_pictype .cd_m_select').removeClass('cd_m_select'); $(this).addClass('cd_m_select'); var parent = $('.cd_m_pop_pics'),name = $(this).attr('attrid'); $('.cd_m_pop_pics_left>div').hide(); $('.' + name).show(); //判断如果是大图模式,重新指定slide。 if(parent.hasClass('cd_m_bigimg')) { bindSlide(name); } else { $('.cd_m_pop_pics_left>div:visible').scrollTop(0); } } //查看图片列表弹出框,顶部大图、车辆实拍>查看更多按钮 $('.cd_m_info_it1').click(function() { position = 'top'; initShow(0); }); //点击查看更多进入查看大图更多细节处 $(".cd_m_clsp .cd_m_i_pzmore").click(function(){ position = 'realshot'; initShow(3) }); //查看图片列表弹出框,车辆实拍>图片点击 $('.cd_m_i_imglist img').click(function() { position = 'realshot'; var that = $(this); initShow(0); setTimeout(function(){ var img = $('.cd_m_pop_pics_left img[src="' + that.attr('src') + '"]'); if(!img || !img.parent().parent().parent()) return; var parent = img.parent().parent().parent(); changeType.call($('.cd_m_pop_pictype a[attrid="' + parent.attr('class') + '"]').get(0)); img.parent().trigger('click')},50); }); /**图片列表类型自动切换 开始**/ var bindSlide = function(name, index) { $(".cd_m_pop_pics_left>a").unbind('click'); $('.cd_m_pop_pictype .pageState').text(''); $(".cd_m_pop_pics_left").slide({ mainCell:"." + name + " ul",defaultIndex:index || 0, effect:"fade",trigger:'click',pnLoop:false,startFun:slideStartFun }); }, switchImgType = function(that, op, index) { $('.cd_m_pop_pictype .cd_m_select').removeClass('cd_m_select'); that.addClass('cd_m_select'); if(that.hasClass('cd_m_disable')) { if(op === 'next') nextClick(); else prevClick(); return; } var parent = $('.cd_m_pop_pics'),name = that.attr('attrid'); $('.cd_m_pop_pics_left>div').hide(); $('.' + name).show(); //判断如果是大图模式,重新指定slide。 if(parent.hasClass('cd_m_bigimg')) { //获取最后一项的索引值 index = parseInt(index) - 1; bindSlide(name, index); } }, nextClick = function() { var target = $('.cd_m_pop_pictype .cd_m_select'); if(target.index() < 3) { switchImgType(target.next(),'next'); } else { switchImgType(target.prev().prev().prev(),'next'); } }, prevClick = function() { var target = $('.cd_m_pop_pictype .cd_m_select'),that,num; if(target.index() === 0) { that = target.next().next().next(); } else { that = target.prev(); } //点击上一张按钮时,获取上一个类型的图片列表长度 num = that.children('.cd_m_pop_total').text(); //切换类型 switchImgType(that, 'prev', num); }, slideStartFun = function(i,c,slider, titCell, mainCell, targetCell, prevCell, nextCell) { $(nextCell).unbind('click',nextClick); $(prevCell).unbind('click',prevClick); if((i + 1) === c) { $(nextCell).one('click',nextClick); } if(i === 0) { $(prevCell).one('click',prevClick); } }; /**图片列表类型自动切换 结束**/ //图片弹出框 列表模式与大图模式切换 var switchShowModel = function() { if($('.cd_m_pop_pics').hasClass('cd_m_bigimg')) { $('.cd_m_pop_pics').removeClass('cd_m_bigimg').addClass('cd_m_list'); $('.cd_m_list div ul').removeAttr('style').children().removeAttr('style'); var wrap = $('.cd_m_list .tempWrap'); if(wrap) { wrap.parent().html(wrap.html()); } $('.cd_m_pop_pics_model').children('span').text('大图模式'); } else { $('.cd_m_pop_pics').removeClass('cd_m_list').addClass('cd_m_bigimg'); $('.cd_m_pop_pics_model').children('span').text('列表模式'); } } //切换模式后,还原为初始状态 $('.cd_m_pop_pics_model').click(function() { switchShowModel(); //去掉图片的选中状态 $('.cd_m_pop_pics_left .cd_m_select').removeClass('cd_m_select'); //去掉当前选中类型的选中状态,保证能执行方法 $('.cd_m_pop_pictype a').first().click(); }); $('.cd_m_pop_pics_left').click(function(e){ var src = $(e.srcElement); if(src.hasClass('next') || src.hasClass('prev')) { var type = $('.cd_m_pop_pics_left>div:visible').find('li:visible').first().attr('data-type'); pic_uxl_track(type); } }); });