跟随鼠标的DIV和一连串跟随鼠标的DIV

1. 跟随鼠标的DIV

 1     window.onmousemove = function(ev) {
 2         //浏览器兼容
 3         var oEvent = ev || event;
 4         var oDiv = document.getElementById("div1");
 5
 6         //页面滚动的距离
 7         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 8         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
 9
10         oDiv.style.top = scrollTop + oEvent.clientY + "px";
11         oDiv.style.left = scrollLeft + oEvent.clientX + "px";
12     };

2. 一连串跟随鼠标的DIV

 1     window.onload = function() {
 2         var divs = document.getElementsByTagName("div");
 3
 4         window.onmousemove = function(ev) {
 5             var oEvent = ev || event;
 6
 7             for (var i = divs.length - 1; i > 0; i--) {
 8                 divs[i].style.left = divs[i - 1].style.left;
 9                 divs[i].style.top = divs[i - 1].style.top;
10             }
11
12             divs[0].style.left = oEvent.clientX + "px";
13             divs[0].style.top = oEvent.clientY + "px";
14         }
15     };
时间: 2024-10-09 18:53:00

跟随鼠标的DIV和一连串跟随鼠标的DIV的相关文章

一连串跟随鼠标的DIV

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body{ background:gray; } div{ width:50px; height:50px; position:absolute; left:300px; top:300px; border-radius:50%; background:

HTML子div的宽度始终等于父div的宽度

最近我在做个人网页的时候,在一个div下插入了百度地图的API,这时问题来了,因为百度地图生成的是固定的大小,假如网页用手机端打开,会发现有部分地图看不到,为了解决这个问题,我把子div的宽度始终等于父div的宽度,这时就正常了 代码: <div id="bigone"> <div style="height:490px;border:#ccc solid 1px;-webkit-box-sizing:border-box;-moz-box-sizing:b

2016/3/30 ①投票checkbox ②进度条两个div套起百分比控制内div(width) &lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt; ③数据库test2 表 diaoyan... 35岁发展方向投票

分两个页面,要点:提交form 相连action method  两个页面可以合成一个页面action传到自身页面   但分开较清晰 第一个页面vote.php 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="h

JQuery实现点击div以外的位置隐藏该div窗口

简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(document).bind("click&

转载网页博客:ie7bug:div容器下的img与div存在间隙

1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一个接收动态添加div的容器 <div> 功能区域 <br /> <input id="1" type="checkbox" value="新闻" name="11" />新闻 <input id="2" type="checkbox"

Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决

当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的 当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题. 先来看看这个问题的实际效果 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/

如何判断一个Div是否可视区域,判断div是否可见

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js</title> <script src="http://code.jquery.com/jquery-

父级div宽度100%,子级一个div宽度固定,另一个宽度自适应

<!DOCTYPE html> <html> <head> <title>布局测试</title> <style type="text/css"> /*第一种方式*/ .div-box1 { width: 100%; } .div1 { width: 100px; height: 100px; background-color: red; float: left; } .div2 { height: 100px;