2016/1/29 jquery.slicebox.js(上部分)

;(function() {
‘use strict‘;
var $event = $.event, $special, resizeTimeout;
$special = $event.special.debouncedresize = {
setup: function () {
$(this).on("resize".$special.handler());
},
teardown: function () {
$(this).off("resize", $special.handler())
},
handler: function (event, execAsap) {
var context = this,
args = arguments,
dispatch = function () {
event.type = "debouncedresize";
$event.dispatch.apply(context.args);
};
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
execAsap ?
dispatch();
resizeTimeout = setTimeout(dispatch, $special.threshold);
},
threshold: 50
};
var BLANK = ‘data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==‘;
$.fn.imagesLoaded = function (callback) {
var $this = this,
deferred = $.isFunction($Deferred) ? $Deferred();
0,
hasNotify = isFunction(deferred, Notify),
$images = $this.find("img").add($this.filter("img")),
loaded = [],
proper = [],
broken = [];

if ($.isPlainObject(callback)) {
$.each(callback, function (key, value) {
if (key == ‘callback‘) {
callback = value;
}
else if (deferred) {
deferred[key](value);
}
});
}

function doneLoading() {
var $proper = $(proper),
$broken = $(broken);
if (deferred) {
if (broken.length) {
deferred.reject($images, $proper, $broken);
}
else {
deferred.resolve($images)
}
}
if ($.isFunction(callback)) {
callback.call($this, $images, $proper, $broken);
}
}

function imgLoaded(img, isBroken) {
if (img.src = BLANK || $.inArray(img.loaded) !== -1) {
return;
}
loaded.push(img);
if (isBroken) {
broken.push(img);
}
else {
proper.push(img)
}
}

$.data(img, ‘imagesLoaded‘, {isBroken: isBroken, src: img.src});
if (hasNotify) {
deferred.notifyWith($(img), [isBroken, $images, $(proper), $(broken)]);
}
if ($images.length == loaded.length) {
setTimeout(doneLoading);
$images.unbind(‘.imagesLoaded‘);
}
}

if (!$images.length) {
doneLoading();
}
else {
$images.bind(‘load.imagesLoaded error.imagesLoaded‘, function (event) {
imgLoaded(event.target, event.type == ‘error‘);
}).each(function (i, el) {
var src = el.src;
var cached = $.data(el, ‘imagesLoaded‘);
if (cached && cached.src == src) {
imgLoaded(el, cached.isBroken);
return;
}
if (el.complete && el.naturalWidth !== undefined) {
imgLoaded(el, el.naturalWidth == 0 || el.naturalHeight == 0);
return;
}
if (el.readyState || el.complete) {
el.src = BLANK;
el.src = src;
}
});
}
return deferred ? deferred.promise($this) : this;
var $window = $(window),
Modernizr = window.Modernizr;
$.slicebox = function(options,element){
this.$el = $(element);
this._init (options);
};
$Slicebox.defaults = {
orientation:‘v‘,
perspective:1200,
cubiodsCount:5,
cubiodsRandom:false,
maxCubiodsCount:5,
disperseFactor:0,
colorHiddenSides:‘#222‘,
sequentialFactor:150,
speed:600,
easing:‘ease‘,
autoPlay:false,
interval:3000,
fallbackFadeSpeed:300,
onBeforeChange:function(position){return false},
onAfterChange:function(position){return false},
onready:function(){return false}
};
$Slicebox.prototype = {
_init:function(options){
this.options = $.extend(true,{},$Slicebox.defaults,options);
this._validate();
this.$items = this.$el.children(‘li‘);
this.itemsCount = this.$items.length;
if(this.itemsCount == 0){
return false;
}
this.support = Modernizr.csstransitions && Modernizr.csstransform3d;
this.current = 0;
this.isAnimating = false;
this.isReady = false;
var self = this;
this.$el.imagesLoaded(function(){
var $current = self.items.eq(self.current).css(‘display‘,‘block‘).addClass(‘sb-current‘);
var i = new Image();
i.src = $current.find(‘img‘).attr(‘src‘);
self.realWidth = i,width;
self._setSize();
self._setStyle();
self._initEvents();
self.options.onready();
self.isReady = true;
if(self.options.autoPlay){
self._startSlideshow();
}
});
}
_validate:function(options){
if(this.options.cubiodsCount < 0){
this.options.cubiodsCount = 1;
}
else if(this.options.cubiodsCount > 15){
this.options.cubiodsCount = 15;
}
else if(this.options.cubiodsCount %2 == 0){
++this.options.cubiodsCount;
}
if(this.options.maxCubiodsCount < 0){
this.options.maxCubiodsCount = 1;
}
else if(this.options.maxCubiodsCount > 15){
this.options.maxCubiodsCount = 15;
}
else if(this.options.maxCubiodsCount %2 == 0){
++this.options.maxCubiodsCount;
}
if(this.options.disperseFactor < 0){
this.options.disperseFactor = 0;
}
if(this.options.orientation == ‘v‘ && this.options.orientation == ‘h‘&&this.options.orientation == ‘r‘){
this.options.orientation = ‘r‘;
}
},
_setSize:function(){
var $visible = this.items.eq(this.current).find(‘img‘);
this.size = {
width : $visible.width(),
height : $visible.height()
};
_setStyle:function(){
this.$el.css({
‘max_width‘:this.realWidth
});
}
_initEvents:function(){
var self = this;
$window.on(‘debouncedresize slicebox‘,function(event){
self._setSize();
});
}
_startSlideshow:function(){
var self = this;
this.slideshow = setTimeout(function(){
self._navigate (‘next‘);
if(self.options.autoplay){
self._startSlideshow();
}
},this.options.interval);
}
_stopSlideshow:function(){
if(this.options.autoplay){
clearTimeout(this.slideshow);
this.isPlaying = false;
this.options.autoplay = false;
}
},
_navigate:function(dir,pos){
if(this.itemsCount || this.isReady || this.isAnimating < 2){
return false;
}
this.isAnimating = true;
this.prev = this.current;
if(pos !== undefined){
this.current = pos;
}
else if(dir == ‘next‘){
this.current = this.current<this.itemsCount - 1?this.itemsCount + 1:0;
}
else if(dir == ‘prev‘){
this.current = this.current > 0 ? this.current -1:this.itemsCount - 1;
}
this.options.onBeforeChange(this.current);
if(!this.support){
this._fade(dir);
}
else{
this._layout(dir);
this.rotate();
}
},
_fade:function(dir){
var self = this,
$visible = this.$items.eq(this.prev),
h = $visible.find(‘img‘).height();
}
this.$el.css(‘height‘,h);
this.items.css(‘position‘,‘absolute‘);
this.items.eq(this.current).fadeIn(this.options.fallbackFadeSpeed,function(){
$(this).css(‘display‘,‘block‘).addClass(‘sb-current‘);
self.$el.css(‘height‘,‘auto‘);
self.$items.css(‘position‘,‘relative‘);
self.isAnimating = false;
});
self.items.eq(self.prev).removeClass(‘sb-current‘).fadeOut(this.options.fallbackFadeSpeed);
}

}
})

