js特效-仿照html属性title写一个弹出标题样式

问题场景：商品描述，当营业员给客户介绍时会看着这些弹出标题来给客户讲解描述，一般采用html中属性title来实现，但是有些商品描述太长，这些title在IE浏览器中大约展示5s，营业员需要多次移动鼠标查看标题会比较麻烦，原先已经设计商品详情页描述商品详细信息但是营业员不愿意点击看详情页

方案：JS+DIV+CSS 仿造一个title弹出框

难点：CSS对于div位置的控制不采用事件位置而是使用position中relative和absolute来确定

谷歌版：

<html>
<head>
<title>鼠标移入显示标题移出标题消失</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<style>
.tips_show
{    
z-index:999;
position:absolute;
/*bottom:10px;    谷歌浏览器要注掉这一行*/    
width:auto;
max-width:280px;
overflow:hidden;
padding:0 10px;
border: 1px solid #8797ab;
border-radius:5px;
background:#fff;
white-space:normal;
word-break:normal;    
}
.div_show{
display:block;
float:left;
border:1px solid #000;
padding:2px 2px 2px 2px;    
}
</style>
<script>
var global_TipsShowId = "";
var global_TipsShowTimer = null; 
function showTips(tips,tipsShowDivId,flag)
{
debugger;
if (flag)
{
global_TipsShowId = tipsShowDivId;
global_TipsShowTimer = setTimeout(function(){startShowTipsDiv(tips,tipsShowDivId)},500);
}
else
{
if (tipsShowDivId == global_TipsShowId)
{
global_TipsShowId = "";
var tipsShowDiv = document.getElementById("tips_"+ tipsShowDivId);
if(tipsShowDiv)
{
tipsShowDiv.style.display = "none";
}
if (global_TipsShowTimer)
{
clearTimeout(global_TipsShowTimer);
}
}
}    
}

function startShowTipsDiv(tips,tipsShowDivId)
{
debugger;
if (global_TipsShowId == tipsShowDivId)
{
if(!tips)
{
tips = $("#"+tipsShowDivId).attr("tips");
}
if (!tips || "" == tips)
{
return;
}
var tips_div_id = "tips_"+ tipsShowDivId;
var tipsShowDiv = document.getElementById(tips_div_id);
if (!tipsShowDiv)
{
$("#"+tipsShowDivId).append("<div id=" +tips_div_id+" class=\"tips_show\" style=\"display:none;\"></div>");
}
tipsShowDiv = document.getElementById(tips_div_id);
tipsShowDiv.innerHTML = "<p style=\"line-height:22px;margin:auto;\">"+tips+"</p>";
tipsShowDiv.style.display = "";    
}
}
</script>
</head>
<body>
<div id="div_parent_id_0" style="width:900px;" >
<div id="div_child_0_1" title="商品名称" class="div_show" style="background:red;width:250px;text-align:center;">商品名称</div>
<div id="div_child_0_2" title="商品描述" class="div_show" style="background:red;width:250px;text-align:center;">商品描述</div>
<div id="div_child_0_3" title="商品价格" class="div_show" style="background:red;width:250px;text-align:center;">商品价格</div>
</div>
<div id="div_parent_id_1" style="position:relative;width:900px;">
<div id="div_child_1_1" tips="iPhone 6s" class="div_show" style="width:250px;text-align:center;"
onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">iPhone 6s</div>
<div id="div_child_1_2" tips="iPhone 6s是Apple为Apple Watch的上市配备的一款产品" class="div_show" style="width:250px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">iPhone 6s是Apple为Apple Watch的上市配备的一款产品</div>
<div id="div_child_1_3" tips="￥6480.00元" class="div_show" style="width:250px;text-align:center;"
onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">￥6480.00元</div>
</div>
<div id="div_parent_id_2" style="position:relative;width:900px;">
<div id="div_child_2_1" tips="荣耀7" class="div_show" style="width:250px;text-align:center;"
onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">荣耀7</div>
<div id="div_child_2_2" tips="华为荣耀7[1-3] 是华为技术有限公司继荣耀6之后，于2015年6月30日在北京工业大学奥林匹克体育馆发布的4G智能手机。" class="div_show" style="width:250px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">华为荣耀7[1-3] 是华为技术有限公司继荣耀6之后，于2015年6月30日在北京工业大学奥林匹克体育馆发布的4G智能手机。</div>
<div id="div_child_2_3" tips="￥3500.00元" class="div_show" style="width:250px;text-align:center;"
onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">￥3500.00元</div>
</div>

</body>    
</html>

IE8版：

