效果圖
記一個簡單js插件封裝炊汤，怕忘了??
封裝還是先需要了解一下js原型prototype
1. 文件主體完全是通用套裝，對其他框架的解釋方式處理（其實沒用過AMD存炮，后面加強學(xué)習(xí)??）
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// COMMONJS
module.exports = factory();
} else {
// BROWSER
root.YScroll = factory();
}
}(this, function () {···
}));
2. 參數(shù)的一些默認(rèn)值, 擴展方法隶校，插件的承載對象 YScroll 和它的私有參數(shù)（我這里分得不是很清晰）
var defaults = {
wrapper: '#YScroll',
autoPlay: false,
interTime: 2500,
prevCell: ".prev",
nextCell: ".next",
arrow: ".arrow",
sizeDatas: [],
centerX: 0,
centerY: 0,
a: 0, //半徑：寬
b: 0, //半徑：高
style: 1, //展示的樣式 1:默認(rèn) 2:兩側(cè)對稱
};
var extend = function () {···
};
// 插件的承載對象
var YScroll = function () {
this.wrapper = '';
this.CardNumber = 0; //生成點的個數(shù), 根據(jù)外部的li個數(shù)來確定
this.arc = 360; //弧度: 默認(rèn)360
this.cardWidth = this.cardHeight = 0, //卡片寬高
this.sizeDatas = [];
};
3. 插件主題函數(shù)
YScroll.prototype = {
conBox: null,
nextBtn: null,
prevBtn: null,
arrowD: null,
timer: null,
init: function (options) {···
},
animate: function () {···
},
nextCad: function () {···
},
prevCad: function () {···
},
doPlay: function () {/*自動播放*/···
},
applyEllipse: function () {···
},
attachEvent: function () {···
}
}
函數(shù)很簡明，這里主要總結(jié)一下：
- 標(biāo)簽和jq對象組合成新的對象：
var wapperJQ = $(this.wrapper); self.conBox = $("ul li", wapperJQ); - 插件基于jq是為了使用它的animation（真香忍坷。粘舟。）
動畫使用jq的self.conBox.eq(i).stop().animate(data, 500); - 動畫參數(shù)的改變：對預(yù)設(shè)形變參數(shù)數(shù)組進行循環(huán)
nextCad: function () {
var first = YScroll.sizeDatas.shift();
YScroll.sizeDatas.push(first);
YScroll.animate();
},
prevCad: function () {
var last = this.sizeDatas.pop();
this.sizeDatas.unshift(last);
this.animate();
},
4. 這里著重提一下3D循環(huán)滾動各種參數(shù)的生成算法
- 橢圓的繪制使用的三角函數(shù)，記不住三角函數(shù)的同學(xué)可以參考一下公式??：
三角函數(shù)
- 錨點（x,y）：卡片的中心點佩研，根據(jù)預(yù)設(shè)的長短半徑生成對應(yīng)的橢圓（當(dāng)然也可以是圓形）,這個可以參照三角函數(shù)
var hudu = (Math.PI / 180) * (i * pnC),
x1 = this.settings.centerX - this.settings.a * Math.sin(hudu),
y1 = this.settings.centerY + (this.settings.b * Math.cos(hudu)),
- z-index：始終保持頂點卡片在最前面蓖乘，elopacity，始終保持頂點卡片不透明
zIndex = factor ? this.CardNumber - i : i,
elopacity = 1 - 0.02 * xCode, //透明度
- 卡片的尺寸縮放系數(shù)scaleX（這個有很大調(diào)整空間）韧骗，根據(jù)設(shè)置的style（目前只有兩種）生成不同風(fēng)格的排列風(fēng)格嘉抒。
- 卡片的top，left也受到scaleX的影響
switch (this.settings.style) {
case 1: //尺寸系數(shù) --1 默認(rèn)
{
scaleX = 1 - xCode * (factor ? cose1 *= 0.9 : cose1 /= 0.92);
}
break;
case 2://尺寸系數(shù) --2 -左右對稱 i太大 (圓弧描點 )會導(dǎo)致尺寸過小
{
scaleX = 1 - xCode * 0.12;
.2>scaleX && (scaleX = lastScale);
lastScale = scaleX;//防止尺寸太小
}
}
over～
附上github地址3D-Yscroll
總的來說代碼不存在難度袍暴，將就著用了
