yali项目的slider
// 调用
var s41 = new slider({
target : '#slider411',
titleActiveClass : 'j-active',
itemActiveClass : 'j-active',
btn : '.sbtn',
}); // 声明方法
var slider = function(element){
if(!element.target)return false;
// 判断设备是否支持touch事件
var me = this;
this.touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
this.target = element.target;
this.parent = element.parent||false;
this.slider = document.querySelector(this.target) || document.getElementById('slider');
this.count = $(element.target).children().size();
this.titleId = element.titleId || !1;
this.next = element.nextClass,
this.prev = element.prevClass,
this.animateClass = element.animateClass || 'f-anim';
this.scaleAnimateClass = element.scaleAnimateClass || 'f-slow',
this.control = element.control,
this.titleActiveClass = element.titleActiveClass||'j-active',
this.itemActiveClass = element.itemActiveClass||'j-active',
this.scale = element.scale-1;
this.btn = element.btn;
this.sImg = element.sImg;
this.page = element.page;
this.sImgActiveClass = element.sImgActiveClass||'on';
console.log(this.target+', '+this.titleId+', '+this.scrollWidth);
//console.log(this.target);
// 点击缩略图滚动对象
(function(){
var t = me.sImg;
var activeClass = 'on'; if(!($(t).size()>0))return false;
var c = $(t).children();
c.eq(0).addClass(activeClass);
c.on('click', function(){
var i = $(this).index();
me.scrollTo(i);
c.removeClass(activeClass).eq(i).addClass(activeClass);
});
})(); this.first=true;
this.last=false;
var item = $(element.target).children().eq(0);
this.itemWidth = item.width()+parseInt(item.css('marginLeft'))+parseInt(item.css('marginRight'))+parseInt(item.css('paddingLeft'))+parseInt(item.css('paddingRight'))+parseInt(item.css('border-left-width'))+parseInt(item.css('border-right-width')); item.addClass(this.itemActiveClass);
$(element.target).children().eq(1).addClass('j-next');
$(element.target).width(this.itemWidth*this.count);
var titlechildren = $('#'+this.titleId).children();
titlechildren.eq(0).addClass(me.titleActiveClass);
this.scrollWidth = this.itemWidth || element.scrollwidth || window.innerWidth;
this.scrollPage = function(p){ // 缩略图翻页
var l = p*me.page; // itemCount
var item = $(me.sImg).children().eq(0);
var w = item.width()+parseInt(item.css('marginLeft'))+parseInt(item.css('marginRight'))+parseInt(item.css('paddingLeft'))+parseInt(item.css('paddingRight'))+parseInt(item.css('border-left-width'))+parseInt(item.css('border-right-width'))
$(me.sImg).parent().animate({scrollLeft: l*w},500);
console.log(w+', '+l+', ');
}; this.scrollTo = function(page,sliderTips){
titlechildren.removeClass(me.titleActiveClass);
var i = page;
this.events.index = i;
titlechildren.eq(i).addClass(me.titleActiveClass);
$(element.target).addClass(me.animateClass);
this.slider.style.webkitTransform = "translate3d(" + (-i * this.scrollWidth ) + "px,0 ,0)";
me.class();
// window.lacation.href参数导致滑动时执行
me.first=false;
me.last=false; if(sliderTips){
if(page==0){
me.first=true;
me.last=false;
}else if(page==me.count-1){
me.first=false;
me.last=true;
};
};
if($(me.sImg).size()>0){ // 判断缩略图翻页[0]
var i = me.events.index*1+1;
var p = Math.ceil(i/me.page)-1;
me.scrollPage(p);
$(me.sImg).children().removeClass(me.sImgActiveClass).eq(me.events.index).addClass(me.sImgActiveClass);
}; // 缩放结束
if(me.scale>0){
var active = '.'+me.itemActiveClass;
$(active, me.target).css({'webkitTransform':'scale('+(me.scale+1)+')'});
$('.j-prev', me.target).add('.j-next', me.target).css('webkitTransform', 'scale(1)');
$(me.target).children().addClass('f-slow');
};
}; // 标题跳转事件
if(this.titleId){
var d = document.querySelector("#"+this.titleId);
d.onclick = function(event){
me.scrollTo($(event.target).index());
};
}; var first, last, started=false; // 事件
this.events = {
index: 0, // 显示元素的索引
slider: me.slider, // this为slider对象
icons: document.getElementById(me.titleId),
icon: document.querySelectorAll('#'+me.titleId+' *'),
handleEvent: function(event) {
// this指events对象
var self = this;
if (event.type == 'touchstart') {
self.start(event);
} else if(event.type == 'touchmove') {
self.move(event);
} else if(event.type == 'touchend') {
self.end(event);
}
}, // 滑动开始
start: function(event) {
started = true;
//console.log('start '+me.first+', '+me.last);
//event.preventDefault();
if (event.touches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.touches[0]; // touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = { // 取第一个touch的坐标值
x: touch.pageX,
y: touch.pageY,
time: +new Date
};
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
}; // 缩放开始
if(me.scale) $(me.target).children().removeClass(me.scaleAnimateClass); this.slider.addEventListener('touchmove', this, false);
this.slider.addEventListener('touchend', this, false); //自定义touchstart事件
if(element.start){
element.start.call(me, event);
};
}, // 移动
move: function(event) {
// 当屏幕有多个touch或者页面被缩放过,就不执行move操作
if (event.touches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.touches[0];
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
}; var o = $(event.target).closest('._target'); // czy
if(o.length){
if(o.hasClass('_left')){ // 锁定左
if(endPos.x>0){ // 往右
event.preventDefault(); // 执行动画
}else if(endPos.x<0){ // 往左
event.stopPropagation(); // 执行原生滚动
return ;
}
}else if(o.hasClass('_right')){ // 锁定右
if(endPos.x>0){ // 往右
event.stopPropagation(); // 执行原生滚动
return ;
}else if(endPos.x<0){ // 往左
event.preventDefault(); // 执行动画
}
}else{
// 中间
event.stopPropagation(); // 执行原生滚动
return ;
}
} // 系统滚动条事件
/*
var sx = $(event.target).closest('.scrollx');
var sy = $(event.target).closest('.scrolly');
if((sx.size()>0)||(sy.size()>0)){
me.parent = true;
if(sx.size()>0){
me.first = false;
me.last = false;
// 判断水平滚动条是否first或next
var x={
pl : parseInt(sx.css('paddingLeft')),
pr : parseInt(sx.css('paddingRight')),
pw : sx.width()*1,
l : Math.abs(sx.children().position().left),
w : sx.children().width()*1,
r : parseInt(sx.children().css('paddingLeft')),
};
if(x.pl==x.l&&endPos.x>0){
me.first = true;
me.last = false;
}else if(((x.l+x.pr+x.pl+x.pw)-(x.w+x.r)==0)&&endPos.x<0){
me.first = false;
me.last = true;
}else{
me.first = false;
me.last = false;
return false;
};
if(me.first||me.last){
event.preventDefault();
}else{
event.stopPropagation();
return false;
}; }else if(sy.size()>0){
// 垂直滚动事件
if(scrollY || (!scrollX && Math.abs(endPos.y)>=Math.abs(endPos.x))){
// 阻止冒泡
event.stopPropagation();
scrollY = true;
scrollX = false;
return false;
}else if(scrollX || Math.abs(endPos.y)<Math.abs(endPos.x)){
scrollY = false;
scrollX = true;
};
};
}else{ console.log('阻止默认');
event.preventDefault();
}; */ if(me.parent && ((me.first && endPos.x>0) || (me.last && endPos.x<0))){
event.preventDefault();
}else{
event.stopPropagation()
}; // 跟随变形
if(me.scale>0){
var active = '.'+me.itemActiveClass;
var t = $(active, me.target).css('webkitTransform') || $(active, me.target).css('transform');
var scale = t.substring(t.indexOf('(')+1,t.indexOf(','))-1;
var n = me.scale/(1024/Math.abs(endPos.x))+1;
var a = me.scale-(me.scale/(1024/Math.abs(endPos.x)))+1;
//console.log('a '+a);
if(endPos.x<0){
$('.j-next', me.target).css('webkitTransform','scale('+n+')');
$(active, me.target).css('webkitTransform','scale('+a+')');
}else if(endPos.x>0){
$('.j-prev', me.target).css('webkitTransform','scale('+n+')');
$(active, me.target).css('webkitTransform','scale('+a+')');
};
}; // 执行操作,使元素移动
$(this.slider).removeClass(me.animateClass);
this.slider.style.webkitTransform = "translate3d(" + (-this.index * me.scrollWidth + endPos.x/($(window).width()/me.scrollWidth)) + "px,0 ,0)"; // 自定义touchmove事件
if(element.move){
element.move.call(me, event);
};
}, // 滑动释放
end: function(event) {
started = false;
var o = $(event.target).closest('._target'); // czy
if(o.length){
if(o.hasClass('_left')){ // 锁定左
if(endPos.x>0){ // 往右
event.preventDefault(); // 执行动画
}else if(endPos.x<0){ // 往左
event.stopPropagation(); // 执行原生滚动
checkScroll();
return ;
}
}else if(o.hasClass('_right')){ // 锁定右
if(endPos.x>0){ // 往右
event.stopPropagation(); // 执行原生滚动
checkScroll();
return ;
}else if(endPos.x<0){ // 往左
event.preventDefault(); // 执行动画
}
}else{
// 中间
event.stopPropagation(); // 执行原生滚动
checkScroll();
return ;
}
}
function checkScroll(){
var pwidth = o.width();
var width = o.children().width();
var left = o.scrollLeft();
first = left==0;
last = pwidth+left>=width;
if(first && last){
o.addClass('_left');
o.addClass('_right');
}else if(first){
o.addClass('_left');
o.removeClass('_right');
}else if(last){
o.addClass('_right');
o.removeClass('_left');
}else{
o.removeClass('_left');
o.removeClass('_right');
}
} if(me.parent && ((me.first && endPos.x>0) || (me.last && endPos.x<0))){
}else{
event.stopPropagation();
}; var duration = +new Date - startPos.time; // 滑动的持续时间
if(me.titleId)this.icon[this.index].className = '';
if (Number(duration) > 100) {
// 判断是左移还是右移,当偏移量大于50时执行
if (endPos.x > 50) {
this.index == 0 ? i=0:i=1;
this.index = parseInt(this.index) - i;
this.index == 0 ? me.first = true : me.first = false;
me.last = false;
} else if(endPos.x < -50) {
this.index == me.count-1 ? i=0:i=1;
this.index = parseInt(this.index) + i;
this.index == me.count-1 ? me.last = true : me.last = false;
me.first = false;
};
};
//console.log('end '+me.first+', '+me.last); $(this.slider).addClass(me.animateClass);
this.slider.style.webkitTransform = "translate3d(" + (-this.index*me.scrollWidth) + "px,0 ,0)"; if($(me.sImg).size()>0){ // 判断缩略图翻页[1]
var i = me.events.index+1;
var p = Math.ceil(i/me.page)-1;
me.scrollPage(p);
$(me.sImg).children().removeClass(me.sImgActiveClass).eq(me.events.index).addClass(me.sImgActiveClass);
}; // 解绑事件
this.slider.removeEventListener('touchmove', this, false);
this.slider.removeEventListener('touchend', this, false);
me.class(); // 缩放结束
if(me.scale>0){
var active = '.'+me.itemActiveClass;
$(active, me.target).css({'webkitTransform':'scale('+(me.scale+1)+')'});
$('.j-prev', me.target).add('.j-next', me.target).css('webkitTransform', 'scale(1)');
$(me.target).children().addClass('f-slow');
}; //btn
if($(me.btn).size()>0){
var onlyone = me.count==1?true:false;
if(me.events.index==0){
$('.prev', me.btn).hide();
if(!(me.count==1))$('.next', me.btn).show();
//me.first=true;
//me.last=false;
}else if(me.events.index==me.count-1){
$('.prev', me.btn).show();
$('.next', me.btn).hide();
//me.first=false;
//me.last=true;
}else{
$('.prev', me.btn).show();
$('.next', me.btn).show();
//me.first=false;
//me.last=false;
};
}; //自定义touchend事件
if(element.end){
element.end.call(me, event);
}; //console.log(me.target+', '+me.first+', '+me.last) ;
}
}, this.class = function(){ // 当前,上一个,下一个加类名
var children = $(element.target).children(),
i = this.events.index;
children.removeClass(me.itemActiveClass);
children.removeClass('j-active').eq(i).addClass(me.itemActiveClass);
if(me.count>1){
children.removeClass('j-next').eq(i+1).addClass('j-next');
children.removeClass('j-prev').eq(i-1).addClass('j-prev');
}; if(me.titleId){
$('#'+me.titleId).children().eq(i).addClass(me.titleActiveClass);
};
}, // 初始化
this.init = function() {
// this指slider对象
var self = this; $(this.target).find('._target').each(function(){
var o = $(this);
o.scroll(function(){
if(!started){ // 滚动结束后继续监控原生滚动条,以解决弹性滚动问题
var pwidth = o.width();
var width = o.children().width();
var left = o.scrollLeft();
first = left==0;
last = pwidth+left>=width;
console.log(first);
console.log(last);
if(first && last){
o.addClass('_left');
o.addClass('_right');
}else if(first){
o.addClass('_left');
o.removeClass('_right');
}else if(last){
o.addClass('_right');
o.removeClass('_left');
}else{
o.removeClass('_left');
o.removeClass('_right');
}
}
});
}); // addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性
if(!!self.touch) this.slider.addEventListener('touchstart', self.events, false);
}; if($(me.btn).size()>0){ //初始化
$('.prev',me.btn).hide();
if(me.count==1)$('.next',me.btn).hide(); $(me.btn).click(function(event){
var t = {
p : $(event.target).hasClass('prev'),
n : $(event.target).hasClass('next'),
};
if(!t.p&&!t.n)return false; if(t.p){
if(me.events.index==0){
return false;
}else if(me.events.index==1){
me.first = true;
me.last = false;
};
me.events.index -= 1;
if(me.events.index==0){
$('.prev',me.btn).hide();
$('.next',me.btn).show();
}else{
$('.prev',me.btn).show();
$('.next',me.btn).show();
};
}else if(t.n){
if(me.events.index==me.count-1){
return false;
}else if(me.events.index==me.count-2){
me.first = false;
me.last = true;
};
me.events.index += 1;
if(me.events.index==me.count-1){
$('.prev',me.btn).show();
$('.next',me.btn).hide();
}else{
$('.prev',me.btn).show();
$('.next',me.btn).show();
};
}; me.scrollTo(me.events.index); });
}; this.init();
};
yali项目的slider的更多相关文章
- 团队项目——编写项目的Spec
团队项目--编写项目的Spec 一.Spec的目标 spec主要用来说明软件的外部功能,和用户的交互情况,主要用来说明软件内部的设计.图片编辑器是与生活息息相关的一个必备软件,随的流行, ...
- 如何修改MyEclipse项目的web context-root
修改一个MyEclipse项目的名称很容易,右键点项目->rename就行了. 但此时项目的web context-root 还没有改变,需要右键点项目->properties->M ...
- 为什么项目的jar包会和tomcat的jar包冲突?
为什么项目的jar包会和tomcat的jar包冲突? 碰到这个问题,猜测tomcat启动时会将自己的lib和项目的lib在逻辑上归并为一个大的lib,但是并没有做版本区分以及去重,这样相同的包可能就有 ...
- spring项目的 context root 修改之后,导致 WebApplicationContext 初始化两次的解决方法
修改了 spring web 项目的 context root 为 / 之后,在启动项目时,会导致 WebApplicationContext 初始化两次,下面是其初始化日志: 第一次初始化: 四月 ...
- 谈谈软件项目的dependency
说到软件项目的依赖管理,可以从三个方面来考虑: 一.由build system控制的dependency 现在的build system,都支持一定程度上的dependency management, ...
- Eclipse中修改Web项目的URL访问路径
背景 访问路径,也就是指在浏览器中访问该web系统时的根路径,比如http://localhost:8080/xxxx/index.jsp 这里的xxxx,也就是request.getContext ...
- 系列文章:老项目的#iPhone6与iPhone6Plus适配#(持续更新中,更新日期2014年10月12日 星期日 )
本文永久地址为http://www.cnblogs.com/ChenYilong/p/4020399.html ,转载请注明出处. ********************************** ...
- 老项目的#iPhone6与iPhone6Plus适配#LaunchImage适配
本文永久地址为 http://www.cnblogs.com/ChenYilong/p/4020384.html,转载请注明出处. Evernote印象笔记链接:https://www.everno ...
- 学习笔记——Maven实战(三)多模块项目的POM重构
重复,还是重复 程序员应该有狗一般的嗅觉,要能嗅到重复这一最常见的坏味道,不管重复披着怎样的外衣,一旦发现,都应该毫不留情地彻底地将其干掉.不要因为POM不是产品代码而纵容重复在这里发酵,例如这样一段 ...
随机推荐
- Payload Inject And Fake
常见捆绑注入payload手法 Payload捆绑注入 注入exe型+编码: msfvenom -a <arch> --plateform <platform> -p < ...
- 简单的jquery实现tab切换
$(document).ready(function(){ $(".nav-menu-ctn").find("a").click(function(){ $(t ...
- 8.MyBatos的动态Sql
1.创建javaWeb项目MyBatis_dynamicSQL并在WebRoot下的WEB-INF下的lib下添加如下jar文件 cglib-nodep-2.1_3.jar log4j-1.2.17. ...
- linux(x64)下安装Matlab 2015b破解版(含安装包)
注意:在安装前请查看安装目录是否有足够空间!完全安装大概需要12G的空间!本人在安装后系统盘满了,导致无法启动图形界面.小伙伴们不要重蹈覆辙~ Environment Linux debian8 (x ...
- Ansible hostvars
1. inventory hosts file 中的server 变量会覆盖group变量. hostvars: { "iaas_name": "test", ...
- bootstrap页面模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- ntp升级
1. 系统与软件版本 1.1 系统版本 CentOS6.5 x86_64 1.2 ntpd软件版本 ntp-4.2.8p9.tar.gz 1.3 下载地址 官方下载地址:http://support. ...
- x264 亮度信号8x8帧内预测模式
1 该模式的8个预测方向与4x4帧内预测模式一样. 2 该模式只有High profile及更高的Profile的才有可能使用,Baseline.Main Profile.Preset为ultrafa ...
- centos7,yum安装的redis用systemctl无法启动
因为之前使用显示命令启动redis的,要使redis在后台运行就需要改redis.conf中的daemonize 为yes. 这次在centos7上也顺手改了为yes,然后使用systemctl启动, ...
- C# 常用接口学习 IEnumerable<T>
作者:乌龙哈里 时间:2015-10-24 平台:Window7 64bit,Visual Studio Community 2015 本文参考: MSDN IEnumerable<T> ...