网页设置引导收藏按钮

最新推荐文章于 2023-09-16 10:07:16 发布

原创最新推荐文章于 2023-09-16 10:07:16 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

jq 专栏收录该内容

1 篇文章

订阅专栏

博主开始学习前端，记录制作引导收藏按钮的过程。项目要求不同系统显示不同引导内容，打开页面定时展示信息且可主动关闭。动手时，先设置固定提示框，用jq判断系统更换图片地址，还涉及不同端的水平居中问题，最后控制图片展示和消失时间及主动关闭。

最近开始弄一些前端的东西，边学习边记录吧；
项目要求制作一个引导收藏的按钮
需求：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");
        })
    });