常用方法

//去头尾空格
function trimStr(str){
　　return str.replace(/(^\s*)|(\s*$)/g,"");
}

//判断是否是微信
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}


//是否有中文
function hasChi(str){
    var reg = /[\u4e00-\u9fa5]/g;
    if(reg.test(str)){
       return true;
    }
    return false;
}
//是否都是中文
function isChi(str){
   if(/^[\u4e00-\u9fa5]*$/.test(str)){
      return true;
   }else{ return false;}
}
//是否是手机号码
function isTel(str){
   var reg = /^1[0-9]{10}$/;
   if(reg.test(str)){
     return true;
   }
   return false
}
//判断手机系统

function mobile(){
    var ua = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(ua)) {
        return "ios";
    } else if (/android/.test(ua)) {
        return "android";
    }
}

//获取url的参数值

function getParam(name){
    var rex = new RegExp(name+"=([^(&|?)=]*)");
    var arr = location.search.match(rex);
    if(arr){
        return arr[1]
    }else{
        return "";
    }
}
//判断url是否有此参数

function getParam(name){
    var rex = new RegExp(name+"=([^(&|?)=]*)");
    var arr = location.search.match(rex);
    if(arr){
        return true;
    }else{
        return false;
    }
}

//判断是否为手机

var is_mobi = navigator.userAgent.toLowerCase().match(/(ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null;

var is_mobi=navigator.userAgent.match(/AppleWebKit.*Mobile.*/);

//倒计时

var time = 3;
interval = setInterval(function(){
    time--;

    $(".pop4 .other-title").html("登录后才能领取礼包！<br>"+"正在跳转至登录…("+time+"s)");
    if(time == 0){
        clearInterval(interval);
        $(".pop4").addClass("hide");
        module.handleLogin();
    }
},1000)
$(".pop4 .other-title").html("登录后才能领取礼包！<br>"+"正在跳转至登录…("+time+"s)");

//滚动到顶部动画

$("html,body").animate({"scrollTop":0});

//ajax jsonp

$.ajax({  
　　data:{},
　　dataType:"jsonp",
　　url:"",
　　success:function(){}
})

//iframe下fixed失效的解决方法

$(parent.window).scroll(function(){
    if(getParam("sversion")){
        $(".pop").on('touchmove',function(event) { event.preventDefault(); }, false);
        var hei=264;
        $('.con').css({
        top : parseFloat($(parent.window).scrollTop())+parseFloat(hei), position:"fixed"
    });
    }
});
//音乐播放

<audio style="width: 0;height: 0;" id="m_bg_music" loop="loop" preload="auto" autoplay="autoplay" src="http://download.m.37.com/video/game/tjxs/baoming.mp3" /></audio>

var mp3=$('#m_bg_music')[0];
var isOn=true;
$(".music").on("click",function(){
    isOn=!isOn;
    if(isOn){
        $(this).removeClass("off");
        mp3.play();
    }else{
        $(this).addClass("off");
        mp3.pause();
    }
})
ios 的safari不支持autoplay
$.function(){

        mp3.play();

}
//如果ios的微信不支持

<script src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

wx.ready(function () {
    function audioAutoPlay(id){
        var audio = document.getElementById(id),
                play = function(){
                    audio.play();
                    document.removeEventListener("touchstart",play, false);
                };
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            play();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function() {
            play();
        }, false);
        document.addEventListener("touchstart",play, false);
    }
    audioAutoPlay('m_bg_music');
})
//分享到朋友圈

var api = "http://api.m.37.com/zbh5/fenxiang";
function share(setData) {
    var setData = setData || {};
    var _share = function (setData) {
        var desc = setData.desc || document.title,     // 分享描述;
                purl = setData.picUrl,                 // 分享图标;
                title = setData.title,               // 分享标题;
                slink = setData.url,                 // 分享链接;
                successA = setData.successA || function () {
                        }, // 分享给朋友：用户确认分享后执行的回调函数
                successT = setData.successT || function () {
                        }; // 分享朋友圈：用户确认分享后执行的回调函数
            var shareData = {
                        title: title,
                        desc: desc,
                        link: slink,
                        imgUrl: purl,
                        success: successA,
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    },
            // 朋友圈;
                    shareData1 = {
                        title: desc,
                        link: slink,
                        imgUrl: purl,
                        success: successT,
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    };
            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData1); // 朋友圈;

        });
    };

    $.ajax({
        url: api,
        dataType: "jsonp",
        data: {
            url: location.href
        },
        success: function (res) {
            console.log("weixin");
            wx.config({
                debug: false,
                appId: res.data.appId,
                timestamp: res.data.timestamp,
                nonceStr: res.data.nonceStr,
                signature: res.data.signature,
                jsApiList: [
                    "onMenuShareTimeline",
                    "onMenuShareAppMessage",
                    "onMenuShareQQ",
                    "onMenuShareWeibo"
                ]
            });
            _share(setData);
            return shareWx = _share; // 重写分享；
        }
    });
}

