微信小程序商城制作_JS工厂模式开发实践案例分

摘要: JS加工厂方式开发设计实践活动实例剖析 -Zhong 本文关键详细介绍了JS加工厂方式开发设计,融合实际实践活动实例方式剖析了根据javascript加工厂方式完成的滚屏作用有关实际操作方...

JS工厂模式开发实践案例分析     -Zhong   这篇文章主要介绍了JS工厂模式开发,结合具体实践案例形式分析了基于javascript工厂模式实现的轮播功能相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS工厂模式开发。分享给大家供大家参考,具体如下:

基于JS工厂模式的H5应用,实现了轮播图功能与滑屏功能,并且实现了文字大小的自适应功能,基于SASS样式开发。

核心的JS代码如下:

index.js

define(function(){
 var self = null,
 start = null,
 move = null,
 end = null,
 handle = null,
 timer = null,
 left = 0,
 x = 0,
 startX = 0,
 baseWidth = window.screen.width, // 移动设备屏幕的宽度
 baseSize = baseWidth * 0.2, // 滑动切换阈值
 banner = document.getElementById("banner"), // 获取Banner
 center = document.getElementById("center"), // 获取center
 ulList = document.getElementsByTagName("ul"),
 incBanner = document.getElementById('incBanner'),
 incCenter = document.getElementById('incCenter');
 var app = {
 init : function(){
 self = this;
 start = self.touchStart;
 move = self.touchMove;
 end = self.touchEnd;
 handle = self.addHandler;
 self.pageInit();
 self.bindTouch(banner, start, move, end);
 self.bindTouch(center, start, move, end);
 self.shiftBanner(banner);
 pageInit : function(){
 for (var i=0; i ulList.length; i++) {
 ulList[i].style.left = 0 + 'px';
 ulList[i].style.width = 3 * baseWidth + 'px';
 bindTouch : function(elem, handler1, handler2, handler3){
 handle(elem, "touchstart", handler1);
 handle(elem, "touchmove", handler2);
 handle(elem, "touchend", handler3);
 touchStart : function(event){
 var touch = event.touches[0];
 left = parseInt(this.style.left);
 x = 0;
 startX = 0;
 startX = touch.pageX; //刚触摸时的坐标
 if(this == banner){
 timer = clearInterval(timer);
 touchMove : function(event){ //滑动过程
 var touch = event.touches[0]; 
 x = startX - touch.pageX; //滑动的距离 
 this.style.left = left - x + 'px'; 
 touchEnd : function(event){ //手指离开屏幕
 self.move(this);
 self.moveAdjust(this);
 self.indicate(this);
 if(this == banner){
 self.shiftBanner(banner);
 move : function(elem){
 var leftTmp = left; //缓存touchMove结束时的滑动位置
 elem.style.left = left;
 if (x baseSize) {
 elem.style.left = left - baseWidth + 'px';
 } else if (x -baseSize) {
 elem.style.left = left + baseWidth + 'px';
 } else {
 elem.style.left = leftTmp + 'px';
 moveAdjust : function(elem){
 left = parseInt(elem.style.left)
 if (left -baseWidth * 2) {
 left = -baseWidth * 2;
 elem.style.left = left + 'px';
 if (left 0) {
 left = 0;
 elem.style.left = left + 'px';
 x = 0; 
 indicate : function(elem){
 if (elem == banner) {
 self.activeClass(incBanner);
 }else if (elem == center) {
 self.activeClass(incCenter);
 activeClass : function(elem){
 var len = elem.children.length;
 for (var i = 0; i len; i++) {
 elem.children[i].className=" ";
 if (left == 0) {
 elem.children[0].className = "active";
 } else if (left == (-baseWidth)) {
 elem.children[1].className = "active";
 }else if (left == (-2*baseWidth)) {
 elem.children[2].className = "active";
 shiftBanner : function(elem){
 var t = new Date();
 var tmpLeft = parseInt(elem.style.left);
 timer = setInterval(function(){
 if ((tmpLeft == 0) || (tmpLeft == -baseWidth)) {
 elem.style.left = tmpLeft - baseWidth + 'px';
 } else if (tmpLeft == -2*baseWidth) {
 elem.style.left = 0 + 'px';
 tmpLeft = parseInt(elem.style.left);
 left = tmpLeft;
 // console.log(elem.style.left);
 // console.log(t);
 self.indicate(banner);
 },4000);
 addHandler : function(element, type, handler){
 if (element.addEventListener) {
 element.addEventListener(type, handler, true);
 } else if (element.attachEvent) {
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 return {
 init : function(){
 app.init();
 

可以在浏览器中打开: policy

项目源码见GitHub:

更多关于JavaScript相关内容还可查看本站专题:《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站