效果图
记一个简单js插件封装，怕忘了😂
封装还是先需要了解一下js原型prototype
1. 文件主体完全是通用套装，对其他框架的解释方式处理（其实没用过AMD，后面加强学习💪）
(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. 参数的一些默认值, 扩展方法，插件的承载对象 YScroll 和它的私有参数（我这里分得不是很清晰）
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:默认 2:两侧对称
};
var extend = function () {···
};
// 插件的承载对象
var YScroll = function () {
this.wrapper = '';
this.CardNumber = 0; //生成点的个数, 根据外部的li个数来确定
this.arc = 360; //弧度: 默认360
this.cardWidth = this.cardHeight = 0, //卡片宽高
this.sizeDatas = [];
};
3. 插件主题函数
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 () {···
}
}
函数很简明，这里主要总结一下：
- 标签和jq对象组合成新的对象：
var wapperJQ = $(this.wrapper); self.conBox = $("ul li", wapperJQ); - 插件基于jq是为了使用它的animation（真香。。）
动画使用jq的self.conBox.eq(i).stop().animate(data, 500); - 动画参数的改变：对预设形变参数数组进行循环
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循环滚动各种参数的生成算法
- 椭圆的绘制使用的三角函数，记不住三角函数的同学可以参考一下公式😄：
三角函数
- 锚点（x,y）：卡片的中心点，根据预设的长短半径生成对应的椭圆（当然也可以是圆形）,这个可以参照三角函数
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, //透明度
- 卡片的尺寸缩放系数scaleX（这个有很大调整空间），根据设置的style（目前只有两种）生成不同风格的排列风格。
- 卡片的top，left也受到scaleX的影响
switch (this.settings.style) {
case 1: //尺寸系数 --1 默认
{
scaleX = 1 - xCode * (factor ? cose1 *= 0.9 : cose1 /= 0.92);
}
break;
case 2://尺寸系数 --2 -左右对称 i太大 (圆弧描点 )会导致尺寸过小
{
scaleX = 1 - xCode * 0.12;
.2>scaleX && (scaleX = lastScale);
lastScale = scaleX;//防止尺寸太小
}
}
over～
附上github地址3D-Yscroll
总的来说代码不存在难度，将就着用了
