iframe里是另一个网页,所以swiper检测不到内页的事件。

方法一:直接设置样式  pointer-events: none; 但iframe里面所有事件将不能点击包括 a链接

 

方法二:自己动手写内页事件检测,然后改变swiper,这个一定是在js的同源策略下才能进行。直接上代码...

var self = this;
            var isMove,pageX,poor,moveArr;
            var iframe = document.querySelector('#myiframe');
            var wrap = $('#shebao').closest('.swiper-wrapper');
            var num ;

            iframe.onload = function(){
                var doc = iframe.contentWindow.document;
                self.height = $('#shebao').parent().height();

                doc.addEventListener("touchstart",function(e){
                    isMove = true;
                    moveArr = [];
                    pageX = e.targetTouches[0].pageX;
                    moveArr.unshift(pageX);
                    //获取的transform值,matrix(1, 0, 0, 1, -1280, 0)
                    num = wrap.css('transform').split(',')[4]; 
                });
                doc.addEventListener("touchmove",function(e){
                    if(!isMove) return;
                    e.preventDefault();
                    
                    /*大概是iframe的原因,touch事件在移动的时候会产生两条不一样的数据,从而导致在滑动的时候产生抖动现象。
                      从而添加一个数组moveArr进行当前值和历史值进行对比,去掉多余数据
                    */
                    //当往左滑的时候,
                    if(pageX > e.targetTouches[0].pageX){
                        //历史值应该大于当前值,否则return
                        if(moveArr[0] < e.targetTouches[0].pageX){
                            return;
                        }
                    }
                    //当右滑的时候,
                    if(pageX < e.targetTouches[0].pageX){
                        //历史值应该小于当前值,否则return
                        if(moveArr[0] > e.targetTouches[0].pageX){
                            return;
                        }
                    }
                    //往数组头部插入数据
                    moveArr.unshift(e.targetTouches[0].pageX);
                    poor = pageX - e.targetTouches[0].pageX;
                    wrap.css('transform','translate3d('+(num-poor)+'px,0px,0px)');
                })

                doc.addEventListener("touchend",function(e){
                    isMove = false;
                    poor = pageX - e.changedTouches[0].pageX;

                    //当移动超过设定值后进行swiper的上一页下一页操作
                    if(Math.abs(poor)>50){
                        if(poor < 0 ){
                            window.pages.slidePrev();
                        }else{
                            window.pages.slideNext();
                        }
                    }else{
                        //复原当前位置
                        wrap.css('transform','translate3d('+num+'px,0px,0px)');
                    }
                    
                });
            }
        }

 

posted @ 2016-12-14 17:45 冰vs焰 阅读(6266) 评论(3) 推荐(1) 编辑
摘要: sublime text3 package Control 的安装 常用插件: Emmet JavaScript Completions //原生JS智能提示 SideBarEnhancements //增强左边侧边栏 SublimeServer //搭建本地服务器 ChineseLocalizat 阅读全文
posted @ 2016-05-24 09:36 冰vs焰 阅读(184) 评论(0) 推荐(0) 编辑
摘要: 本文转自:http://www.cnblogs.com/xusir/archive/2012/12/24/2830957.html 成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作。 输入help可以看到基本操作命令: 数据库常用命令: Collection聚 阅读全文
posted @ 2016-04-20 16:25 冰vs焰 阅读(186) 评论(0) 推荐(0) 编辑
摘要: String.prototype.format=function(data){ var str=this; if(data && typeof(data)=='object'){ for(var item in data){ str=str.replace('{'+item+'}',data[ite 阅读全文
posted @ 2016-02-24 15:42 冰vs焰 阅读(269) 评论(0) 推荐(0) 编辑
摘要: 代码实现:var data=[{"tag":"ul","attr":{"class":"ban_nav","id":"ban"}, "child":[ {"tag":"li", "child":[ ... 阅读全文
posted @ 2015-08-31 16:52 冰vs焰 阅读(214) 评论(0) 推荐(0) 编辑
摘要: 1 function animatePic(){ 2 var box=$(".list-img"); 3 var item=box.find(".item-img"); 4 var left; 5 ... 阅读全文
posted @ 2014-10-24 09:57 冰vs焰 阅读(247) 评论(0) 推荐(0) 编辑
摘要: 代码量很少,注意要取消冒泡 e.stopPropagation(); 这是第一行 ... 阅读全文
posted @ 2014-07-07 10:51 冰vs焰 阅读(1439) 评论(0) 推荐(0) 编辑
摘要: var SHAKE_THRESHOLD = 3000; var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; var num=0; ... 阅读全文
posted @ 2014-06-14 10:53 冰vs焰 阅读(194) 评论(0) 推荐(0) 编辑
摘要: 1 2 3 4 5 全屏滚动代码测试 6 18 19 84 85 86 87 1 88 2 89 ... 阅读全文
posted @ 2014-05-27 11:27 冰vs焰 阅读(290) 评论(0) 推荐(0) 编辑
摘要: &&和||在JQuery源代码内尤为使用广泛,由于本人没有系统的学习js,所以只能粗略的自我理解出来,希望大家指点下。粗略理解如下:a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;&& 优先级高于 ||如下: 代码复制代码 代码如下:alert((1 && 3 || 0) 阅读全文
posted @ 2013-10-11 09:15 冰vs焰 阅读(288) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示