js实现页面提示效果

原创 2007年09月27日 20:51:00

     本来是要用ajax技术实现的页面提示,就是把鼠标放图片上,就显示相关的提示信息。因为要动态地显示与图片相关的提示信息,所以需要用ajax实现异步提取数据库中的信息。

   但是如果你需要显示的是静态的图片相关信息,那就不需要用到ajax了,只用js就可以了,下面就是一个示例代码:


<script language="javascript">...
var datatablebody;
var datadiv;
var curelement;
function getdetail()...{
    datatablebody 
= document.getElementById("databody");
    datadiv 
= document.getElementById("popup");
    setdata();      //设置要显示的数据
    }

    
function setdata(data)...{
    cleardata();
    setoffsets();
    
var content = "你要显示的提示信息";
    
var row = createrow(content);       //创建一个tr
    datatablebody.appendChild(row);   //将创建的tr放入table中
    }

    
function createrow(data)...{
    
var row,cell,txtnode;
    row 
= document.createElement("tr");     //动态生成一个tr
    cell 
= document.createElement("td");    //动态生成一个td
    cell.setAttribute(
"bgcolor","#fffafa");       //设置背景颜色
    cell.setAttribute(
"border","0");                //设置边框大小
    txtnode 
= document.createTextNode(data);   //创建一个文本节点
    cell.appendChild(txtnode);                   //将文本节点放入单元格cell
    row.appendChild(cell);                         //将单元格cell放入生成的tr中
    
return row;
    }

    
function setoffsets()...{
    datadiv.style.border 
= "black 1px solid";
    
var top =0;
    
while(curelement)...{
        top 
+= curelement["offsettop"];
        curelement 
= curelement.offsetparent;
    }

    datadiv.style.left 
= 50 + "px";         //设置要显示提示框的左端位置
    datadiv.style.top 
= top + "px";        //设置顶部位置
    }


function cleardata()...{                   //鼠标移开时,清除动态生成的tr
    
var ind = datatablebody.childNodes.length;
    
for(var i = ind-1;i>=0;i--)...{
        datatablebody.removeChild(datatablebody.childNodes[i]);
    }

    datadiv.style.border 
= "none";
}

</script>

<img src="eclipse.ico" onmouseover="getdetail();"  onmouseout="cleardata();"/>

<div style="position:absolute;" id="popup">
<table bgcolor="#fffafa" border="0" cellpadding="2" cellspacing="2">
<tbody id="databody">
</tbody>
</div>
 

JavaScript实现带自动提示的文本框效果代码

示例一:直接编写AJAX 实现。  客户端:  复制代码代码如下:       Ajax实现自动提示的文本框    body{  font-family:Arial,...
  • tyczp
  • tyczp
  • 2017年05月06日 12:49
  • 259

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...
  • haibo0668
  • haibo0668
  • 2016年10月28日 12:04
  • 20958

JS实现输入框类似百度搜索的智能提示效果

先上效果图 现在上代码 .search { left: 0; ...
  • yedajiang44
  • yedajiang44
  • 2017年05月25日 22:02
  • 1867

JS实现页面加载完毕之前loading提示效果

做成js调用: base-loading.js代码 [html] view plain copy   /...
  • u012028371
  • u012028371
  • 2017年02月16日 20:11
  • 3864

javascript实现页面滚屏效果

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016年09月22日 20:51
  • 3212

JavaScript实现网页元素的拖拽效果

JavaScript实现网页元素的拖拽效果
  • jackfrued
  • jackfrued
  • 2014年04月26日 00:27
  • 12200

[工具类]JS实现的页面等待提示层

前提:使用jquery /** * 使用方法: * 开启:MaskUtil.mask(); * 关闭:MaskUtil.unmask(); * * MaskUtil.mask('其它提示文...
  • thc1987
  • thc1987
  • 2016年11月23日 15:25
  • 730

移动端使用js出轻量级吐司提示

/** * 自定义吐司 littlehow 2015-12-10 */ var toast = { c:function(tag){ return document.createElemen...
  • w172087242
  • w172087242
  • 2016年04月27日 16:27
  • 1168

js实现动画效果

用js实现动画效果的主要思想是利用setInterval()函数.此函数可按照指定的周期(以毫秒计)来调用函数或表达式,并且该方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭...
  • charlene0824
  • charlene0824
  • 2015年11月25日 13:13
  • 1306

仿百度输入框智能提示的js代码

.search { left: 0; position: relative; } #auto_div { display: none; width: 300px; border: 1...
  • kungfu_panda
  • kungfu_panda
  • 2014年09月23日 15:29
  • 1596
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js实现页面提示效果
举报原因:
原因补充:

(最多只允许输入30个字)