当页面加载的时候你就可以先将那个所谓动态数据加载到每个DIV下的浮动层。。当然是隐藏的。
创新互联专注于尼开远网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供尼开远营销型网站建设，尼开远网站制作、尼开远网页设计、尼开远网站官网定制、小程序开发服务，打造尼开远网络公司原创品牌,更为您提供尼开远网站排名全网营销落地服务。
鼠标放上去的时候直接显示到各DIV的对应位置就好了。
如果你非要鼠标放上去再加载数据那就是AJAX了。。大致思路就是各DIV的mouseover方法执行AJAX的远程调用方法获取数据再取回到这个浮动层显示。。
先说不用js的方法
给div添加一个title属性即可(但是这样是没法操作到提示框的样式的 所以有js方法)
js方法 下面给出一份演示
!DOCTYPE HTML
html
head
title演示/title
script src=""/script
style type="text/css"
.TitleDiv{
width:300px;
background-color: #dddddd;
color: white;
padding: 15px 0;
}
.TitleDivText{
background-color: rgba(0,0,0,0.5);
color: white;
}
/style
/head
body
div class="TitleDiv"
我是一个需要提示的div
/div
div class="TitleDiv"
我是一个需要提示的div
/div
div class="TitleDiv"
我是一个需要提示的div
/div
script type="text/javascript"
//四个参数
//Element表示需要提示的节点或者jq对象 可以是多个
//Text提示的文本
//Time 鼠标移入等待多少的时间才显示 单位毫秒
//Class 提示框的class属性可以修改样式
function MoveTitle(Element,Text,Time,Class){
var ElementJQ=$(Element);
//创建提示框
var CreateTitle=function(event){
if(ElementJQ.TitleTime){
clearTimeout(ElementJQ.TitleTime);
ElementJQ.TitleTime=setTimeout(function(){
ElementJQ.TitleDiv=document.createElement("div");
if(Class){
$(ElementJQ.TitleDiv).addClass(Class);
}
$(ElementJQ.TitleDiv).css({
position:"fixed",
left:event.clientX+16+"px",//16是鼠标的宽度
top:event.clientY+16+"px",//16是鼠标的高度
});
$(ElementJQ.TitleDiv).html(Text);
document.body.appendChild(ElementJQ.TitleDiv);
},Time)
}else{
ElementJQ.TitleTime=setTimeout(function(){
ElementJQ.TitleDiv=document.createElement("div");
if(Class){
$(ElementJQ.TitleDiv).addClass(Class);
}
$(ElementJQ.TitleDiv).css({
position:"fixed",
left:event.clientX+16+"px",//16是鼠标的宽度
top:event.clientY+16+"px",//16是鼠标的宽度
});
$(ElementJQ.TitleDiv).html(Text);
document.body.appendChild(ElementJQ.TitleDiv);
},Time)
}
}
ElementJQ.on("mousemove",function(e){
clearTimeout(ElementJQ.TitleTime);
ElementJQ.TitleTime=null;
if(ElementJQ.TitleDiv){
document.body.removeChild(ElementJQ.TitleDiv);
ElementJQ.TitleDiv=null;
}
CreateTitle(e);
});
ElementJQ.on("mouseover",function(e){
CreateTitle(e);
});
ElementJQ.on("mouseout",function(){
clearTimeout(ElementJQ.TitleTime);
ElementJQ.TitleTime=null;
if(ElementJQ.TitleDiv){
document.body.removeChild(ElementJQ.TitleDiv);
ElementJQ.TitleDiv=null;
}
});
}
var div=$(".TitleDiv")
MoveTitle(div,"我是提示的内容",3000,"TitleDivText");
/script
/body
/html
jsp中：
body
div style="position: absolute;z-index:90" id="div1"我不动/div
div我动div
/body
//有的将position设置成fixed,我试了试效果不如position好,设置z-index，向里的深度，我这儿设置90，你要覆盖几个div，设置数大于那个数就行。
js中：
我这儿用jquery写。
$(document).ready(function(){
$(window).scroll(function(){//滚动时触发函数
$("#div1").css("top",$(document).scrollTop());//将滚动条高度赋给悬浮框。
})
})
导入jquery库，效果就出来了。
用scroll事件，先获取右边那个大块的位置，offset.top()，当滚动条滚动到对应位子就改变左边菜单的内容就行了，大致思路就是这样
先感谢以下楼上那个大神提供的CSS效果，我第一次用，感觉很不错
但是，看了一下，那个渐变效果毕竟是CSS3的属性，对于较老的浏览器就会失灵，还是用js实现可能更保险些。
CSS文件：
#block{ width:200px; height:300px; overflow:hidden;}
.tab{
color:#FFF;
line-height:60px;
width:100px; height:60px;
background:#000;
margin:10px;
padding-left:5px;
float:right;
position:relative;
left:25px;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
transition:all 0.2s ease-in-out 0;
}
.tab:hover{ width:170px; background:#06F;}
Html文件：
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
/head
link rel="stylesheet" type="text/css" href="tab.css"
body
div id="block"
div class="tab" id="tab1"tab1/div
div class="tab" id="tab2"tab2/div
div class="tab" id="tab3"tab3/div
/div
/body
/html
刚才提到了用js实现效果，这里补充一下
首先把CSS样式中的transition属性和tab的hover俩个都注掉或删掉
如果单纯的只是实现弹出和变色，非常简单
$(".tab").hover(
function(e){
$(this).width(170);
$(this).css("background","#06F");
},
function(e){
$(this).width(100);
$(this).css("background","#000");
}
);
但是如果要渐变效果就要稍微复杂一点了
$("li p").mouseover(function () {
li p 改成一整块div 里面包含下拉元素和控制显示隐藏的元素