元素移动(适用于图片,文字)
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); }); }
相关文章推荐
- 文字或图片元素在DIV中垂直居中
- 用鼠标随意的移动图片或其他元素
- 提取docx中图片,文字,表格元素
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
- Jquery之鼠标移动到图片上显示文字并且文字可以点击
- 自定义tabBar(适用于有选中图片随着移动的情况)
- Android开发经验之在图片上随意点击移动文字
- 关于在eclipse开发web时鼠标移动到图片上显示文字问题
- 使用mmit进行移动开发,如何在一行同时显示图片和文字.
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- 小菜随笔之HTML文字图片的移动
- 小代码 html 移动div 图片 文字 任意性
- Javascript控制文字移动、图片
- 文字或图片跟随鼠标移动或键盘控制图片移动实例(javascript实现)
- 鼠标移动显示 div 图片 文字效果
- CSS文字图片div元素居中方法之水平居中
- dp和px,那些不得不吐槽的故事——Android平台图片文字元素单位浅析
- 鼠标移动到某文字上然后显示图片
- 两份关于 selenium/xpath 元素定位的极品 pdf,同样适用于移动测试
- HTML基础 img标签title属性 鼠标移动到图片上时显示文字