share({
    desc:"酒水已备好，福利已满仓，5月13日，我们在广州约定你",
    picUrl:"http://image.37wan.cn/tjxs/images/fen.jpg?v=2",
    title:"《罗马帝国》玩家见面会",
    url:location.href
});
//自适应代码

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />

function rePosition(){
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var ratio = width/750;
    if(width<=750){
        document.getElementsByTagName('html')[0].style.fontSize=100*ratio+"px";
    }else{
        document.getElementsByTagName('html')[0].style.fontSize="100px";
    }
}

//提示竖屏观看

function orient() {
    if (window.orientation == 90 || window.orientation == -90) {
        alert("请在竖屏下观看");
    }
    else if (window.orientation == 0 || window.orientation == 180) {
    }
}

//判断横竖屏

window.addEventListener("orientationchange", function() {
        if(window.orientation!=-0){
            if(!isPlay){
            alert("为了您的浏览体验，请在竖屏下观看")
        }
    }
});


//普通h5滑动

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: false,
    nextButton:'.arrow',
    mousewheelControl:true,
    autoHeight: true
});


<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1">
            <a href="javascript:void(0)" class="arrow"><img src="image/arrow.png" /></a>
        </div>
        <div class="swiper-slide slide2">
            <a href="javascript:void(0)" class="arrow"><img src="image/arrow.png" /></a>
        </div>
　　</div>
</div>

//3个swiper轮播

var swiperB=new Swiper('.slideB', {
    loop: true,
    slidesPerView: 3,
    spaceBetween: 40,
    autoplay:3000,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
});

<div class="slideB">
    <div class="swiper-wrapper "  id="showpic">
        <div class="swiper-slide" ><img src="images/hd8.jpg"  data-src="http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/hd8.jpg"/>
            <p class="title">玩家云集—广州站</p>
        </div>
        <div class="swiper-slide" ><img src="images/hd9.jpg"  data-src="http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/hd9.jpg"/>
            <p class="title">玩家准备PK中—广州站</p>
        </div>
    </div>
    <!--左右按钮图片定义在样式swiper-button-prev，swiper-button-next中，可修改图片，大小固定为27*44px-->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
//有导航的小圆点轮播

var swiperA=new Swiper('.slideA', {
    autoplay : 3000,
    pagination: '.swiper-scrollbar',
    paginationClickable: true
});

<div class="slideA">
    <div class="swiper-wrapper">
        <div class="swiper-slide" >
            <a href="http://37.com.cn/yhjy/news/20947.html" target="_blank">
                <img src="images/kd1.jpg" />
                <p class="title">感恩有你《永恒纪元》玩家见面会广州站</p></a>

        </div>
        <div class="swiper-slide" >
            <a href="http://37.com.cn/yhjy/news/21257.html" target="_blank">
                <img src="images/kd2.png" />
                <p class="title">《永恒纪元》百日盛典嘉年华隆重举行</p>
            </a>
        </div>
    </div>
    <div class="swiper-scrollbar"></div>
</div>

//点击播放图片或视频

