您的位置:首页 > 其它

元素移动(适用于图片,文字)

2014-03-14 00:00 134 查看
摘要: 主要是结构-表现与行为的分离,可以通过改变页面结构和样式来通配js脚本

obj.slidePicture = function (pars) {
if (!util.isPlainObject(pars)) {
return;
}

var crea_region = $('[' + pars['creaId'] + ']'),
slide_region = crea_region.find('[r-parent]'),
slide_elems = crea_region.find('[r-child]'),
control = pars['control'],
num = pars['slideNum'],
len = slide_elems.length,
cr_w = crea_region.width(),
total_width = 0,
page = 0,
number = 0,
button = '',
className = 'on',
i,
j;

for (i = 0; i < len; i++) {
total_width += slide_elems.eq(i).width();
}

if ((len / num) > 1) {
number = Math.ceil(len / num);

for (j = 0; j < number; j++) {
page++;
if (control) {
button += '<a href="javascript:;" class="' + (j == 0 ? 'on' : '') + '" r-width="' + (total_width / len) + '" r-num="' + num + '" r-page="' + (page - 1) + '">' + page + '</a>';
} else {
button += '<a href="javascript:;" class="' + (j == 0 ? 'onUser' : '') + '" r-width="' + (total_width / len) + '" r-num="' + num + '" r-page="' + (page - 1) + '"> </a>';
className = 'onUser';
}
}
}

slide_region.width(total_width);

var _html = $('<div>', {
'class' : 'move'
}),
move;

_html.html(button);
if (crea_region.find('.move').length == 0) {
crea_region.append(_html);
move = crea_region.find('.move');
move.css('margin-left',  - (move.width() / 2));
}

//绑定事件
var moves = pars['event'] || 'click',
a_elems = crea_region.find('.move a'),
state = true;
a_elems.bind(moves, function () {
var self = $(this),
w = self.attr('r-width'),
n = self.attr('r-num'),
p = self.attr('r-page'),
sum = (p * n) * w;
//清除所有按钮状态(选中)
a_elems.removeClass(className);

//添加按钮状态(选中)
self.addClass(className);

slide_region
.stop()
.animate({
'margin-left' : -sum + 'px'
}, 500);
});

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息