/************************************************* * Function channel * Copyright frontEnd http://www.tp-shop.cn/ * Designed and built by frontEnd @yangyang.li * Date 2016/03/14 ************************************************/ /** ** all plug-in ** @@1 移除边框边距 **/ ;(function($){ // @@1 $.fn.removeBorMar = function(options){ var defaults = {}, ops= $.extend({},defaults,options), $ts = $(this); if($ts.length){ // 清除边框 $ts.css("border","none"); } } function rmbr(cls){ var cls = cls || ".g-rmb"; $(cls).find("li:last").css("border","none"); } return rmbr(); })(jQuery); /** 懒加载 **/ $(function(){ //延迟加载 $(".fn_img_lazy").lazyload({ placeholder: "", threshold: 0, effect: "show", skip_invisible: false }); }); var indexEffect = { init:function(){ var $self = this; if($(".m-flr").length){ $self.floors(); } $self.navShow(".m-lst li",".m-dtl .g-snv","svn"); }, navShow:function(){ var arg1 = arguments[0], arg2 = arguments[1], arg3 = arguments[2] || undefined; $(arg1).mouseenter(function() { var ts = $(this); tm = setTimeout(function() { var idx = ts.index(); $(arg1).removeClass('s-select').eq(idx).addClass('s-select'); if(arg3 != "undefined"){ $(arg2).eq(idx).css("margin-top",idx*32+40); } $(arg2).hide().eq(idx).show(); }, 50); }).mouseleave(function() { /* Act on the event */ clearTimeout(tm); }); if(arg3 != "undefined"){ $(".m-sld-lst").on("mouseleave",function(){ $(arg1).removeClass('s-select'); $(arg2).hide(); }); } }, // floor floors:function(){ var offsettop = $(".m-flr:first").offset().top, yCenter = $(window).height() / 2; // console.log(document.body.scrollTop) // 判断楼层显示 $(window).scroll(function(event) { var scrolltop = $(window).scrollTop(); if(offsettop - scrolltop <= 150) { $(".g-ab-fx").show(); $(".g-flr").css({"opacity":1,"transform":"scale(1)","visibility":"visible"}); }else{ $(".g-flr").css({"opacity":0,"transform":"scale(1.2)","visibility":"hidden"}); $(".g-ab-fx").removeAttr("style"); } // 右侧楼层挂件联动左侧楼层 var $lf_flr = $(".m-flr"); $lf_flr.each(function(idx,el){ var $ts = $(this), off_top = $ts.offset().top, f_bottom = $ts.offset().top + $ts.outerHeight(); if (scrolltop + yCenter > off_top && scrolltop + yCenter < f_bottom) { $(".g-flr li").eq(idx).addClass('s-select').siblings().removeClass('s-select'); } }); }); // 锚点点击跳转到相应楼层 $(".g-flr").on( "click" , "li" , function(){ if(!$(this).hasClass('backtop')){ var $index = $(this).index(), $hei = $(".m-flr").eq($index).offset().top - 150; $(".g-flr li").removeClass('s-select').eq($index).addClass('s-select'); $("html,body").stop(true,true).animate({"scrollTop":$hei},400); } }); } } // removeborder function removeborder(){ // 移除边框 $(".m-lst li:last").find("dl").removeBorMar(); } window.onload = removeborder; var main = { init:function(){ // 绑定方法 this.bindEvent(); // floor tab this.floorTab(); }, bindEvent:function(){ // TO DO // 主大图轮播 $('#slideMain').fn_slide({ has_num: false, type: "fadeIn", time: 5000, auto: true, hide_page_btn: true }); // 右侧广告 $('#slideAd').fn_slide({ has_num: false, type: "move", flip: false }); // 判断右侧广告图是否存在设定宽 var sId = $("#slideAd"), sSlide = $("#slideMain"), nWid = 1000, nWid2 = 714, nMar = 440; if(sId.find(".slider-main li").length === 0){ sSlide.find(".slider-nav").css({ "width": nWid +"px" }); sSlide.find(".J_page_box .slider-next").css({ "margin-left": nMar +"px" }); }else{ sSlide.find(".slider-nav").css({ "width": nWid2 +"px" }); } // floor slide $('.J-f-sld').fn_slide({ has_num: false, type: "move", auto: true, time: 5000, hide_page_btn: true }); // 下期预告 $(".J_pictureArea").each(function() { var self = $(this); self.find("li img[data-src]").each(function(key,item) { $(item).attr("src", $(item).attr("data-src")).removeAttr("data-src"); }); }); // 默认展示轮播图背景 this.bgChange(0); }, floorTab:function(){ var sTab = ".J-tab li", sTabCnt = ".J-tabConent .J-hide", sflr = ".m-flr", fTime = null; $(sflr).each(function(){ $(this).find(sTab).eq(0).addClass('z_select'); $(this).find(sTabCnt).hide().eq(0).show(); }); $(document).on({ "mouseenter":function(){ var oTs = $(this); fTime = setTimeout(function(){ var sIndex = oTs.index(); oTs.addClass('z_select').siblings().removeClass('z_select'); oTs.parents(".J-parent").find(sTabCnt).hide().eq(sIndex).show(); },300); }, "mouseleave":function(){ clearTimeout(fTime); } },sTab); }, bgChange:function(index){ // TO DO var sBgpic = $("#slideMain").find(".slider-main li").eq(index).attr("data-bgimage"), sBgColor = $("#slideMain").find(".slider-main li").eq(index).attr("data-bgcolor"); if(typeof sBgpic === "undefined" && typeof sBgColor === "undefined") { $("#bgcolor").removeAttr("style"); } else if(typeof sBgpic !== "undefined" && typeof sBgColor === "undefined"){ $("#bgcolor").css("background","url("+sBgpic+") no-repeat center top"); } else if(typeof sBgpic === "undefined" && typeof sBgColor !== "undefined"){ $("#bgcolor").css("background",sBgColor); } } } $(function(){ main.init(); indexEffect.init(); }); ;(function($) { $.fn.fn_slide = function(options) { // build main options before element iteration var opts = $.extend({}, $.fn.fn_slide.defaults, options); // iterate and reformat each matched element return this.each(function() { var $this = $(this); // build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts; var active = opts.active || "z-select", time = null; var ele = { main: "slider-main", num: "slider-nav", num_li: "slider-item", next_btn: "slider-next", prev_btn: "slider-prev", page_box:"J_page_box" }; //get img contains var _ul = $this.children('.' + ele.main); //get li's length var _len = _ul.children("li").length; //create slide Ctrl var str = ""; //init _index var _index = 0; var _height = _ul.children("li").height(); var _width = $this.width(); //set ul's width _ul.width(_width * _len); //set li's width //_ul.children("li").width(_width); var obj = { is_flip: o.flip, is_fade: (o.type === "fadeIn"), is_move: (o.type === "move"), is_up: (o.type === "up"), throttle_t: 200, init: function() { //ctrl o.has_ctrl && $this.append(''); // 当前图片为1 圆点隐藏 if(_len <= 1) { $this.find("." + ele.num).hide(); } //是否需要上一页下一页 obj.is_flip && showFlip(); //初始化渐变还是左右 if (obj.is_fade) { _ul.children("li:first").addClass('z-select').css({ "position": "absolute", "zIndex": 1, "opacity": 1 }) .siblings().removeClass('z-select').css({ "position": "absolute", "zIndex": 0, "opacity": 0 }); //todo $this.on('mouseenter', '.' + ele.num_li, function() { var $this = $(this); clearTimeout(time); time = setTimeout(function(){ _index = $this.index(); _ul.children("li").eq(_index).addClass('z-select').css("zIndex", 1).siblings().removeClass('z-select').css("zIndex", 0); _ul.children("li").eq(_index).stop(true).animate({ "opacity": 1 }, { duration: o.duration, complete: function() { _ul.children("li").eq(_index).siblings().css({ "opacity": 0 }); } }); $this.addClass(active).siblings().removeClass(active); // roll 大背景底 if($this.parents("#slideMain").length){ main.bgChange(_index); } },obj.throttle_t); }).on('mouseleave', '.' + ele.num_li, function() { clearTimeout(time); }); } else if (obj.is_move) { //bind event on
  • $this.on('mouseenter', '.' + ele.num_li, function() { var $this = $(this); clearTimeout(time); time = setTimeout(function(){ _index = $this.index(); _ul.stop(true).animate({ "marginLeft": -(_width * _index) }, o.duration); $this.addClass(active).siblings().removeClass(active); },obj.throttle_t); }).on('mouseleave', '.' + ele.num_li, function() { clearTimeout(time); }); } else if (obj.is_up) {//晒单向上滚动 _ul.width(_width); _ul.height(_height * _len); } //如果上下页切换按钮是隐藏的话 o.hide_page_btn && $this.on({ mouseenter:function(){ if($(this).find("."+ele.page_box).is(":hidden") && $(this).find("."+ele.main+" >li").length >1){ $(this).find("."+ele.page_box).show(); } }, mouseleave:function(){ $(this).find("."+ele.page_box).hide(); } }); //定时器 obj.timeFuc(); }, timeFuc: function() { //auto 为true 表示可自动 if(o.auto && _len >1){ //setInterval time = setInterval(showEffect, o.time); // clearInterval $this.on({ mouseenter: function() { clearInterval(time); }, mouseleave: function() { clearInterval(time); time = setInterval(showEffect, o.time); } }); } } }; //初始化 obj.init(); //1->next 0->prev function showEffect() { if (o.type === "fadeIn") { arguments.length ? _index-- : _index++; if (_index === -1) { _index = _len - 1; } else if (_index === _len) { _index = 0; } _ul.children("li").eq(_index).addClass('z-select').css("zIndex", 1).siblings().removeClass('z-select').css("zIndex", 0); _ul.children("li").eq(_index).stop(true).animate({ "opacity": 1 }, { duration: o.duration, complete: function() { _ul.children("li").eq(_index).siblings().css({ "opacity": 0 }); } }); $this.find("." + ele.num_li).eq(_index).addClass(active).siblings().removeClass(active); // roll 大背景底 if($this.length){ main.bgChange(_index); } } else if (o.type === "move") { if (arguments.length) { if (_index === 0) { _index--; _ul.children("li:last").css({ "position": "relative", "left": -_len * _width }); _ul.stop(true).animate({ "marginLeft": -_index * _width }, { duration: o.duration, complete: function() { _ul.children("li:last").attr("style", "width:" + _width + "px"); _ul.css("marginLeft", -_width * (_len - 1)); } }); $this.find("." + ele.num_li).eq(_len - 1).addClass(active).siblings().removeClass(active); _index = _len - 1; } else { _index--; _ul.stop(true).animate({ "marginLeft": -_width * _index }, o.duration); $this.find("." + ele.num_li).eq(_index).addClass(active).siblings().removeClass(active); } } else { if (_index === (_len - 1)) { _index++; _ul.children("li:first").css({ "position": "relative", "left": _index * _width }); _ul.stop(true).animate({ "marginLeft": -_width * _index }, { duration: o.duration, complete: function() { _ul.children("li:first").attr("style", "width:" + _width + "px"); _ul.css("marginLeft", 0); } }); $this.find("." + ele.num_li).eq(0).addClass(active).siblings().removeClass(active); _index = 0; } else { _index++; _ul.stop(true).animate({ "marginLeft": -_width * _index }, o.duration); $this.find("." + ele.num_li).eq(_index).addClass(active).siblings().removeClass(active); } } } else if (o.type === "up") { if (_len > 2) { if (arguments.length) { if (_index === 0) { _index--; _ul.children("li:last").css({ "position": "relative", "top": -_len * _height }); _ul.stop(true).animate({ "marginTop": -_index * _height }, { duration: o.duration, complete: function() { _ul.children("li:last").attr("style", "width:" + _width + "px"); _ul.css("marginTop", -_height * (_len - 1)); } }); $this.find("." + ele.num_li).eq(_len - 1).addClass(active).siblings().removeClass(active); _index = _len - 1; } else { _index--; _ul.stop(true).animate({ "marginTop": -_height * _index }, o.duration); $this.find("." + ele.num_li).eq(_index).addClass(active).siblings().removeClass(active); } } else { if (_index === (_len - 2)) { _index++; _ul.children("li:first").css({ "position": "relative", "top": _len * _height }); _ul.children("li").eq(1).css({ "position": "relative", "top": (_len) * _height }); _ul.stop(true).animate({ "marginTop": -_height * _index }, o.duration); $this.find("." + ele.num_li).eq(0).addClass(active).siblings().removeClass(active); } else if (_index === (_len - 1)) { _index++; _ul.stop(true).animate({ "marginTop": -_height * _len }, { duration: o.duration, complete: function() { _ul.children("li:first").attr("style", "width:" + _width + "px"); _ul.children("li").eq(1).attr("style", "width:" + _width + "px"); _ul.css("marginTop", 0); } }); $this.find("." + ele.num_li).eq(0).addClass(active).siblings().removeClass(active); _index = 0; } else { _index++; _ul.stop(true).animate({ "marginTop": -_height * _index }, o.duration); $this.find("." + ele.num_li).eq(_index).addClass(active).siblings().removeClass(active); } } } } } //function - foreach slideCtrl function showCtrl() { var c_name = null; for (var i = 0, j = _len; i < j; i++) { c_name = ele.num_li + (i === 0 ? " " + active + "" : ""); str += "
  • " + (o.has_num ? (i + 1) : "") + "
  • "; } return str; } //is or not flip function showFlip() { $this.append('
    <>
    '); if(o.hide_page_btn){ $("."+ele.page_box).hide(); } $this.on("click", "." + ele.prev_btn, throttle(function() { clearInterval(time); showEffect("prev"); }, obj.throttle_t)); $this.on("click", "." + ele.next_btn, throttle(function() { clearInterval(time); showEffect(); }, obj.throttle_t)); } //event 节流 function throttle(fn, interval) { var doing = false; return function() { if (doing) { return; } doing = true; fn.apply(this, arguments); setTimeout(function() { doing = false; }, interval); }; } }); }; //this defaults $.fn.fn_slide.defaults = { //滚动间隔时间 time: 3000, //过渡间隔 duration: 300, //方向 direction: 'left', //是否有数字 has_num: true, //动画的效果 type: "fadeIn", //move //是否有分页 flip: true, //是否自动播放 auto:false, //是否有数字控制 has_ctrl:true, //是否需要隐藏左右点击按钮 hide_page_btn:false }; })(jQuery);