// 默认obj为执行元素 // hover // 默认样式 .h , 默认hover样式 .hover // 自定义hover可使用 hover(obj, classname) $(function(){ $(".h").hover(function(){ $(this).addclass("hover") }, function(){ $(this).removeclass("hover") }) }) function hover(obj, classname) { obj.hover(function(){ $(this).addclass(classname) }, function(){ $(this).removeclass(classname) }) } // tab // 默认焦点样式 .cur // 为防止xp系统opacity可能出现的锯齿或边缘模糊, 默认.tabbox效果.show() / .hide() // 拓展.tabbox成opacity, 需在.tabbox上加上 data-effect="true" function tab(tabbtn, tabbox) { var tabbl = true; tabbtn.eq(0).addclass("cur") tabbox.eq(0).show() tabbtn.click(function(){ var n = $(this).index(); $(this).addclass("cur").siblings().removeclass("cur") if(tabbox.attr("data-effect") == "true"){ if(!tabbl){ return } tabbl = false; tabbox.eq(n).stop().fadein(800).siblings().stop().fadeout(800, function(){ tabbl = true; }) }else{ tabbox.eq(n).show().siblings().hide() } }) } // 图片全屏 / 图片充满整个父级 // 默认box自带loading背景图 // 默认obj hide function fullbg(box, obj){ box.css("background", "none") obj.eq(0).stop().fadein(1000) function resizebg() { obj.removeclass("w-f").removeclass("h-f").css("margin", 0) var boxr = box.outerwidth() / box.outerheight(), objr = obj.width() / obj.height(); if( objr < boxr ) { obj.addclass('w-f').css("margin-top", -(obj.height() - box.outerheight()) / 2); }else{ obj.addclass('h-f').css("margin-left", -(obj.width() - box.outerwidth()) / 2); } } $(window).resize(resizebg).trigger("resize"); } // 视频全屏 / 视频充满整个父级 (video获取宽高有问题) function videofull(obj, width, height){ var $video = obj function resizebg() { $video.attr("width", "").attr("height", "").attr("style", "") var boxr = $('.top-video').outerwidth() / $('.top-video').outerheight(), objr = width / height; if( objr < boxr ) { $video.attr("width", "100%") var videoheight = $video.width() / objr var top = - (videoheight - $('.top-video').outerheight()) / 2 > 0 ? 0 : - (videoheight - $('.top-video').outerheight()) / 2 $video.css("margin-top", top); }else{ $video.attr("height", "100%") var videowidth = $video.height() * objr var left = - (videowidth - $('.top-video').outerwidth()) / 2 > 0 ? 0 : - (videowidth - $('.top-video').outerwidth()) / 2 $video.css("margin-left", left); } } $(window).resize(resizebg).trigger("resize"); } // 标签进场效果 // 用于多平级标签依次载入 默认标签具有position属性及opacuty: 0; // direction 从哪个方向进入 // distance 进入到指定距离 // number 平级标签的个数 // time 进场动画的时间 // delay 下一标签的延迟 // callback 回调函数 function enter(obj, direction, distance, number, time, delay, callback) { // 从左往右,distance > 0 if(direction == "left"){ obj.stop().animate({ left : distance, opacity : 1 }, time) settimeout(function(){ if(obj.next().index() != -1){ enter(obj.next(), direction, distance, number, time, delay, callback) }else{ settimeout(function(){ callback = callback || function(){}; callback (); return }, time - delay) } }, delay) } // 从上往下,distance > 0 if(direction == "top"){ obj.stop().animate({ top : distance, opacity : 1 }, time) settimeout(function(){ if(obj.next().index() != -1){ enter(obj.next(), direction, distance, number, time, delay, callback) }else{ settimeout(function(){ callback = callback || function(){}; callback (); return }, time - delay) } }, delay) } // css3 x位移 if(direction == "x"){ obj.stop().transition({ x : distance, opacity : 1 }, time) settimeout(function(){ if(obj.next().index() != -1){ enter(obj.next(), direction, distance, number, time, delay, callback) }else{ settimeout(function(){ callback = callback || function(){}; callback (); return }, time - delay) } }, delay) } // css3 y位移 if(direction == "y"){ obj.stop().transition({ y : distance, opacity : 1 }, time) settimeout(function(){ if(obj.next().index() != -1){ enter(obj.next(), direction, distance, number, time, delay, callback) }else{ settimeout(function(){ callback = callback || function(){}; callback (); return }, time - delay) } }, delay) } } // 图片加载 调用方法 // _preloadimg([ // 图片路径(数组形式) // ],function(){ // }) function _preloadimg(b,e){var c=0,a={},d=0;for(src in b){d++}for(src in b){a[src]=new image();a[src].onload=function(){if(++c>=d){e(a)}};a[src].src=b[src]}};