常用方法

//去头尾空格
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  乐莫乐兮新相知  阅读(181)  评论(0编辑  收藏  举报