js 手机端网站底部悬浮html广告代码

首先底部悬浮html 代码如下，这里因为我自己的需求，所以改成了轮播 底部悬浮代码

<!--WAP底部悬浮-->
<style>
@media screen and (max-device-width:800px){ /**WAP**/
.bottom_fixed{ position:fixed; bottom:0px; width:100%; z-index:9999;right:0;left:0}
.bottom_fixed div{ width:60px; height:20px;background-color:transparent; text-align:center; line-height:20px; right:0; top:-20px; position:absolute; cursor:pointer;}
.bottom_fixed div:hover{ background:#F66; color:#FFF}
.bottom_fixed a{text-decoration:none; color:black}
.bottom_fixed a img{ height:95px; width:100%;}
}
@media screen and (min-width:800px){ /**PC**/
.bottom_fixed{ display:none; position:fixed; bottom:0px; left:50%; margin-left:-475px; z-index:9999;}
.bottom_fixed div{ width::50px; height:24px; text-align:center; line-height:24px;background-color:transparent; right:0; top:-24px; position:absolute; cursor:pointer}
.bottom_fixed div:hover{ background:#F66; color:#FFF}
.bottom_fixed a{text-decoration:none; color:black}
.bottom_fixed a img{ height:75px; width:950px;}
}
</style>
<div class="bottom_fixed">
<a href="链接地址" rel="nofollow" target="_blank"><img id="sjdfjkjimg" src="图片链接地址"><div>不再显示</div></a>
</div>

<script>
var imgs =["1.jpg", "2.jpg", "3.jpg"];    //（设定想要显示的图片）
var x = 0;        
function time1(){

x++;    
x=x%3;         //         超过2则取余数，保证循环在0、1、2之间
var  imgurl="图片链接地址"+imgs[x];
document.getElementById("sjdfjkjimg").src  =imgurl;
console.log(imgurl)
}
setInterval('time1()',5000);  
</script>

 

不需要html 标记 ， 底部悬浮js 说白了就是通过 js 去页面动态生成 div 样式的 ，这里为了方便修改 直接 用html 改好

然后我们可以通过将html 代码进行Unicode转码混淆 后通过js 输出就行了，还可以达到加密的作用（目前我是用的下面这个地址的工具进行Unicode转码的  http://htmljiajiemi.duoshitong.com）

Unicode转码后 新建一个js 文件把最后转码的字符串 替换掉下面的words 字符串 然后引用到网页里就可以了

;(function(){var Words ="把生成的Unicode符串替换掉这里";if (/(iPhone|iPad|iPod|iPad|iOS|Android)/i.test(navigator.userAgent)){var NewWords = unescape(Words);document.write(NewWords);}})(window,document);

最终结果就是这样了可以实现效果了，希望对你有帮助