关闭

js实现页面提示效果

2371人阅读 评论(0) 收藏 举报

     本来是要用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>
 
0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:112384次
    • 积分:1566
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:5篇
    • 译文:0篇
    • 评论:30条
    文章分类
    最新评论