JS所谓的享元模式-->

运行下面代码

复制代码
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style>
    .tooltip {
        width:300px;
        height:300px;
        background:#f00;
    }
</style>
<script>
    var TooltipManager = (function(){
        var storedInstance = null;
        var Tooltip = function(){
            this.delayTimeout = null;
            this.delay = 1500;

            this.element = document.createElement('div');
            this.element.style.display = 'none';
            this.element.style.position = 'absolute';
            this.element.className = 'tooltip';
            document.getElementsByTagName('body')[0].appendChild(this.element);
        };

        Tooltip.prototype = {
            startDelay : function(e,text){
                if(this.delayTimeout == null){
                    var  that = this;
                    var x = e.clientX;
                    var y = e.clientY;
                    this.delayTimeout = setTimeout(function(){
                        that.show(x,y,text);
                    },this.delay)
                }
            },
            show : function(x,y,text){
                clearTimeout(this.delayTimeout);
                this.delayTimeout = null;
                this.element.innerHTML = text;
                this.element.style.left = x + 'px';
                this.element.style.top = (y+20) + 'px';
                this.element.style.display = 'block';
            },
            hide : function(){
                clearTimeout(this.delayTimeout);
                this.delayTimeout = null;
                this.elements.style.display = 'none';
            }
        };

        return {
            addTooltip : function(targetElement,text){
                var tt = this.getTooltip();
                addEvent(targetElement,'mouseover',function(e){ tt.startDelay(e,text)});
                addEvent(targetElement,'mouseout',function(e){ tt.hide()})
            },
            getTooltip : function(){
                if(storedInstance == null){
                    storedInstance = new Tooltip();
                };
                return storedInstance;
            }
        }
    }())
</script>
</body>
</html>
复制代码

直接上代码了

本文作者:方方和圆圆

本文链接:https://www.cnblogs.com/diligenceday/p/3428020.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(499)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?

再过一百年, 我会在哪里?

点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起