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插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
随机推荐
- trackr: An AngularJS app with a Java 8 backend – Part II
该系列文章来自techdev The Frontend 在本系列的第一部分我们已经描述RESTful端建立在Java 8和Spring.这一部分将介绍我们的第一个用 AngularJS建造的客户端应用 ...
- UVa 11235 (RMQ) Frequent values
范围最值问题,O(nlogn)的预处理,O(1)的查询. 这个题就是先对这些数列进行游程编码,重复的元素只记录下重复的次数. 对于所查询的[L, R]如果它完全覆盖了某些连续的重复片段,那么查询的就是 ...
- UVa 10562 (特殊的输入处理方式) Undraw the Trees
题意: 给出一个二维字符数组,它代表了一棵树.然后将这棵树转化为括号表示法(以递归的形式). 分析: 这道题最大的特色就是对数据的处理方式,里面用到了一个 fgets() 函数,这个函数的功能有点像c ...
- NoSQL 数据库系统对比
虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只是时间问题:被迫使用关系数据库,但最终发现不能适应需求的情况不胜枚举. 但是NoSQL数据库之间的不同,远超过两 SQ ...
- hdu 4635 Strongly connected（强连通）
考强连通缩点,算模板题吧,比赛的时候又想多了,大概是不自信吧,才开始认真搞图论,把题目想复杂了. 题意就是给你任意图,保证是simple directed graph,问最多加多少条边能使图仍然是si ...
- php yii .htaccess
RewriteEngine on # if a directory or a file exists, use it directlyRewriteCond %{REQUEST_FILENAME} ! ...
- OK335xS psplash make-image-header.sh hacking
/***************************************************************************** * OK335xS psplash mak ...
- dagli最早干了这样一件事儿 Localization of Cardiac-Induced Signal Change in fMRI
Localization of Cardiac-Induced Signal Change in fMRI 这篇文章是最早做生理噪声相关组织的定位的. 很奇特,因为,这位学者甚至得出了,血管心动等变化 ...
- directdraw的多画面显示rgb
// showpicDlg.cpp : 实现文件 // #include "stdafx.h" #include "showpic.h" #include &q ...
- mysql违背了唯一约束
执行一批数据,违背唯一约束时会中断,导致后面的数据写不进去. mysql有提供ignore关键字,使用insert ignore into .... 这样,当违背了唯一约束的时候~就会直接跳过,不会报 ...