网页设置引导收藏按钮

最近开始弄一些前端的东西，边学习边记录吧；
项目要求制作一个引导收藏的按钮
需求：1.不同系统显示不同的引导收藏内容
2.打开页面定时展示信息，几秒钟后关闭信息
3.可主动关闭信息
动手：

一、先设置一个固定位置显示的提示框：

<style>
    .footer{
        height: 40px;
        width: 100%;
        position: fixed;
        bottom: 0;

    }
    #ts{
        position:absolute;
        left:28%;
    }
    #ts img{
        width:150px;
        height: 30px;
        z-index: 9999999999999;
    }

</style>
<div class="footer">
    <div id="ts" class="toolbarframe bigad_close" style="display:none;">
        <img id="pic" src=""/>
    </div>
</div>

二、jq判断系统更换图片地址以达成不同系统显示不同的图片

 $(function () {

        var u = navigator.userAgent,app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        var div = document.getElementById("ts");
        if (isAndroid) {
            document.getElementById('pic').src = "__STATIC__/home/defaults/test/img/az.png";
        }else if (isIOS) {
            document.getElementById('pic').src = "__STATIC__/home/defaults/test/img/ts.png";
        }else {
            document.getElementById('pic').src = "__STATIC__/home/defaults/test/img/pc.png";
            div.style.setProperty('left','50%');
        }
    });

ps: 因为定位的问题 所以在pc端和移动端还有一点区别就是关于div img 的水平居中问题 因为进度问题 我没有搞 这里直接用js控制magin- left 了 （后面要好好学一下 关于css定位这里）；

三、控制图片展示和消失的时间和 主动关闭图片

    $(function(){
        setTimeout('$(".toolbarframe").show("slow")',1000);
        setTimeout('$(".toolbarframe").hide("slow")',15000);
        $(".bigad_close").click(function(){
            $(".toolbarframe").hide("slow");
        })
    });