如何让一个div跟随鼠标移动

鼠标移动上去，弹出一个div，并且div跟随鼠标移动。

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
body{width:960px;margin:0 auto;}
ul{list-style:none;width:960px;height:300px;margin-top:100px;}.a{background-color:#0f0;width:200px;height:200px;float:left;margin:20px;}.b{background-color:#00f;width:300px;height:300px;display:none;position: absolute;color: #fff;font-size: 120px;}
</style>
</head>
<body>
<ul class="list"><li><div class="a">1</div></li><li><div class="a">2</div></li><li><div class="a">3</div></li></ul><div class="b">1-1</div><div class="b">2-2</div><div class="b">3-3</div>
<script type="text/javascript">$('.b').hide();$('.list li').mousemove(function(e){$('.b').eq($(this).index()).show().css({"top": e.pageY+20,"left": e.pageX+20}).siblings("div").hide();});$('.list li').mouseleave(function(){$('.b').hide();});
</script>
</body>
</html>

如何让一个div跟随鼠标移动相关推荐

JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
JavaScript div跟随鼠标移动
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>di ...
js效果 div跟随鼠标移动
js效果 div跟随鼠标移动 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
跟随鼠标走html代码,div跟随鼠标移动
用到的三个鼠标事件: onmousedown: 当鼠标按下 onmousemove:当鼠标移动 onmouseup:当鼠标松开思路:动态监听鼠标位置,给div设置绝对定位(display: abso ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
js-拖拽-div跟随鼠标的拖拽而移动
拖拽: 鼠标按下目标区域---开始拖拽---onmousedown __并列__鼠标移动时候被拖拽的元素跟随鼠标移动-onmousemove _并列_ 当鼠标松开时,被拖拽的元素固定在当前位置onmo ...
JS div跟随鼠标移动
一.在body里面新建一个div <div class="box"> 二.在css里面写上样式 PS:一定要写上定位position,因为offsetLeft.offs ...
实现div跟随鼠标移动、点击、拖动而产生的变化
代码一:实现鼠标能够拖动div <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
JS在页面渲染一个div,用鼠标点击鼠标随意拖动该元素，当鼠标松开时，该元素会停在鼠标松开的页面位置。
<style>#goods {width: 100px;height: 100px;border-radius: 50%;position: fixed;background-color: ...

如何让一个div跟随鼠标移动

如何让一个div跟随鼠标移动相关推荐

最新文章

热门文章