jQuery.extend({
    mediaShow:function(target,opt,optCss){
        var css={};
        css.cover={
            position:'fixed',
            width:'100%',
            height:'100%',
            top:'0px',
            left:'0px',
            backgroundColor:'rgba(0,0,0,.5)',
            '*background-color':'#000',
            '-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)',
            'filter':'alpha(opacity=50)',
            zIndex:10
        };
        css.mediaBox = {
            position:'fixed',
            backgroundColor:'#333',
            border:'3px solid black',
            'top':'50%',
            'left':'50%',
            'z-index':'1000'
        };
        css.closeBtn = {
            position:'absolute',
            width:'45px',
            height:'45px',
            font:'bold 30px/45px "Microsoft Yahei"',
            'text-align':'center',
            color:'#b38a54',
            top:'-3px',
            right:'-48px',
            backgroundColor:'black',
            cursor:'pointer'
        };
        css.desc = {
            position:'absolute',
            height:'28px',
            width:'100%',
            'left':'0px',
            backgroundColor:'rgba(0,0,0,.5)',
            '*background-color':'#000',
            '-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)',
            'filter':'alpha(opacity=50)',
            'text-align':'center',
            'color':'#f4f4f4',
            font:'bold 16px/28px "Microsoft Yahei"'
        };

        var def = {
            mediaType:'image',    //vedio 或者 image
            dataAttr:'data-src',   //取得数据的属性
            showDesc:false       //是否显示媒体描述
            //descAttr:'title'    //取得标题的属性
        };

        var setting={};
        var settingCss = {};

        $.extend(setting,def,opt);
        $.extend(settingCss,css,optCss);



        target = $(target);

        function showImg(){
            target.click(function(){
                var thisTarget = $(this);

                var cover = $('<div />').css(settingCss.cover);
                var mediaBox = $('<div />').css(settingCss.mediaBox);
                var closeBtn = $('<div />').css(settingCss.closeBtn).text('X');

                var img = new Image();
                img.onload = function(){

                    cover.appendTo('body');

                    var imgW = img.width;
                    var imgH = img.height;

                    if(parseInt(img.width,10) > 800){
                        var r = 800 / parseInt(img.width);
                        img.style.width = '800px';
                        img.style.height = (parseInt(img.height,10) * r)+'px';
                    }else{
                        img.style.width = imgW + 'px';
                        img.style.height = imgH + 'px';
                    }

                    img = $(img);
                    var ml = parseInt(img.css('width'),10) / 2+parseInt(mediaBox.css('border-width'),10);
                    var mt = parseInt(img.css('height'),10) / 2+parseInt(mediaBox.css('border-width'),10);

                    mediaBox.append(img).append(closeBtn).css({
                        'margin-left':-ml +'px',
                        'margin-top':-mt + 'px'
                    });

                    if(setting.showDesc){
                        var descBox = $('<div />').css(settingCss.desc).css('bottom','0px');
                        descBox.text(thisTarget.attr('title')).appendTo(mediaBox);
                    }

                    mediaBox.appendTo('body').fadeIn();
                }
                if(thisTarget.attr(setting.dataAttr)){
                    img.src = thisTarget.attr(setting.dataAttr);
                }

                closeBtn.click(function(){
                    cover.remove();
                    mediaBox.remove();
                });
                cover.click(function(){
                    mediaBox.remove();
                    cover.remove();
                });
            });
        }

        function showVedio(){
            target.click(function(){

                var thisTarget = $(this);

                var url = thisTarget.attr(setting.dataAttr);
                var title = thisTarget.attr('title');
                if(!url){return false;}

                var cover = $('<div />').css(settingCss.cover);
                var mediaBox = $('<div />').css(settingCss.mediaBox);
                var closeBtn = $('<div />').css(settingCss.closeBtn).text('X');
                var vedio = '<object'+
                    'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '+
                    'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" '+
                    'width="800px" '+
                    'height="450px"> '+
                    '<param name="movie" value="http://image.37wan.cn/common/images/flvplayer.swf"> '+
                    '<param name="quality" value="high"> '+
                    '<param name="allowFullScreen" value="true"> '+
                    '<param name="wmode" value="Transparent"> '+
                    '<embed '+
                    'src="http://image.37wan.cn/common/images/flvplayer.swf" '+
                    'allowfullscreen="true" '+
                    'flashvars="vcastr_file='+ url +'&IsAutoPlay=1&IsShowTime=1&vcastr_title='+ title +'" '+
                    'quality="high" '+
                    'pluginspage="http://www.macromedia.com/go/getflashplayer" '+
                    'type="application/x-shockwave-flash" '+
                    'width="800px" '+
                    'height="450px" '+
                    'wmode="Transparent"> '+
                    '</object>';

                mediaBox.append(vedio);
                cover.appendTo('body');
                mediaBox.append(closeBtn).appendTo('body').css({
                    displaly:'none'
                });

                if(setting.showDesc){
                    var descBox = $('<div />').css(settingCss.desc).css('top','0px');
                    descBox.text(thisTarget.attr('title')).appendTo(mediaBox);
                }

                var ml = parseInt(mediaBox.width(),10) / 2;
                var mt = parseInt(mediaBox.height(),10) / 2;
                mediaBox.css({
                    'margin-left':-400 +'px',
                    'margin-top':-226.5 + 'px'

                }).fadeIn();


                closeBtn.click(function(){
                    cover.remove();
                    mediaBox.remove();
                });
                cover.click(function(){
                    mediaBox.remove();
                    cover.remove();
                });
            });
        }


        switch(setting.mediaType){
            case 'image':{
                showImg();
                break;
            }
            case 'vedio':{
                showVedio();
                break;
            }
            default :{
                showImg();
            }
        }
    }
});

$.mediaShow("#media1 .mm",{mediaType:"vedio",showDesc:!0,auto:!1},e);
$.mediaShow("#showpic img",{showDesc:!0,auto:!1},e);

<a data-src="http://download.m.37.com/video/game/yhjy/gz.mp4" title="我的纪元感恩有你见面会广州站" class="mm">
    <img src="images/m1.jpg" width="100%"/>
    <a class="play1"  ></a>
    <p class="title">我的纪元感恩有你见面会广州站</p>
</a>

<div class="swiper-wrapper "  id="showpic">
    <div class="swiper-slide" ><img src="images/hd1.jpg" data-src="http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/hd11.jpg"/>
        <p class="title">PK战队合影—广州站</p>
    </div>
</div>

posted @ 2017-04-19 14:09 乐莫乐兮新相知阅读(184) 评论(0) 收藏举报

刷新页面返回顶部

hawtree

常用方法

公告