`
shihuan830619
  • 浏览: 583843 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

动态淡出表格行,鼠标悬浮提示框

    博客分类：
  • html
htmltableJavaScript 
阅读更多 
<html>
<head>
<title>动态淡出表格行,鼠标悬浮提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style type="text/css">
.mytable table{border-right:1px solid #000000; border-bottom:1px solid #000000}
.mytable table th{border-left:1px solid #000000; border-top:1px solid #000000; background-color:#0099cc}
.mytable table td{border-left:1px solid #000000; border-top:1px solid #000000;}
</style>

<script type="text/javascript">
document.write("<div id=\"ts\" style=\"position:absolute; background-color:#FFFFE6; font-size:12px; padding:3px; border:1px solid #FFCC99; display:none\"></div>");

$(function(){
	//setInterval(executeAnimation, 3000);  //3秒执行一次
});

function executeAnimation(){
	var trcontent = "";
	trcontent += "<tr onmouseover='mtrmove(this);' onmouseout='mtrout();' align='center'>"
	trcontent += "<td>100</td>";
	trcontent += "<td>新来的</td>";
	trcontent += "<td>2014</td>";
	trcontent += "</tr>";

	$("table tr").eq(10).fadeOut("slow", function(){
		$("table tr").eq(10).remove(); //删除当前行
		$("#mytb").prepend(trcontent);
	});
}

function mtrmove(obj,s){
    var evt = event || window.event;
    var x = evt.clientX - 75;
    var y = evt.clientY - 20;
    document.getElementById("ts").style.left = x + 'px';
    document.getElementById("ts").style.top = y + 'px';
    if(s=='' || typeof(s)=='undefined'){
        document.getElementById("ts").innerHTML = obj.innerHTML;
		//document.getElementById("ts").innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaa;<br /> bbbbbbbbbbbbbbbbbbbbbbbbb;<br /> ccccccccccccccccccc";
    }else{
        document.getElementById("ts").innerHTML = s;
    }
    document.getElementById("ts").style.display = '';
}

function mtrout(){
    document.getElementById("ts").style.display = 'none';
}

</script>
</head>
<body>
	<div class="mytable" align="center">
		<table border="0" cellpadding="0" cellspacing="0" width="60%">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tbody id="mytb">
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>1</td>
					<td>张三</td>
					<td>18</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>2</td>
					<td>李四</td>
					<td>19</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>3</td>
					<td>王五</td>
					<td>21</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>4</td>
					<td>赵六</td>
					<td>22</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>5</td>
					<td>孙七</td>
					<td>23</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>6</td>
					<td>刘八</td>
					<td>25</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>7</td>
					<td>周九</td>
					<td>32</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>8</td>
					<td>彭十</td>
					<td>35</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>9</td>
					<td>潼南</td>
					<td>38</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>10</td>
					<td>漠北</td>
					<td>46</td>
				</tr>
			</tbody>
		<table>
	</div>
	<input type="button" value="删除行" onclick="executeAnimation();" />
</body>
</html>


鼠标移入移出事件变成单击事件了，鼠标单击其他空白处悬浮框消失: 
<html>
<head>
<title>动态淡出表格行,鼠标悬浮提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style type="text/css">
.mytable table{border-right:1px solid #000000; border-bottom:1px solid #000000}
.mytable table th{border-left:1px solid #000000; border-top:1px solid #000000; background-color:#0099cc}
.mytable table td{border-left:1px solid #000000; border-top:1px solid #000000;}
</style>

<script type="text/javascript">
document.write("<div id=\"ts\" style=\"position:absolute; background-color:#FFFFE6; font-size:12px; padding:3px; border:1px solid #FFCC99; display:none\"></div>");

$(function(){
	//setInterval(executeAnimation, 3000);  //3秒执行一次
});

function executeAnimation(){
	var trcontent = "";
	trcontent += "<tr onmouseover='mtrmove(this);' onmouseout='mtrout();' align='center'>"
	trcontent += "<td>100</td>";
	trcontent += "<td>新来的</td>";
	trcontent += "<td>2014</td>";
	trcontent += "</tr>";

	$("table tr").eq(10).fadeOut("slow", function(){
		$("table tr").eq(10).remove(); //删除当前行
		$("#mytb").prepend(trcontent);
	});
}

function mtrmove(obj,s){
    var evt = event || window.event;
    var x = evt.clientX - 75;
    var y = evt.clientY - 20;
    document.getElementById("ts").style.left = x + 'px';
    document.getElementById("ts").style.top = y + 'px';
    if(s=='' || typeof(s)=='undefined'){
        document.getElementById("ts").innerHTML = obj.innerHTML;
		//document.getElementById("ts").innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaa;<br /> bbbbbbbbbbbbbbbbbbbbbbbbb;<br /> ccccccccccccccccccc";
    }else{
        document.getElementById("ts").innerHTML = s;
    }
    document.getElementById("ts").style.display = '';
	
	addEvent(document.body,"mousedown",clickOther);
}

function mtrout(){
	var tsobj = document.getElementById("ts");
	delEvent(document.body,"mousedown",mtrmove);
    tsobj.style.display = 'none';
}

function addEvent(obj,eventType,func){
	if(obj.attachEvent){
		obj.attachEvent("on" + eventType,func);
	} else {
		obj.addEventListener(eventType,func,false)
	}
}

function delEvent(obj,eventType,func){
	if(obj.detachEvent){
		obj.detachEvent("on" + eventType,func);
	} else {
		obj.removeEventListener(eventType,func,false);
	}
}

function clickOther(el){
	thisObj = el.target ? el.target : event.srcElement;
	//alert(thisObj.tagName== "BODY")
	do{
		if(thisObj.id == "ts") return;
		if(thisObj.tagName == "BODY"){
			mtrout();
			return;
		};
		thisObj = thisObj.parentNode;
	}while(thisObj.parentNode);
}
</script>
</head>
<body>
	<div class="mytable" align="center">
		<table border="0" cellpadding="0" cellspacing="0" width="60%">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tbody id="mytb">
				<tr onclick="mtrmove(this);" align="center">
					<td>1</td>
					<td>张三</td>
					<td>18</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>2</td>
					<td>李四</td>
					<td>19</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>3</td>
					<td>王五</td>
					<td>21</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>4</td>
					<td>赵六</td>
					<td>22</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>5</td>
					<td>孙七</td>
					<td>23</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>6</td>
					<td>刘八</td>
					<td>25</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>7</td>
					<td>周九</td>
					<td>32</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>8</td>
					<td>彭十</td>
					<td>35</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>9</td>
					<td>潼南</td>
					<td>38</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>10</td>
					<td>漠北</td>
					<td>46</td>
				</tr>
			</tbody>
		<table>
	</div>
	<input type="button" value="删除行" onclick="executeAnimation();" />
</body>
</html>
分享到：
| js弹出层示例代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含，其中包含`&lt;tr&gt;`（表格行）元素，每行内可以有多个`&lt;td&gt;`（表格数据单元格）或`...

    Qt提示框淡出、飞出、缩小等关闭窗口动画

    通过结合这些技术，你不仅可以创建出具有视觉吸引力的提示框，还可以根据项目需求定制各种动态效果，提升用户界面的交互性和美观度。在实际开发中，记得根据平台和性能需求调整动画的执行时间和复杂性，以保证流畅性...

    强悍的鼠标悬浮图片特效hover.css

    例如，当鼠标悬浮在图片上时，可以实现图片旋转、缩放、淡入淡出、移动等多种视觉变化。这不仅可以用于普通的图片展示，也可以用于按钮、导航菜单等元素，增加网站的动态感和趣味性。 除了`hover.css`，压缩包中的...

    C# winform 实时消息提示框

    在WinForm中，通常使用MessageBox类来创建简单的消息提示框，但MessageBox的样式和交互有限，无法满足复杂或动态的需求。 为了实现更丰富的实时消息提示，我们可以创建自定义控件。"TaskbarNotifierDemo"项目就是...

    wpf 消息提示框（仿QQ左下角提示框）

    本示例“wpf 消息提示框（仿QQ左下角提示框）”旨在模仿QQ应用中的左下角弹出提示功能，这种提示框通常用于快速显示通知信息，而不会打断用户的正常操作流程。 首先，我们要理解WPF的基本概念。WPF是微软.NET ...

    特效代码:弹出一个淡入淡出的提示框

    本主题聚焦于实现一个具有淡入淡出效果的提示框，这种效果能为用户提供更为优雅和舒适的视觉体验。下面将详细介绍如何创建这样一个功能。 首先，淡入淡出效果通常涉及到CSS（层叠样式表）的动画属性。CSS3引入了`...

    教 你 做注册提示框

    例如，在给定的部分内容中，使用了`&lt;table&gt;`元素来布局提示框的结构，而`&lt;tr&gt;`和`&lt;td&gt;`则用于定义行和单元格，以实现更精细的布局控制。CSS通过`style`属性直接嵌入，调整字体大小、对齐方式等。 #### JavaScript...

    jquery悬浮层，鼠标悬浮动态添加显示内容

    在本示例中，我们将探讨如何使用jQuery实现“鼠标悬浮动态添加显示内容”的功能，这是一种常见于网页设计中的交互效果，可以提升用户体验。 首先，我们需要在页面中引入jQuery库。通常，这可以通过在`&lt;head&gt;`标签内...

    JQuery 鼠标悬浮，图片遮罩效果

    "JQuery 鼠标悬浮，图片遮罩效果"就是一种常见的交互设计，它使得用户在鼠标悬停在图片上时，图片会出现一层半透明的遮罩层，通常用于展示额外信息或者作为点击触发的视觉提示。这种效果可以增加网站的动态感和专业...

    js提示框特效js提示框特效js提示框特效js提示框特效

    CSS3的动画和过渡效果可以让提示框展示更加流畅，比如淡入淡出、滑动等。 3. **JavaScript基础**：使用JavaScript来控制提示框的显示与隐藏，监听用户的点击事件，以及处理逻辑。例如，当用户点击某个按钮时，提示...

    帝国cms提示框yecha美化版

    而【提示框美化】是用户体验设计中的一个重要环节，一个美观、友好的提示框可以提升用户对网站的整体满意度。在这个主题中，我们主要关注的是【Yecha美化版】的提示框，它是对帝国CMS原有提示框功能的改进和优化。 ...

    鼠标经过焦点淡出提示功能

    当鼠标离开时，提示框淡出并隐藏。 如果使用jQuery，代码会更简洁，但原理相同： ```javascript $(document).ready(function() { $('[data-tooltip]').each(function() { const tooltip = $('...

    好用的漂亮提示框,js提示框

    在IT行业中，用户界面（UI）的设计和用户体验（UX）是至关重要的，而提示框作为与用户交互的重要元素，其美观性和易用性直接影响到软件或网站的整体质感和用户满意度。"好用的漂亮提示框,js提示框"这个主题正是关注...

    一款jQuery+DIV居中淡入淡出信息提示框示例

    总的来说，"一款jQuery+DIV居中淡入淡出信息提示框示例"结合了前端开发的多个核心知识点，包括jQuery的使用、CSS布局、事件处理和动画效果，展示了如何通过JavaScript和CSS实现一个优雅的交互效果。通过学习和理解这...

    jquery提示框鼠标滑过图片提示框

    // 鼠标离开时淡出提示框 }); ``` 在这个例子中，我们利用了`$(this)`来获取当前被悬停的图片元素，然后设置提示框的位置，并通过`fadeIn()`和`fadeOut()`方法实现动画效果。`attr('title')`用于获取图片的`title`...

    javascript实现的网页右下角淡入淡出的消息提示框特效

    javascript实现的网页右下角淡入淡出的消息提示框特效

    JS+css实现仿QQ空间信息提示框

    对于仿QQ空间信息提示框，我们可以设计一个带有圆角、半透明背景、以及恰当内边距的弹出框，并通过定位使其悬浮在页面特定位置，如屏幕中心或者触发元素附近。 在实现过程中，我们可能会遇到以下几个关键步骤： 1....

    ios-自定义提示框.zip

    在提供的"AlertViewWithToast"文件中，可能包含了一个名为"alertView"的自定义提示框实现，它可能是一个具有toast样式（即短暂悬浮在屏幕中央）的提示组件。这样的组件通常用于显示简短的信息，然后自动消失。 在...

Magicbox
Global site tag (gtag.js) - Google Analytics