ajax onmouseover显示Tip

最新推荐文章于 2021-08-06 20:55:36 发布

baallynn

最新推荐文章于 2021-08-06 20:55:36 发布

阅读量272

点赞数

分类专栏： ajax 文章标签： Ajax Microsoft

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Ajax技术实现在网页上鼠标悬停于商品图片时显示商品详细信息的方法。通过计算显示层的位置来确保提示信息准确展示在鼠标附近，并从服务器获取商品的相关数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到很多网站上面鼠标停留在商品图片上面边上显示出个提示层显示些简单的商品信息呵呵研究了下终于弄了个出来通过《ajax基础教程》得到很大提示但是它的有很多错呵呵
var tmp=null; // 声明一个临时变量存贮图片位置的表格
var xmlHttp = null;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
}

function getContent(obj){
createXMLHttpRequest();
tmp=obj;
var url = "/OnlineLeatherStore/product.do?method=showProTip&pid="+tmp.id;
xmlHttp.onreadystatechange = showtip;
xmlHttp.open("GET", url, true);
xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded; charset=gbk");
xmlHttp.send(null);
}

function showtip(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
clearData();
var end=calculateOffsetWidth(tmp);
var top=calculateOffsetTop(tmp);
document.getElementById('showtip').style.border='black 1px solid';
document.getElementById('showtip').style.left=end+15+'px';
document.getElementById('showtip').style.top=top+100+'px';
var typename=xmlHttp.responseXML.getElementsByTagName("tname")[0].firstChild.nodeValue;
var brandname=xmlHttp.responseXML.getElementsByTagName("bname")[0].firstChild.nodeValue;
var content=xmlHttp.responseXML.getElementsByTagName("content")[0].firstChild.nodeValue;
var row,row1,row2;
row=createRow(typename);
row1=createRow(brandname);
row2=createRow(content);
document.getElementById('tipbody').appendChild(row);
document.getElementById('tipbody').appendChild(row1);
document.getElementById('tipbody').appendChild(row2);
}
}
}

function calculateOffsetTop(tmp){ //计算显示层的高度
var offset=0;
offset=tmp.offsetParent.offsetTop; //父节点的高度
return offset;
}
//计算显示层的宽度因为我的是3列商品所以需要判断用了一个很笨的方法应该还有可以直接判断鼠标位置的方法但是时间原因没有去找了
function calculateOffsetWidth(tmp){
var offset=0;
tid=tmp.parentNode.id;
if(tid == '1'){
offset=tmp.offsetWidth; //当前窗体的宽度
}
else if( tid == '2'){
offset=tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth;
}
else if (tid=='3'){
offset=tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth+tmp.offsetWidth;
}
return offset;
}

//构建一行
function createRow(data){
var row;
var cell;
var txtNode;
row=document.createElement('tr');
cell=document.createElement('td');
cell.setAttribute('bgcolor','#ffffff');
cell.setAttribute('border','0');
txtNode=document.createTextNode(data);
cell.appendChild(txtNode);
row.appendChild(cell);
return row;
}
//清除层里面的东西
function clearData(){
var ind=document.getElementById('tipbody').childNodes.length;
for(var i=ind-1 ;i>=0; i--){
document.getElementById('tipbody').removeChild(document.getElementById('tipbody').childNodes[i]);
}
document.getElementById('tipbody').style.border="none";
}

// 下面是显示层
<div style="position:absolute" id="showtip">
<table id='tip' bgcolor="#fffafa" border="0" cellspacint='2' cellpadding='2'>
<tbody id="tipbody"></tbody>
</table>
</div>