/*封装一些公用的事件或者公用的方法*/ /*定义的一个命名空间*/ window.my = {}; /* 获取url参数 */ my.getURLCode = function (){ var search = location.search.length > 0 ? location.search.substring(1) : '', args = {}, items = search.length ? search.split('&') : [], item = null, name = null, value = null, i = 0, len = items.length, data = ''; for (i = 0; i < len; i++) { item = items[i].split('='); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (item.length) {args[name] = value } } return args; }, /*封装一个事件 过渡结束事件*/ my.transitionEnd = function(dom,callback){ //1.给谁加事件 //2.事件触发后处理什么业务 if(!dom || typeof dom != 'object'){ //没dom的时候或者不是一个对象的时候 程序停止 return false; } dom.addEventListener('transitionEnd', function(){ callback && callback(); }); dom.addEventListener('webkitTransitionEnd', function(){ callback && callback(); }); } //封装一个tap事件 my.tap = function(dom,callback){ if(!dom || typeof dom != 'object'){ //没dom的时候或者不是一个对象的时候 程序停止 return false; } var isMove = false; //是否滑动过 var time = 0; //刚刚触摸屏幕的事件 touchstart的触发事件 dom.addEventListener('touchstart',function(){ //记录触发这个事件的时间 time = Date.now(); //时间戳 毫秒 }); dom.addEventListener('touchmove',function(){ isMove = true; }); window.addEventListener('touchend',function(e){ //1.没有滑动过 //2.响应事件在150ms以内 要求比click要响应快 if(!isMove && (Date.now()-time)<150 ){ callback && callback(e); } //重置参数 isMove = false; time = 0; }); } /* to swiper */ function startSwiper(imageCount) { var banner = document.querySelector('.swiper-wrapper'); //轮播图大盒子 var imageBox = banner.querySelector('.swiper-wrapper .swiper-item'); //图片盒子 var pointBox = banner.querySelector('.swiper-wrapper .swiper-point'); //点盒子 var imageCount = imageCount; //页面中用来轮播的图片有5张不同的 var width = banner.offsetWidth; //图片的宽度 var points = pointBox.querySelectorAll('li'); //所有的点 //加过渡 var addTransition = function(){ imageBox.style.transition = "all 0.3s"; imageBox.style.webkitTransition = "all 0.3s";/*做兼容*/ }; //清除过渡 var removeTransition = function(){ imageBox.style.transition = "none"; imageBox.style.webkitTransition = "none"; } //定位 var setTranslateX = function(translateX){ var translateX = translateX + 375; imageBox.style.transform = "translateX("+translateX+"px)"; imageBox.style.webkitTransform = "translateX("+translateX+"px)"; } //自动轮播 定时器 无缝衔接 动画结束瞬间定位 var index = 1; var timer = setInterval(function(){ index++ ; //自动轮播到下一张 //改变定位 动画的形式去改变 transition transform translate addTransition(); //加过渡动画 // console.log(index, -index * width); setTranslateX(-index * width); //定位 }, 3000); //等过渡结束之后来做无缝衔接 my.transitionEnd(imageBox, function(){ //处理事件结束后的业务逻辑 if(index > imageCount ){ index = 1; }else if(index <= 0){ index = imageCount; } removeTransition(); //清除过渡 setTranslateX(-index * width); //定位 setPoint(); //设置底部显示当前图片对应的圆角 }); //改变当前样式 当前图片的索引 var setPoint = function(){ //清除上一次的now for(var i = 0 ; i < points.length ; i++){ points[i].className = " "; } //给图片对应的点加上样式 points[index-1].className = "now"; } /* 手指滑动的时候让轮播图滑动 touch事件 记录坐标轴的改变 改变轮播图的定位(位移css3) 当滑动的距离不超过一定的距离的时候 需要吸附回去 过渡的形式去做 当滑动超过了一定的距离 需要 跳到 下一张或者上一张 (滑动的方向) 一定的距离(屏幕的三分之一) */ //touch事件 var startX = 0; //记录起始 刚刚触摸的点的位置 x的坐标 var moveX = 0; //滑动的时候x的位置 var distanceX = 0; //滑动的距离 var isMove = false; //是否滑动过 imageBox.addEventListener('touchstart', function(e){ clearInterval(timer); //清除定时器 startX = e.touches[0].clientX; //记录起始X }); imageBox.addEventListener('touchmove',function(e){ moveX = e.touches[0].clientX; //滑动时候的X distanceX = moveX - startX; //计算移动的距离 //计算当前定位 -index*width+distanceX removeTransition(); //清除过渡 setTranslateX(-index * width + distanceX); //实时的定位 isMove = true; //证明滑动过 }); //在模拟器上模拟的滑动会有问题 丢失的情况 最后在模拟器的时候用window imageBox.addEventListener('touchend', function(e){ // 滑动超过 1/3 即为滑动有效,否则即为无效,则吸附回去 if(isMove && Math.abs(distanceX) > width/3){ //5.当滑动超过了一定的距离 需要 跳到 下一张或者上一张 (滑动的方向)*/ if(distanceX > 0){ //上一张 index --; } else{ //下一张 index ++; } } addTransition(); //加过渡动画 setTranslateX(-index * width); //定位 if(index > imageCount ){ index = 1; }else if(index <= 0){ index = imageCount; } setPoint(); //重置参数 startX = 0; moveX = 0; distanceX = 0; isMove = false; //加定时器 clearInterval(timer); //严谨 再清除一次定时器 timer= setInterval(function(){ index++ ; //自动轮播到下一张 addTransition(); //加过渡动画 setTranslateX(-index * width); //定位 },3000); }); } /*copy to clipboard*/ function toCopy(copy01,copy02,cb) { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备 window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效 var Url2=document.getElementById(copy02);//要复制文字的节点 var range = document.createRange(); // 选中需要复制的节点 range.selectNode(Url2); // 执行选中元素 window.getSelection().addRange(range); // 执行 copy 操作 var successful = document.execCommand('copy'); // 移除选中的元素 window.getSelection().removeAllRanges(); cb(); }else{ var Url2=document.getElementById(copy01);//要复制文字的节点 Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 cb() } } //window.onload = function () { // var args = my.getURLCode(); // var goods_id = args['goods_id'] || 0, // is_coupon = args['is_coupon'] || 0, // user_id = args['user_id'] || 0; // var btn = document.querySelector('.btn-wrapper .btn'); // axios.post('/api/v2/goods/tdetail', { // goods_id: goods_id, // is_coupon: is_coupon, // user_id: user_id // }) // .then(function (response) { // var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0; // var swiper = document.querySelector('.swiper-container .swiper-wrapper'), // point = document.querySelector('.swiper-wrapper .swiper-point'), // detailsWrapper = document.querySelector('.details-wrapper'), // copy_2 = document.getElementById("copy_2"), // copy_1 = document.getElementById("copy_1"); // copyName_1 = document.getElementById("copyName_1"); // copyName_2 = document.getElementById("copyName_2"); // // // console.log(swiper); // if (res.errno == 0) { // data = res.rst.data; // imgList = res.rst.data.small_img; // len = imgList.length; // if (len > 0) { // for (var i = 0; i < len; i++) { // swiperStr += '
'; // } // } // if (is_coupon == 1) { // html = '价格 '+ data.price +'
月销 '+ data.volume +'
'+ data.title +'
'; // }else{ // html = '价格 '+ data.price +'
月销 '+ data.volume +'
'+ data.title +'
'; // } // if(data.commission_price){ // var btn_yj = document.getElementsByClassName("btn2")[0].getElementsByTagName("span")[0]; // btn_yj.innerHTML = " " + data.commission_price + " 元" // } // // // copyName_2.innerHTML = data.title; // // console.log(copy_1); // copyName_1.value = data.title; // // detailsWrapper.innerHTML = html; // swiper.innerHTML = swiperStr; // var mySwiper = new Swiper ('.swiper-container', { autoplay: 3000, loop: true, pagination: '.swiper-pagination', }) // // var titleName = document.getElementsByClassName("details-wrapper")[0].getElementsByClassName("desc")[0]; // titleName.addEventListener('click', function () { // toCopy("copyName_1","copyName_2",function () { // showMsg("商品复制成功") // }); // }, false) // } // }) // .catch(function (error) { // console.log(error); // }); // // axios.post('/api/v2/adzoneCreate/h5CopyOfTheNaughtyPassword', { // goods_id: goods_id, // is_coupon: is_coupon, // user_id: user_id // }) // .then(function (response) { // var res = response.data, data = null; // if (res.errno == 0) { // data = res.rst.data; // copy_2.innerHTML = data; // // console.log(copy_1); // copy_1.value = data; // btn.addEventListener('click', function () { // // console.log('test'); //// toast.classList.add('show'); // toCopy("copy_1","copy_2",function () { // var mask = document.getElementsByClassName('mask')[0]; // mask.style.visibility='visible'; // }); //// setTimeout(function () { //// toast.classList.remove('show'); //// toast.classList.add('hide') //// }, 2000) // }, false) // } // }) // .catch(function (error) { // console.log(error); // }); //} //gxl var copyName = document.getElementsByClassName("copyName"); var copyNameArr = Array.prototype.slice.call(copyName); copyNameArr.forEach(function (item, index) { item.addEventListener('click', function () { toCopy("copyName_1","copyName_2",function () { window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon" }); }, false) }) /** * [showMsg 提示各种错误信息,3s后消失] */ function showMsg(msg) { var msgBox = document.getElementsByClassName('alert-info')[0]; msgBox.getElementsByTagName("p")[0].innerHTML=msg; msgBox.style.display="block"; setTimeout(function() { msgBox.style.display="none"; }, 1500); }