如何让一个div跟随鼠标移动
2015-06-12 16:29
316 查看
鼠标移动上去,弹出一个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>
相关文章推荐
- 第10-12章
- 无标题
- MVC修改视图的默认路径
- Oracle 数据泵使用详解
- Administrator privileges required for OLE Remote Procedure Call debugging: this feature will not wo
- #pragma clang diagnostic
- android 系统Style,Theme,以及自定义模板(declare-style)
- 页面的缓存与不缓存设置
- 关于functioncharts饼状图篇
- POJ 1094 Sorting It All Out
- linux驱动中的链表操作
- php数组合并与拆分实例分析
- [leetcode] Construct Binary Tree from Preorder and Inorder Traversal
- Android app进入前的闪屏界面代码
- Levenberg–Marquardt algorithm
- 给程序员新人的一封信
- loadrunner 生成随机参数 Radom相关
- 设计模式(组合模式)
- MFC登陆窗口
- java回调函数的理解