<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    分享 前端开发 常用代码片段

                    分享 :

                    一、鼠标滚轮

                    
                    $('#content').on("mousewheel DOMMouseScroll", function (event) {
                    
                        // chrome & ie || // firefox
                    
                        var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
                    
                            (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));  
                    
                        
                    
                        if (delta > 0) {
                    
                            console.log('mousewheel top');
                    
                        } else if (delta < 0) {
                    
                            console.log('mousewheel bottom');
                    
                        }
                    
                    });
                    
                    

                    二、鼠标坐标

                    1、JavaScript实现

                    
                    X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
                    
                    
                    
                    
                    function mousePosition(ev){
                    
                        if(ev.pageX || ev.pageY){
                    
                            return {x:ev.pageX, y:ev.pageY};
                    
                        }
                    
                        return {
                    
                            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    
                            y:ev.clientY + document.body.scrollTop - document.body.clientTop
                    
                        };
                    
                    }
                    
                     
                    
                    function mouseMove(ev){
                    
                        ev = ev || window.event;
                    
                        
                    
                        var mousePos = mousePosition(ev);
                    
                        
                    
                        document.getElementById('xxx').value = mousePos.x;
                    
                        document.getElementById('yyy').value = mousePos.y;
                    
                    }
                    
                    document.onmousemove = mouseMove;
                    
                    

                    2、jQuery实现

                    
                    $('#ele').click(function(event){
                    
                        //获取鼠标在图片上的坐标
                    
                        console.log('X:' + event.offsetX+' Y:' + event.offsetY);
                    
                        
                    
                        //获取元素相对于页面的坐标
                    
                        console.log('X:'+$(this).offset().left+' Y:'+$(this).offset().top);
                    
                    });
                    
                    

                    三、禁止移动端浏览器页面滚动

                    1、HTML实现

                    
                    <body ontouchmove="event.preventDefault()" >
                    
                    

                    2、JavaScript实现

                    document.addEventListener('touchmove', function(event) {
                    
                        event.preventDefault();
                    
                    });
                    
                    

                    四、阻止默认行为

                    
                    // JavaScript
                    
                    document.getElementById('btn').addEventListener('click', function (event) {
                    
                        event = event || window.event;
                    
                     
                    
                        if (event.preventDefault){
                    
                            // W3C
                    
                            event.preventDefault();
                    
                        } else{
                    
                            // IE
                    
                            event.returnValue = false;
                    
                        }
                    
                    }, false);
                    
                     
                    
                    // jQuery
                    
                    $('#btn').on('click', function (event) {
                    
                        event.preventDefault();
                    
                    });
                    
                    

                    五、阻止冒泡

                    // JavaScript
                    
                    document.getElementById('btn').addEventListener('click', function (event) {
                    
                        event = event || window.event;
                    
                     
                    
                        if (event.stopPropagation){
                    
                            // W3C
                    
                            event.stopPropagation();
                    
                        } else{
                    
                            // IE
                    
                            event.cancelBubble = true;
                    
                        }
                    
                    }, false);
                    
                    
                    
                    
                    // jQuery
                    
                    $('#btn').on('click', function (event) {
                    
                        event.stopPropagation();
                    
                    });
                    
                    
                    
                    

                    六、检测浏览器是否支持svg

                    
                    function isSupportSVG() {
                    
                        var SVG_NS = 'http://www.w3.org/2000/svg';
                    
                        return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
                    
                    }
                    
                     
                    
                    console.log(isSupportSVG());
                    
                    
                    

                    七、检测浏览器是否支持canvas

                    
                    function isSupportCanvas() {
                    
                        if(document.createElement('canvas').getContext){
                    
                            return true;
                    
                        }else{
                    
                            return false;
                    
                        }
                    
                    }
                    
                     
                    
                    console.log(isSupportCanvas());
                    
                    
                    

                    八、检测是否是微信浏览器

                    
                    function isWeiXinClient() {
                    
                        var ua = navigator.userAgent.toLowerCase();
                    
                        if (ua.match(/MicroMessenger/i)=="micromessenger") {
                    
                            return true;
                    
                        } else {
                    
                            return false;
                    
                        }
                    
                    }
                    
                     
                    
                    alert(isWeiXinClient());
                    
                    
                    

                    九、检测是否移动端及浏览器内核

                    
                    var browser = {
                    
                        versions: function() {
                    
                            var u = navigator.userAgent;
                    
                            return {
                    
                                trident: u.indexOf('Trident') > -1, //IE内核
                    
                                presto: u.indexOf('Presto') > -1, //opera内核
                    
                                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    
                                gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
                    
                                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
                    
                                ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
                    
                                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
                    
                                iPhone: u.indexOf('iPhone') > -1 , //iPhone
                    
                                iPad: u.indexOf('iPad') > -1, //iPad
                    
                                webApp: u.indexOf('Safari') > -1 //Safari
                    
                            };
                    
                        }
                    
                    }
                    
                     
                    
                    if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
                    
                        alert('移动端');
                    
                    }
                    
                    
                    

                    十、检测是否电脑端/移动端

                    
                    var browser={
                    
                        versions:function(){
                    
                            var u = navigator.userAgent, app = navigator.appVersion;
                    
                            var sUserAgent = navigator.userAgent;
                    
                            return {
                    
                            trident: u.indexOf('Trident') > -1,
                    
                            presto: u.indexOf('Presto') > -1,
                    
                            isChrome: u.indexOf("chrome") > -1,
                    
                            isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
                    
                            isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
                    
                            webKit: u.indexOf('AppleWebKit') > -1,
                    
                            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                    
                            mobile: !!u.match(/AppleWebKit.*Mobile.*/),
                    
                            ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
                    
                            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    
                            iPhone: u.indexOf('iPhone') > -1,
                    
                            iPad: u.indexOf('iPad') > -1,
                    
                            iWinPhone: u.indexOf('Windows Phone') > -1
                    
                            };
                    
                        }()
                    
                    }
                    
                    if(browser.versions.mobile || browser.versions.iWinPhone){
                    
                        window.location = "http:/www.baidu.com/m/";
                    
                    }
                    
                    
                    

                    十一、检测浏览器内核

                    
                    function getInternet(){    
                    
                        if(navigator.userAgent.indexOf("MSIE")>0) {    
                    
                          return "MSIE";       //IE浏览器  
                    
                        }  
                    
                     
                    
                        if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){    
                    
                          return "Firefox";     //Firefox浏览器  
                    
                        }  
                    
                     
                    
                        if(isSafari=navigator.userAgent.indexOf("Safari")>0) {    
                    
                          return "Safari";      //Safan浏览器  
                    
                        }  
                    
                     
                    
                        if(isCamino=navigator.userAgent.indexOf("Camino")>0){    
                    
                          return "Camino";   //Camino浏览器  
                    
                        }  
                    
                        if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){    
                    
                          return "Gecko";    //Gecko浏览器  
                    
                        }    
                    
                    }
                    
                    
                    

                    文章分类

                    北京赛车玩法和赔率|官网_首页