<html>
    <head>
        <title>鼠标移入显示标题移出标题消失</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <style>
            .tips_show
            {                
                z-index:999;
                position:absolute;
                bottom:10px;    
                width:auto;
                max-width:280px;
                overflow:hidden;
                padding:0 10px;
                border: 1px solid #8797ab;
                border-radius:5px;
                background:#fff;
                white-space:normal;
                word-break:normal;                
            }
            .div_show{
                display:block;
                float:left;
                border:1px solid #000;
                padding:2px 2px 2px 2px;                
                }
        </style>
        <script>
        var global_TipsShowId = "";
        var global_TipsShowTimer = null;  
        function showTips(tips,tipsShowDivId,flag)
        {
            debugger;
            if (flag)
            {
                //当需要展示的时候将全局ID变量赋值当前所指div id,当移出鼠标时根据是否是当前id来隐藏tips 
                //且0.5s后根据全局变量是否被改变来确定是否要继续展示tips
                global_TipsShowId = tipsShowDivId;
                global_TipsShowTimer = setTimeout(function(){startShowTipsDiv(tips,tipsShowDivId)},500);
            }
            else
            {
                if (tipsShowDivId == global_TipsShowId)
                {
                    global_TipsShowId = "";
                    var tipsShowDiv = document.getElementById("tips_"+ tipsShowDivId);
                    if(tipsShowDiv)
                    {
                        tipsShowDiv.style.display = "none";
                    }
                    if (global_TipsShowTimer)
                    {
                        clearTimeout(global_TipsShowTimer);
                    }
                }
            }            
        }
        
        function startShowTipsDiv(tips,tipsShowDivId)
        {
            debugger;
            if (global_TipsShowId == tipsShowDivId)
            {
                //谷歌浏览器不支持this.tips传参
                if(!tips)
                {
                    tips = $("#"+tipsShowDivId).attr("tips");
                }
                //没有tips则不展示直接返回
                if (!tips || "" == tips)
                {
                    return;
                }
                //判断是否已创建 防止再次创建
                var tips_div_id = "tips_"+ tipsShowDivId;
                var tipsShowDiv = document.getElementById(tips_div_id);
                if (!tipsShowDiv)
                {
                    $("#"+tipsShowDivId).append("<div id=" +tips_div_id+" class=\"tips_show\" style=\"display:none;\"></div>");
                }
                tipsShowDiv = document.getElementById(tips_div_id);
                tipsShowDiv.innerHTML = "<p style=\"line-height:22px;margin:1px 2px;\">"+tips+"</p>";
                tipsShowDiv.style.display = "";                            
            }
        }
        </script>
    </head>
    <body>
    <div id="div_parent_id_0" style="width:900px;" >
    <div id="div_child_0_1" title="商品名称" class="div_show" style="background:red;width:250px;text-align:center;">商品名称</div>
    <div id="div_child_0_2" title="商品描述" class="div_show" style="background:red;width:250px;text-align:center;">商品描述</div>
    <div id="div_child_0_3" title="商品价格" class="div_show" style="background:red;width:250px;text-align:center;">商品价格</div>
    </div>
    <div id="div_parent_id_1" style="position:relative;width:900px;">
    <div id="div_child_1_1" tips="iPhone 6s" class="div_show" style="width:250px;text-align:center;"
        onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">iPhone 6s</div>
    <div id="div_child_1_2" tips="iPhone 6s是Apple为Apple Watch的上市配备的一款产品" class="div_show" 
        onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">
        <p style="width:242px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">iPhone 6s是Apple为Apple Watch的上市配备的一款产品</p>
        
        </div>
    <div id="div_child_1_3" tips="￥6480.00元" class="div_show" style="width:250px;text-align:center;"
        onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">￥6480.00元</div>
    </div>
    <div id="div_parent_id_2" style="position:relative;width:900px;">
    <div id="div_child_2_1" tips="荣耀7" class="div_show" style="width:250px;text-align:center;"
        onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">荣耀7</div>
    <div id="div_child_2_2" tips="华为荣耀7[1-3]  是华为技术有限公司继荣耀6之后，于2015年6月30日在北京工业大学奥林匹克体育馆发布的4G智能手机。" class="div_show" 
        onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">
        <p style="width:242px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">华为荣耀7[1-3]  是华为技术有限公司继荣耀6之后，于2015年6月30日在北京工业大学奥林匹克体育馆发布的4G智能手机。</p>
        </div>
    <div id="div_child_2_3" tips="￥3500.00元" class="div_show" style="width:250px;text-align:center;"
        onmouseover="showTips(this.tips,this.id,1)" onmouseout="showTips(this.tips,this.id,0)">￥3500.00元</div>
    </div>
    
    </body>    
    </html>

注：IE下的样式有待调整。

参考：

鼠标放上显示跟随鼠标的提示文字信息

posted @ 2015-12-12 18:50 cac2020 阅读(1459) 评论(0) 编辑收藏举报

刷新页面返回顶部

cac2020

js特效-仿照html属性title写一个弹出标题样式

公告