仿手机顶部弹出QQ/微信消息JS_项目_纤云聚合

仿手机顶部弹出QQ/微信消息JS

打赏 user4 ¥2.99
微信扫描即可打赏
阿里云好贵
网站需要运营
给点小费以表支持

仿手机顶部弹出QQ消息JS,目前绝大部门整形美容网站都在使用,效果比较常见。也有修改成微信图标的,反正你懂得。代码奉上,记得打赏哦。

<script>
function swt2(){
    var sHTML = [
        '<style type="text/css">',
        '.topTips{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:fixed;left:0;top:0;width:100%;z-index:999999;-webkit-perspective:600px;perspective:600px;}',
        '.tipsInner {font-family:"Microsoft YaHei";border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-radius:5px;-webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.5);box-shadow:0 2px 10px rgba(0, 0, 0, 0.5);background:#fff;-webkit-transform-origin:0px 0px;transform-origin:0px 0px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0;}',
        '.tipsInner a{text-decoration:none;display:block;position:relative;padding-left:50px;color:#111;}',
        '.tipsInner img{position:absolute;left:8px;top:50%;margin-top:-17px;width:36px;height:auto;padding-right:5px;background:#fff;}',
        '.tipsInner dl{margin:0;padding:10px 5px;border-left:1px solid #ccc;}',
        '.tipsInner dt{font-weight:bold;line-height:1em;font-size:13px;}',
        '.tipsInner dd{margin:0;line-height:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;}',
        '.showTip{visibility:visible;}',
        '.showTip .tipsInner{-webkit-transform-origin:0px 0px;transform-origin:0px 0px;-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1;}',
        '.hideTip{visibility:hidden;}',
        '.hideTip .tipsInner{-webkit-transform-origin:0px 100%;transform-origin:0px 100%;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);opacity:0;}',
        '</style>',
        '<div class="topTips" id="toptips">',
        '   <div class="tipsInner">',
        '       <a onclick="javascript:open_ask();return false;" href="javascript:void(0)" class="JS-SWT-LINK">',
        '         <img src="http://js.jgnz.cn/ccjmqz/qqIcon.png"        '         <dl>',
        '           <dt>嘉仕恒信专家</dt>',
        '           <dd>您好,请问有什么可以帮助到您…</dd>',
        '         </dl>',
        '       </a>',
        '   </div>',
        '</div>'
    ].join('\r\n');
    var o = document.createElement('div');
    o.innerHTML = sHTML;
    while (o.firstElementChild) {
        document.body.appendChild(o.firstElementChild);


    };
    T = {
        hasClass: function(d, a) {
            var c = d.className.split(/\s+/);
            for (var b = 0; b < c.length; b++) {
                if (c[b] == a) {
                    return true
                }
            }
            return false
        },
        addClass: function(b, a) {
            if (!this.hasClass(b, a)) {
                b.className += " " + a
            }
        },
        removeClass: function(d, a) {
            if (this.hasClass(d, a)) {
                var c = d.className.split(/\s+/);
                for (var b = 0; b < c.length; b++) {
                    if (c[b] == a) {
                        delete c[b]
                    }
                }
                d.className = c.join(" ")
            }
        }
    };


    function Toptips(options) {
        this.init(options);
    };


    Toptips.prototype = {


        constructor: Toptips,


        init: function(options) {
            this.item = options.item;
            this.itemInner = options.item.children[0];
            this.loop = typeof options.loop == "undefined" ? true : options.loop;
            this.showTime = typeof options.showTime == "undefined" ? 5000 : options.showTime;
            this.hideTime = typeof options.hideTime == "undefined" ? 15000 : options.hideTime;
            this.showTimer = null;
            this.hideTimer = null;
            this.preTimer = null;
            this.item.style.WebkitTransition = this.item.style.transition = this.itemInner.style.WebkitTransition = this.itemInner.style.transition = "0.5s";
            var me = this;
            var initTimer = setTimeout(function() {
                me.showTip();
            }, 1000);
        },


        showTip: function() {
            var me = this;
            T.addClass(me.item, "showTip");
            T.removeClass(me.item, "hideTip");


            clearTimeout(me.hideTimer);
            me.showTimer = setTimeout(function() {
                me.hideTip();
            }, me.showTime);


        },


        hideTip: function() {
            var me = this;
            T.removeClass(me.item, "showTip");
            T.addClass(me.item, "hideTip");
            me.item.style.visibility = me.itemInner.style.visibility = "hidden";


            if (me.loop) {
                clearTimeout(me.showTimer);


                me.preTimer = setTimeout(function() {
                    me.item.style.visibility = me.itemInner.style.visibility = "visible";
                }, me.hideTime - 100);


                me.hideTimer = setTimeout(function() {
                    me.showTip();
                }, me.hideTime);


            }
        },


    };
    var toptip = document.getElementById("toptips");


    new Toptips({
        item: toptip,
        loop: true
    });
    return false;
    delete o;
}
setTimeout("swt2()",7000); 
</script>

我们为【仿手机顶部弹出QQ/微信消息JS】项目提供技术支持

该项目提供技术支持时间为:7天

我们为【仿手机顶部弹出QQ/微信消息JS】项目提供技术支持

该项目提供技术支持时间为:7天

联系我们

我们将通过邮件、QQ或者电话对该项目提供必要的、一定的技术支持

该项目提供技术支持包括:
关于该项目的相关问答
该项目的相关介绍及必要的使用说明
响应该项目的错误和反馈
协助购买及下载
项目支持不包括:
定制服务
安装/使用服务

如果您需要定制或者修改服务,点击定制

联系我们
手机端带离线宝商务通弹窗-JS

手机端带离线宝商务通弹窗-JS

重庆协和医院综合html模板

重庆协和医院综合html模板

屏蔽某地区(城市)访问网站

屏蔽某地区(城市)访问网站

保健品会销骗局暴利骗钱套路

保健品会销骗局暴利骗钱套路

幸不辱命·即将上线-敬请期待

幸不辱命·即将上线-敬请期待

该页面仅支持浏览,不支持下载。欲下载请访问PC端。
纤云聚合 发现更多 经验教程 观点 医疗招聘 友情链接 关于我们 免责声明 广告合作

Copyright © qaayoo.com Inc. All Rights Reserved. 纤云聚合 蜀ICP备14015264号
免责申明:本网站的部分内容来源于网络,如有侵权请告之删除! 举报邮箱:admin@qaayoo.com