【js的dom操作】之js实现自定义提示框，提示文字、图片和短菜单

【使用场景如下】

自己的博客网站想实现以下功能：①弹出文字提示②弹出图片提示③弹出标题及图片提示④弹出简短的菜单。

鼠标onmouseover时触发，只需引入js,无需其他附件，使用时new一个就ok了。

标题+图片

菜单提示

 

图片提示

【实现代码】主要是涉及js的基础操作（dom操作）等

使用时的代码（就这么简单）：

//引入主tipper.js

问题一：js生成的dom如何监听点击事件

把生成的dom传回 ，可监听点击事件，如以下返回的res中包含了所有创建的dom,

var data={type:'both',data:'./img/logo.png',title:'HI，你好橘子',bgColor:'#333'};
       bindTipper("loginBox",null,data,function(res){
        //res=>{tipBox,imgBox...}
        var tipBox=res.tipBox;
        tipBox.oncllick=function(e){
        //do something
        }
});

问题二：本认为最难的是after和before等伪元素的操作

 要根据元素位置来判断小三角的方向，所以要通过js操作伪元素的样式。这么一来，感觉有点困难，甚至都想到用addRule和

deleteRule，如此麻烦，还不如引入css文件！又违背了初衷--‘只需引入js’，那么，就动态将样式添加到body中吧！

tipper.js，可根据自己需求改写

/**
 * @author Mr.chen
 * 文字提示：tipper('id',{type:'text',data:'文字内容',bgColor:'#ffffff',color:'#000'})
 * 图片提示：tipper('id',{type:'image',data:'imgUrl',bgColor:'#ffffff',color:'#000',width:'80',height:'80'})
 * 文字+图片提示：tipper('id',{type:'both',data:'imgUrl',title:'提示名称',bgColor:'#ffffff',color:'#000',width:'80',height:'80'})
 * 短菜单:tipper(dom,{type:'menu',data:['菜单一','菜单二'],bgColor:'#ffffff',color:'#000'})
 */
var tipper=function(id,data,callback){
	var returnDom={};//要返回的元素
	var tipsL=document.getElementsByClassName("tips"),$e;
	var imgBox,titleBox;
	if(tipsL.length>=1){//页面是否存在该tip，存在则消除
		for(var i=0;i=0){
		    	console.log('删除动态添加的伪元素样式')
		    	for(var i=0;i