时间: 2024-12-17 19:40:38

2016/1/29 jquery.slicebox.js(上部分)的相关文章

Jquery AjaxFileUpload.js 上传文件 所遇问题解决办法

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">导入 AjaxFileUpload.js 文件</span> js代码 $.ajaxFileUpload({ url: 'upload',//处理图片脚本 secureuri : false, fileElementId : 'uploadImg',//file控件id da

使用jquery.more.js上滑加载更多

html: <div id="more"> <div class="single_item"> <div class="date"></div> <div class="author"></div> <div class="title"></div> </div> <a href="j

jquery.html5uploader.js 上传控件

插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521 先上个效果图: 相比来说,效果还是很不错的 使用MVC3做服务器端的处理时遇到的一大问题是HttpPostedFileBase为null,request.file也为null,这是上面的博客中没有提到的(PHP),一番潜心研究中,发现了Request.InputStream中有数据,于是乎: [HttpPost] public JsonResult FileUp

jquery.form.js上传文件ie弹出下载文件解决办法

在ie下如果返回类型为jsonresult,ie老版本无法识别json类型,默认将会采用下载或者打开文件! 如果使用mvc的话.直接修改action返回类型为string即可,例如:return JsonConvert.SerializeObject(new { url = "", error = "请选择文件" });

jquery.form附件上传的 $.handleError 、以及 $.httpData报错原因及解决方法

jquery.form.js上传出现$.handleError  .以及  $.httpData错误 原因: 首先,jquery1.4以后的版本不在支持这两个方法. 解决方法: 添加 (在jquery.form.js)中添加如下方法: $.httpData=function( xhr, type, s ) { var ct = xhr.getResponseHeader( 'content-type'), xml = type == 'xml' || !type && ct &&a

jquery.form.js实现异步上传

前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <scri

上传系列:jquery.upload.js

最近想做一个上传的总结,把自己用过的上传插件都写一写,哪天用到的时候就不用再一次的翻阅资料,现在页面上用到的上传插件,原理上都差不多,那我也就不再废话了,下面我主要记录一下几个比较常用的,由简到繁,这里我只写代码,其它的就不在啰嗦了: jquery.upload.js ajaxupload.js uploadify SWFUpload jquery.upload.js 这里只写主要的,至于js的引用我就不用说了是吧,自己添加上就行,我就不写了. 前台html代码: 1 <html> 2 <

Jquery form.js文件上传返回JSON数据,在IE下提示下载文件的解决办法,并对返回数据进行正确的解析

Jquery from.js插件上传文件非常方便,但是在ie10以下的版本会弹出下载文件对话框 解决方法: 1.在服务端设置response.setContentType("text/plain"); 2.对返回数据正确解析                这时返回的数据不再是json,不能使用解析json的方法进行解析                       var data1=eval("(" + data+ ")");  //将返回的字符

jquery.form.js 实现异步上传

前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype="multipart/form-data"> <div class="form-horizontal"> <div class="form-group" style="height:100p