zoukankan html css js c++ java

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="900px;" >
<div id="div_child_0_1" title="商品名称" class="div_show" style="background:red;250px;text-align:center;">商品名称</div>
<div id="div_child_0_2" title="商品描述" class="div_show" style="background:red;250px;text-align:center;">商品描述</div>
<div id="div_child_0_3" title="商品价格" class="div_show" style="background:red;250px;text-align:center;">商品价格</div>
</div>
<div id="div_parent_id_1" style="position:relative;900px;">
<div id="div_child_1_1" tips="iPhone 6s" class="div_show" style="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="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="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;900px;">
<div id="div_child_2_1" tips="荣耀7" class="div_show" style="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="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="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="900px;" >
    <div id="div_child_0_1" title="商品名称" class="div_show" style="background:red;250px;text-align:center;">商品名称</div>
    <div id="div_child_0_2" title="商品描述" class="div_show" style="background:red;250px;text-align:center;">商品描述</div>
    <div id="div_child_0_3" title="商品价格" class="div_show" style="background:red;250px;text-align:center;">商品价格</div>
    </div>
    <div id="div_parent_id_1" style="position:relative;900px;">
    <div id="div_child_1_1" tips="iPhone 6s" class="div_show" style="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="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="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;900px;">
    <div id="div_child_2_1" tips="荣耀7" class="div_show" style="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="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="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下的样式有待调整。

参考：

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

学习技术不是用来写HelloWorld和Demo的，而是要用来解决线上系统的真实问题的.

查看全文

相关阅读:
eclipse中文乱码问题解决方案
 修改Tomcat的JDK目录
 Tomcat 5.5 修改服务器的侦听端口
 HTML DOM教程 27HTML DOM Button 对象
 HTML DOM教程 24HTML DOM Frameset 对象
 Navicat for MySQL v8.0.27 的注册码
 HTML DOM教程 25HTML DOM IFrame 对象
 Tomcat 5.5 的下载和安装
 android manifest相关属性
 ubuntu10.04 下 eclipse 小结

原文地址：https://www.cnblogs.com/cac2020/p/5037452.html