jquery悬浮框,jq鼠标悬浮

jquery实现动态绑定数据后，鼠标移上去悬浮div显示详细信息

当页面加载的时候你就可以先将那个所谓动态数据加载到每个DIV下的浮动层。。当然是隐藏的。

创新互联专注于尼开远网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供尼开远营销型网站建设，尼开远网站制作、尼开远网页设计、尼开远网站官网定制、小程序开发服务，打造尼开远网络公司原创品牌,更为您提供尼开远网站排名全网营销落地服务。

鼠标放上去的时候直接显示到各DIV的对应位置就好了。

如果你非要鼠标放上去再加载数据那就是AJAX了。。大致思路就是各DIV的mouseover方法执行AJAX的远程调用方法获取数据再取回到这个浮动层显示。。

jquery 怎么实现鼠标在DIV上停止不动3秒后就出现悬浮提示框，如果移动鼠标的话就立刻关掉提示框

先说不用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

JS悬浮窗口如何实现

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库，效果就出来了。

像京东首页的悬浮框怎么做，求页面滚动，悬浮框变成字的jquery

用scroll事件，先获取右边那个大块的位置，offset.top()，当滚动条滚动到对应位子就改变左边菜单的内容就行了，大致思路就是这样

jQuery 鼠标移动上去 出来 悬浮在窗口右侧那种 一移动上去就出来 ，如下图 急急急

先感谢以下楼上那个大神提供的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");

}

);

但是如果要渐变效果就要稍微复杂一点了

jQuery 如何实现 “鼠标悬浮下拉菜单” 效果？

$("li p").mouseover(function () {

li p 改成一整块div 里面包含下拉元素和控制显示隐藏的元素