最近接手了王总的一个.NET目,做着还挺有感觉,之前学过的知识又重拾起来了,收获很大!今天做的是前端的一个功能,要实现图片的滚动效果。之前没有做过类似的,所以查阅了很多资料,最终拼凑出来了,给大家分享一下。。
因为是一个动态效果,所以首先要做一个JS
(function( $ ) {
$.fn.promptumenu = function(options) {
// Here goes
var settings = $.extend({
'columns': 3,
'rows': 4,
'direction': 'horizontal',
'width': 'auto',
'height': 'auto',
'duration': 500,
'pages': true,
'showPage': true,
'inertia': 200
}, options);
return this.each(function(){
var $this = $(this);
var properties;
var cursor = {
x:0,
y:1,
page:1
};
var cells = {
'width': 0,
'height': 0,
'pages': 1,
'current_page': 1
};
var methods = {
//navigating to a specific page
go_to: function(index, easing, webkit){
if (easing === undefined){
easing = 'swing';
}
if(webkit === undefined){
webkit = false;
}
var anim, anim_css;
if(settings.direction == 'vertical'){
anim = {'top': (index - 1) * properties.height * (-1)};
anim_css = {'-webkit-transform': 'translate3d(0px, ' + ((index - 1) * properties.height * (-1)) + 'px, 0px)'};
} else {
anim = {'left': (index - 1) * properties.width * (-1)};
anim_css = {'-webkit-transform': 'translate3d(' + ((index - 1) * properties.width * (-1)) + 'px, 0px, 0px)'};
}
if(webkit){
$this.css({
'-webkit-transition-property': '-webkit-transform',
'-webkit-transition-duration': settings.duration + 'ms',
'-webkit-transition-timing-function': 'ease-out'
});
$this.css(anim_css);
$this.data('ppos', (index - 1) * properties.width * (-1));
}
if(navigator.userAgent.indexOf("Firefox")>0){
$this.animate(anim, settings.duration, easing);
}
if(!webkit && navigator.userAgent.indexOf("Firefox")<=0){
$this.animate(anim, settings.duration, easing);
}
$this.parent('.promptumenu_window').find('.promptumenu_nav a.active').removeClass('active');
$this.parent('.promptumenu_window').find('.promptumenu_nav a:nth-child(' + (index) + ')').addClass('active');
cells.current_page = index;
},
next_page: function(){
methods.go_to(cells.current_page + 1);
},
prev_page: function(){
methods.go_to(cells.current_page - 1);
}
};
if($this.data('promptumenu')){
//This element already has promptumenu set up
console.error('You are calling promptumenu for an element more than twice. Please have a look.');
} else {
//this element hasn't been initialized yet, so we set it up
$this.data('promptumenu', true);
$this.data('ppos', 0);
//take in mind the original css properties of the element, so we can preserve it's position.
properties = {
'width': (settings.width == 'auto') ? $this.width() : settings.width,
'height': (settings.height == 'auto') ? $this.height() : settings.height,
'margin': $this.css('margin'),
'position': ($this.css('position') == 'absolute') ? 'absolute