jquery效果div位置随鼠标移动而变化的代码怎么写

当前的html

<div id="sc"> 联系我们 </div>
当前的css样式

<style>
body{ overflow:hidden;}
#sc{ width:180px; height:200px; border:1px solid #ddd; position:absolute; right:-150px; top:30%;}
</style>
当前的js代码

$(document).ready(function(){
$('#sc').mouseover(function(){
$('#sc').animate({right:'0px',opacity:'1'},500);
})
$('#sc').mouseout(function(){
$('#sc').animate({right:'-150px',opacity:'0.5'},500);
})
})

我现在实现的效果就是普通的侧边联系客服的效果，鼠标放上去，它会从右边的地方出来，
然后我想加个效果，当我鼠标滚动的时候，它右边距离top的位置也跟着下来，
求高手帮忙写一下实在不会了谢谢

举报该问题

推荐答案 2013-06-25

完全不需要js实现，除非你要兼容IE6

只要把sc的样式

position:absolute;

改为

position:fixed;

即可

温馨提示：答案为网友推荐，仅供参考

当前网址：http://99.wendadaohang.com/zd/B7vtvtOeX.html

其他回答

第1个回答 2013-06-27

全兼容代码参考如下：

本回答被提问者采纳

第2个回答 2015-10-09

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.hsspw.com/hssc/JS/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">

$(document).ready(function(){
$('#mo').mousemove(function(e){
n=$('#xxx').val()-50;

m=$('#yyy').val()-50;

$('#mo').css({top:m+'px', left:n+'px'});
});
});
function mouseMove(ev)
{
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xxx").value = mousePos.x;
document.getElementById("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>

鼠标X轴:
<input id='xxx' type='text'>
鼠标Y轴:
<input id=yyy type=text>

<div id='mo' style='position:absolute;width:200px;height:200px;background:red'>111</div>
</body>
</html>

相似回答

如何用jQuery实现div随鼠标移动而移动答：让div随着鼠标走，需要知道几个关键点如何获取鼠标的横纵坐标。如何让div在别的html代码上移动。var xx = e.originalEvent.x || e.originalEvent.layerX || 0;var yy = e.originalEvent.y || e.originalEvent.layerY || 0;('#month').css({top: yy, left: xx});//注意这是用css的top...

鼠标事件,js代码实现div移动功能答：首先引入jquery框架例如 jquery-1.7.1.js //$("#div1")表示要移动的div ("#div1").animate({top:'+=200px'},"slow");//向上移动200px；("#div1").animate({top:'-=200px'},"slow");//向下移动200px；回到原来的位置

jquery效果div位置随鼠标移动而变化的代码怎么写答：position:absolute; 改为 position:fixed; 即可

jQuery我想做一个,点击新建出来一个div,鼠标按下拖动div也跟着移动,代码...答：我写了一段代码，你可以参考一下：("#found").click(function(){ var t=false, x, y; $("body").append( $("<div style='width: 200px;height: 200px;background-color:#ccc;position: absolute;' id='run'>按住我移动</div>") .mouseup(function(){ t=false; ...

在div层上当鼠标移上显示另一个div层效果jquery怎么做?答：("#div1").onmouseover(function(){ ("#div2").attr("display","block");} );

用Jquery,如何编写:一个外层DIV,内层一个DIV,如何让内层DIV当鼠标拖动...答：var oDiv2=document.getElementById('div2');var disX=0;var disY=0;//鼠标按下document.onmousedown=function(ev){var oEvent=ev||event;disX=oEvent.clientX-oDiv2.offsetLeft;//鼠标当前的位置横坐标disY=oEvent.clientY-oDiv2.offsetTop;//鼠标当前的位置纵坐标//鼠标移动document.onmouse...

用jquery怎么实现鼠标经过div,div就上下不停地跳动,移出就停止呢_百度...答：这个感觉写css流畅一点啊，写一个单独的class，这个class是上下跳动的动画，鼠标上去的时候添加类名，拿开的时候移除类名就可以了

鼠标放在超链接上, 显示DIV。移开后隐藏DIV。答：1、首先我们在html里定义一个div，id为‘mouse_div’，然后定义该div的样式，主要是定义position，让其绝对定位。2、然后通过JS脚本来做随鼠标移动的效果。先引入jquery脚本，因为用到jquery操作dom。3、最后添加代码，在页面加载完后，给页面添加鼠标mousemove事件，在事件函数里，调用 moving方法，就实现...

求JS或者JQUERY实现拖动DIV交换位置的代码,加急!~答：'dragover', handleDragOver, false);d.addEventListener('dragleave', handleDragLeave, false);d.addEventListener('drop', handleDrop, false);d.addEventListener('dragend', handleDragEnd, false);});</script> </body> </html> 可以实现你要的效果不过看到晚了，可以拖动交换位置和数据 ...

大家正在搜

jquery找div下的div jquery鼠标移动触发 jquery代码实现鼠标点击常用的jquery鼠标事件 jquery鼠标移入 jquery鼠标移上去事件 jquery设置div可见 jquery动态添加div jquery绑定鼠标