JS代码实现电脑和手机展示不同图片

作者 : admin 本文共2467个字,预计阅读时间需要7分钟 发布时间: 2021-01-15 共132人阅读

JS如何实现图片广告在电脑PC端和手机移动端显示不同图片,这样就可以实现显示不同广告也可以更好的兼容页面布局。

可以实现,电脑PC端显示广告图片,手机端不显示广告图片。
也可实现,电脑PC端不显示图片,手机端显示广告图片

1.实现电脑端跟手机端显示不同广告图片的代码:

var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.toLowerCase().indexOf('android') > -1 ,
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1
};
}()
}
if (!(browser.versions.android || browser.versions.ios || browser.versions.iPhone || browser.versions.iPad)){
document.writeln("<a href=\'链接地址\'><img style=\'width:100%;height:100px;\' alt=\'\' src=\'电脑展示图片地址\'></a>");
}else{
document.writeln("<a href=\'链接地址\'><img style=\'width:100%;height:100px;\' alt=\'\' src=\'手机展示图片地址\'></a>");
}

2.电脑端显示广告图片,手机WAP端不显示广告图片的代码:

var browser={    
    versions:function(){            
        var u = navigator.userAgent, app = navigator.appVersion;            
        return {                
          trident: u.indexOf('Trident') > -1,               
          presto: u.indexOf('Presto') > -1,                
          webKit: u.indexOf('AppleWebKit') > -1,              
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,               
          mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),          
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),                 
          android: u.toLowerCase().indexOf('android') > -1 ,   
          iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,               
          iPad: u.indexOf('iPad') > -1,               
          webApp: u.indexOf('Safari') == -1           
        };
        }()
}
if (!(browser.versions.android || browser.versions.ios || browser.versions.iPhone || browser.versions.iPad)){
 
document.writeln("<a href=\'链接地址\'><img style=\'width:100%;height:100px;\' alt=\'\' src=\'电脑展示图片地址\'></a>");
}

3.实现电脑端不显示广告图片,手机WAP端显示广告图片的代码:

var browser={    
    versions:function(){            
        var u = navigator.userAgent, app = navigator.appVersion;            
        return {                
          trident: u.indexOf('Trident') > -1,               
          presto: u.indexOf('Presto') > -1,                
          webKit: u.indexOf('AppleWebKit') > -1,              
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,               
          mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),          
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),                 
          android: u.toLowerCase().indexOf('android') > -1 ,   
          iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,               
          iPad: u.indexOf('iPad') > -1,               
          webApp: u.indexOf('Safari') == -1           
        };
        }()
}
if (browser.versions.android || browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){
 
document.writeln("<a href=\'链接地址\'><img style=\'width:100%;height:100px;\' alt=\'\' src=\'手机展示图片地址\'></a>");
}

 

1. 本站所有源码、模板、插件等其他资源,都不包含技术服务请大家谅解!
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
7. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考退款规则!

360模板吧 » JS代码实现电脑和手机展示不同图片

发表评论