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下的样式有待调整。

参考：

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

js特效-仿照html属性title写一个弹出标题样式的更多相关文章

vue.js 利用组件之间通讯，写一个弹出框例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
创建一个弹出DIV窗口
创建一个弹出DIV窗口摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
仿腾讯微博的一个弹出框 v0.1 beta
仿腾讯微博的一个弹出框 v0.1 beta 代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...
利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...
android一个弹出菜单的动画(二)
假设做一个弹出的控件,我们能够进行加入view: 写class SatelliteMenu extends FrameLayout private void init(Context context, ...
Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
使用node.js 文档里的方法写一个web服务器
刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...
Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点使 ...

随机推荐

Socket programming in C on Linux | tutorial
TCP/IP socket programming This is a quick guide/tutorial to learning socket programming in C languag ...
C#实现GDI+基本图的缩放、拖拽、移动
C#实现GDI+基本图的缩放.拖拽.移动示例代码如下: using System;using System.Collections.Generic;using System.ComponentMode ...
使用netcat进行反弹链接的shellcode
from:http://morgawr.github.io/hacking/2014/03/29/shellcode-to-reverse-bind-with-netcat/ 这篇文章主要是谈,在远程 ...
android上的缓存、缓存算法和缓存框架
1.使用缓存的目的缓存是存取数据的临时地,因为取原始数据代价太大了,加了缓存,可以取得快些.缓存可以认为是原始数据的子集,它是从原始数据里复制出来的,并且为了能被取回,被加上了标志. 在andr ...
JdbcTemplate查询数据三种callback之间的区别
JdbcTemplate针对数据查询提供了多个重载的模板方法,你可以根据需要选用不同的模板方法. 如果你的查询很简单,仅仅是传入相应SQL或者相关参数,然后取得一个单一的结果,那么你可以选择如下一组便 ...
域名服务器--DNS
.域名 .DNS.DNS 端口号 .DNS服务器 .域名解析过程及原理 .动态域名解析(DDNS)服务的原理域名域名是与主机名称一一对应的一个名字.使得人们可以通过ip的名字来访问ip,域名就是为 ...
bzoj1975
显然是类似k短路,直接不停增广即可好久没写A*了,裸的A*可能会TLE 加点剪枝就卡过去了……… type node=record po,next:longint; cost:double; end ...
QSettings读写注册表、配置文件
简述一般情况下,我们在开发软件过程中,都会缓存一些信息到本地,可以使用轻量级数据库sqlite,也可以操作注册表.读写配置文件. 关于QSettings的使用前面已经介绍过了,比较详细,见" ...
LA 3266 (贪心) Tian Ji -- The Horse Racing
题意: 田忌和齐王各有n匹马,如果马的速度比齐王的快就赢200,慢则输200,相等不赔不赚. 已知两人每匹马的速度(为整数)和齐王所排出的马的顺序,问田忌该如何应对才能使收益最大. 分析: 本以为是一 ...
《分销系统-原创第一章》之“多用户角色权限访问模块问题”的解决思路（位运算 + ActionFilterAttribute ）
此项目需求就是根据给用户分配的权限,进行相应的权限模块浏览功能,因为项目不是很大,所以权限没有去用一张表去存,我的解决思路如下,希望大家给点建议. 数据库用户表结构如下: 数据库表梳理: BankUs ...

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

js特效-仿照html属性title写一个弹出标题样式的更多相关文章

随机推荐

热门专题