修改界面
夜笙歌
3 years ago
parent
334077add8
commit
72bacd261e
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* vmc.slide 图片轮播JQuery插件 v2.0.0
|
||||
* 维米客网页工作室 vomoc.com
|
||||
* https://github.com/vomoc/vmc.slide
|
||||
* vomoc@qq.com
|
||||
* 2017/03/20
|
||||
**/
|
||||
.vui-slide-mimic{overflow:hidden;position:relative;margin:0;padding:0}.vui-slide-scene{display:block;width:100%;height:100%;margin:0;padding:0;background-repeat:no-repeat}.vui-slide-scene>img{height:100%;width:100%;border:0;margin:0;padding:0}.vui-slide-transfer{overflow:hidden;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;margin:0;padding:0;list-style:none}.vui-slide-transfer .vui-slide-grid{overflow:hidden;position:absolute;background-repeat:no-repeat}.vui-slide-transfer .vui-slide-grid img{width:100%;height:100%;border:0;margin:0;padding:0}.vui-slide-handle-buttons{position:absolute;bottom:3%;left:0;z-index:30;width:100%;margin:0;padding:0;list-style:none;text-align:center;font-size:0}.vui-slide-handle-buttons .vui-slide-handle-button{display:inline-block;height:12px;width:12px;border-radius:50%;background:#fff;margin:0 5px;cursor:pointer;-webkit-box-shadow:#666 0 0 6px;-moz-box-shadow:#666 0 0 6px;box-shadow:#666 0 0 6px}.vui-slide-handle-buttons .active{background-color:#c00}.vui-slide-side-buttons{z-index:30;position:absolute;top:50%;left:0;height:0;width:100%}.vui-slide-side-buttons .vui-slide-side-button{position:absolute;top:-60px;height:120px;width:60px;background:transparent no-repeat center center;background-size:contain;cursor:pointer}.vui-slide-side-buttons .next{right:0;border-radius:20px 0 0 20px;background-image:url("next.gif")}.vui-slide-side-buttons .prev{left:0;border-radius:0 20px 20px 0;background-image:url("prev.gif")}.vui-slide-side-buttons .hover{background-color:#000;filter:alpha(Opacity=40);-moz-opacity:.4;opacity:.4}.vui-slide-mask{position:absolute;bottom:0;left:0;z-index:20;width:100%;height:20%;background:#000;filter:alpha(Opacity=30);-moz-opacity:.3;opacity:.3}.vui-slide-text{position:absolute;bottom:0;left:0;z-index:25;width:100%;height:20%;overflow:hidden}.vui-slide-text .text{padding:10px 20px;font-size:16px;font-weight:400;color:#fff}.vui-slide-text a{text-decoration:none;color:#fff}
|
||||
@ -0,0 +1,282 @@
|
||||
/**
|
||||
* vmc.slide 图片轮播JQuery插件 v2.0.0
|
||||
* 维米客网页工作室 vomoc.com
|
||||
* https://github.com/vomoc/vmc.slide
|
||||
* vomoc@qq.com
|
||||
* 2017/03/20
|
||||
**/
|
||||
;(function ($, undefined) {
|
||||
$.vmcSlideEffects({
|
||||
// 横向滑动
|
||||
'slideX': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
|
||||
if (index > the.index) {
|
||||
// next
|
||||
the.transfer[4].show().animate({
|
||||
left: -the.width
|
||||
}, opts.speed, function () {
|
||||
$(this).css({
|
||||
left: 0
|
||||
});
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
|
||||
the.transfer[4].show().css('left', -the.width).animate({
|
||||
left: 0
|
||||
}, opts.speed, function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
// 纵向滑动
|
||||
'slideY': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
|
||||
if (index > the.index) {
|
||||
// next
|
||||
the.transfer[5].show().animate({
|
||||
top: -the.height
|
||||
}, opts.speed, function () {
|
||||
$(this).css({
|
||||
top: 0
|
||||
});
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
|
||||
the.transfer[5].show().css('top', -the.height).animate({
|
||||
top: 0
|
||||
}, opts.speed, function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
// 翻页
|
||||
'page': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
if (index > the.index) {
|
||||
the.transfer[0].show()
|
||||
.children('.vui-slide-grid')
|
||||
.css({
|
||||
opacity: 0
|
||||
})
|
||||
.each(function (i) {
|
||||
var x = i % opts.gridTdX;
|
||||
var y = Math.floor(i / opts.gridTdX);
|
||||
var delay = ((y + 1) / opts.gridTdY + (x + 1) / opts.gridTdX) / 2;
|
||||
delay = opts.speed / 3 * 2 * delay;
|
||||
$(this).delay(delay).animate({
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
})
|
||||
.last()
|
||||
.queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
the.transfer[0]
|
||||
.show()
|
||||
.children('.vui-slide-grid')
|
||||
.css({
|
||||
opacity: 0
|
||||
})
|
||||
.each(function (i) {
|
||||
var x = i % opts.gridTdX;
|
||||
var y = Math.floor(i / opts.gridTdX);
|
||||
var delay = 1 - (y / opts.gridTdY + x / opts.gridTdX) / 2;
|
||||
delay = opts.speed / 3 * 2 * delay;
|
||||
$(this).delay(delay).animate({
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
})
|
||||
.first()
|
||||
.queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
// 圆圈
|
||||
'circle': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
|
||||
the.transfer[0].show()
|
||||
.children('.vui-slide-grid')
|
||||
.css({
|
||||
opacity: 0,
|
||||
// margin:40,
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderRadius: '50%'
|
||||
})
|
||||
.each(function (i) {
|
||||
var $this = $(this);
|
||||
var x = i % opts.gridTdX;
|
||||
var y = Math.floor(i / opts.gridTdX);
|
||||
var delay = ((y + 1) / opts.gridTdY + (x + 1) / opts.gridTdX) / 2;
|
||||
delay = opts.speed / 3 * 2 * delay;
|
||||
$this.css({
|
||||
marginLeft: parseInt($this.data('width')) / 2,
|
||||
marginTop: parseInt($this.data('height')) / 2,
|
||||
backgroundPositionX: -(parseInt($this.data('imgLeft')) + parseInt($this.data('width')) / 2),
|
||||
backgroundPositionY: -(parseInt($this.data('imgTop')) + parseInt($this.data('height')) / 2)
|
||||
});
|
||||
$this.animate({
|
||||
opacity: 0.6,
|
||||
marginLeft: 0,
|
||||
marginTop: 0,
|
||||
backgroundPositionX: -parseInt($this.data('imgLeft')),
|
||||
backgroundPositionY: -parseInt($this.data('imgTop')),
|
||||
width: $this.data('width'),
|
||||
height: $this.data('height'),
|
||||
// borderRadius:0
|
||||
}, opts.speed / 3 * 2, 'linear').animate({
|
||||
opacity: 1,
|
||||
borderRadius: 0
|
||||
}, opts.speed / 3, 'linear');
|
||||
})
|
||||
.last()
|
||||
.queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
// 横向卷帘
|
||||
'rollingX': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
if (index > the.index) {
|
||||
the.transfer[1].show().children('.vui-slide-grid').css({
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdX * (i + 1);
|
||||
$(this).delay(delay).animate({
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).last().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
the.transfer[1].show().children('.vui-slide-grid').css({
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdX * (opts.gridOdX - i);
|
||||
$(this).delay(delay).animate({
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).first().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 纵向卷帘
|
||||
'rollingY': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
if (index > the.index) {
|
||||
the.transfer[2].show().children('.vui-slide-grid').css({
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdY * (i + 1);
|
||||
$(this).delay(delay).animate({
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).last().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
the.transfer[2].show().children('.vui-slide-grid').css({
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdY * (opts.gridOdY - i);
|
||||
$(this).delay(delay).animate({
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).first().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 横向百叶窗
|
||||
'blindsX': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
if (index > the.index) {
|
||||
the.transfer[1].show().children().css({
|
||||
width: 0,
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var $this = $(this);
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdX * (i + 1);
|
||||
$this.delay(delay).animate({
|
||||
width: $this.data('width'),
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).last().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
the.transfer[1].show().children().css({
|
||||
width: 0,
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var $this = $(this);
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdX * (opts.gridOdX - i);
|
||||
$this.delay(delay).animate({
|
||||
width: $this.data('width'),
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).first().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 纵向百叶窗
|
||||
'blindsY': function (index) {
|
||||
var the = this,
|
||||
opts = the.options;
|
||||
if (index > the.index) {
|
||||
the.transfer[2].show().children().css({
|
||||
height: 0,
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var $this = $(this);
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdY * (i + 1);
|
||||
$this.delay(delay).animate({
|
||||
height: $this.data('height'),
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).last().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
} else {
|
||||
the.transfer[2].show().children().css({
|
||||
height: 0,
|
||||
opacity: 0
|
||||
}).each(function (i) {
|
||||
var $this = $(this);
|
||||
var delay = opts.speed / 3 * 2 / opts.gridOdY * (opts.gridOdY - i);
|
||||
$this.delay(delay).animate({
|
||||
height: $this.data('height'),
|
||||
opacity: 1
|
||||
}, opts.speed / 3);
|
||||
}).first().queue(function () {
|
||||
the._resetTransfer(index);
|
||||
});
|
||||
}
|
||||
}
|
||||
// 幕布
|
||||
// 交叉
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue