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>
 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

做成js调用: base-loading.js代码 [html] view plain copy   /...

js 实现页面3D效果

用javascript实现仿163的js广告向下挤压页面的效果

本次实现一个js小小特效,效果就是广告从页面的上方出来将基本页面挤压下去。 实现的思路是将两个div(广告div1和div2)。将div1的高度不断增加,增加的同时div2的y轴坐标变大,div1的...

WOW.js+animate 帮助你实现滚动页面动画效果

Animate.css是一个有趣的,跨浏览器的css3动画库。网址:https://daneden.github.io/animate.css/ WOW.js 就是一款帮助你实现这种 CSS 动...

JS实现分享页面自动关闭效果

JS实现分享页面自动关闭效果 通常我们在分享内容后,会有个新的窗口提示分享成功,然后倒计时关闭窗口。 要实现这个效果,我们要写两个页面: 先创建用于点击的页面 open_window.html ...

velocity.js实现页面滚动切换效果

今天介绍一个Javascript的小型的动画插件velocity.js,可以方便高效的开发一个具有多页面滚动切换效果的网站。浏览器支持 velocity.js支持IE8+、Chrome、Firefo...

使用原生js实现页面蒙灰(mask)效果

对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序

手把手教小白如何用css+js实现页面中图片放大展示效果

1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀,来来来,...

关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)

动画效果 #Books{ width: 1000px; height: auto; margin: ...

原生js利用鼠标滚轮实现滚动到当前页面实现动画效果

滚滚屏 原生js 动画 滚轮 mousewheel
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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