jumpTip
来源：互联网 发布：网络电影丧尸李志开播 编辑：程序博客网 时间：2024/06/05 22:54
老大让我写个鼠标划过出来一个类似这样子的效果
![]()
写完功能但是让我封装一下我就懵了这个怎么传值啊。要传好多值
顺序先css=》html=》渲染html=》相应效果。
效果分鼠标滑进去和划出。
html部分
<div>点击adasdafsfs sdfdddddddd问号 问号 <span id="wenhao" style="cursor:pointer" onmouseenter="LZC_Enter('wenhao','LZC','JQHelps',1,'NO')" >？</span>看法圣诞节</div><div>点击adasdafsfs sdfdddddddd问号 问号 <span id="nihao" onmouseenter="LZC_Enter('nihao','LZC','HTML','我我想看看','YES')" >？</span>看法圣诞节</div>
js部分
function LZC_Obj(divId){ return document.getElementById(divId);}function LZC_LoadCss(divId){ HTMLS = '<style>'+ '#'+divId+'_help_content{display:none;width:400px; position: fixed;-webkit-box-sizing: border-box;box-sizing: border-box;border:1px solid #000;border-radius:3px;background:#eee;}'+ '#'+divId+'_triangle_border_left{z-index:-1;width:0;height:0;border-width:10px 10px 10px 0;border-style:solid;border-color:transparent #000 transparent transparent;position:absolute;margin-top:1px;margin-left:-10px;}'+ '#'+divId+'_triangle_border_left span{display:block;width:0;height:0;border-width:9px 9px 9px 0;border-style:solid;border-color:transparent #eee transparent transparent;position:absolute;top:-9px;left:1px;}'+ '#'+divId+'_help_content_mains {width:370px;padding:10px;color:#000;}'+ '</style>' return HTMLS;}function LZC_LoadHtml(divId){ HTMLS = '<div id="'+divId+'_help_content" onmouseleave="LZC_Leave(\''+divId+'\')">'+ '<div id="'+divId+'_triangle_border_left">'+ '<span></span>'+ '</div>'+ '<div id="'+divId+'_help_content_mains">'+ '</div>'+ '</div>'; return HTMLS;}function LZC_Load(divId){ HTMLS = LZC_LoadCss(divId); HTMLS += LZC_LoadHtml(divId); document.write(HTMLS);}function LZC_Enter(thisId,divId,types,contents,scrolls){ LZC_Obj(divId+"_help_content").style.left = LZC_Obj(thisId).offsetLeft + 20 +"px"; LZC_Obj(divId+"_help_content").style.top = LZC_Obj(thisId).offsetTop +"px"; LZC_Obj(divId+"_help_content").style.display = "block"; if(scrolls == "YES"){ LZC_Obj(divId+"_help_content_mains").style.height = "200px"; LZC_Obj(divId+"_help_content_mains").style.overflowY = "scroll"; }else if(scrolls == "NO"){ LZC_Obj(divId+"_help_content_mains").style.height = "auto"; LZC_Obj(divId+"_help_content_mains").style.overflow = "visible"; }; if(types == "HTML"){ LZC_Obj(divId+"_help_content_mains").innerHTML = contents; }else if(types == "JQ"){ LZC_Objs_JQ(contents,"#"+divId+"_help_content_mains"); }else if(types == "JQHelps"){ LZC_Objs_JQ("http://114.55.107.200:82//api/ajax/jqhelps/?"+contents+".html","#"+divId+"_help_content_mains"); }};function LZC_Leave(divId){ LZC_Obj(divId+"_help_content").style.display = "none"; LZC_Obj(divId+"_help_content_mains").innerHTML = "";};LZC_Load("LZC");总结：1.一条路一直不通说明路有问题。2.要全局思考，比如这个只需要一个div来多次调用即可不用做很多div。3.滑入滑出效果
不一定就必须是那个按钮做的效果。
主要是思维方式！
