JS08(封装可视区域大小的函数、修改窗口改变页面颜色、冒泡的问题、弹出窗口点击空白处隐藏 、选定文字弹出层、动画基本原理、匀速动画封装函数、无限广告轮播图)
封装可视区域大小的函数
<script> function client() { if(window.innerWidth != null) // ie9 + 最新浏览器 { return { width: window.innerWidth, height: window.innerHeight } } else if(document.compatMode === "CSS1Compat") // 标准浏览器 { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } return { // 怪异浏览器 width: document.body.clientWidth, height: document.body.clientHeight } } document.write(client().width); </script>
改变页面颜色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script> function client() { if(window.innerWidth != null) // ie9 + 最新浏览器 { return { width: window.innerWidth, height: window.innerHeight } } else if(document.compatMode === "CSS1Compat") // 标准浏览器 { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } } return { // 怪异浏览器 width: document.body.clientWidth, height: document.body.clientHeight } } reSize(); // 页面一加载先调用函数 一次 window.onresize = reSize; // 不带括号，只要屏幕触发，就调用 reSzie 函数 //alert(reSize); function reSize() { var clientWidth = client().width; if(clientWidth > 960) { document.body.style.backgroundColor = "red"; } else if(clientWidth > 640 ) { document.body.style.backgroundColor = "green"; } else { document.body.style.backgroundColor = "blue"; } } </script>
冒泡的问题
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">点击</button> </body> </html> <script> var btn = document.getElementById("btn"); document.onclick = function() { alert("点击了空白处") } btn.onclick = function(event) { alert("点击了按钮") var event = event || window.event; if(event && event.stopPropagation) { event.stopPropagation(); // w3c 标准 } else { event.cancelBubble = true; // ie 678 ie浏览器 } } </script>
点击空白处隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { height:2000px; } #mask { width: 100%; height: 100%; opacity: 0.4; /*半透明*/ filter: alpha(opacity = 40); /*ie 6半透明*/ background-color: black; position: fixed; top: 0; left: 0; display: none; } #show { width: 300px; height: 300px; background-color: #fff; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -150px; display: none; } </style> </head> <body> <a href="javascript:;" id="login">注册</a> <a href="javascript:;">登录</a> <div id="mask"></div> <div id="show"></div> </body> </html> <script> function $(id) { return document.getElementById(id);} var login = document.getElementById("login"); login.onclick = function(event) { $("mask").style.display = "block"; $("show").style.display = "block"; document.body.style.overflow = "hidden"; // 不显示滚动条 //取消冒泡 var event = event || window.event; if(event && event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } //点击空白处 document.onclick = function(event) { var event = event || window.event; // alert(event.target.id); // 返回的是点击的某个对象的id 名字 // alert(event.srcElement.id); var targetId = event.target ? event.target.id : event.srcElement.id; // 看明白这个写法 if(targetId != "show") // 不等于当前点点击的名字 { $("mask").style.display = "none"; $("show").style.display = "none"; document.body.style.overflow = "visible"; // 显示滚动条 } } </script>
选定文字弹出层
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 400px; margin:50px; } #demo { width: 100px; height: 100px; background-color: pink; position: absolute; top: 0; left: 0; display: none; } </style> </head> <body> <span id="demo"></span> <div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div> <div id="another"> 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 </div> </body> </html> <script> function $(id) {return document.getElementById(id)} $("test").onmouseup = function(event) { var event = event || window.event; var x = event.clientX; // 鼠标的x坐标 var y = event.clientY; // 同理 var txt; // 用于存贮文字的变量 if(window.getSelection) // 获取我们选中的文字 { txt = window.getSelection().toString(); // 转换为字符串 } else { txt = document.selection.createRange().text; // ie 的写法 } if(txt) // 所有的字符串都为真 "" 是假 所有的数字为真 0 为假 { //看看有没有选中的文字，没有选中文字为空的，就不应该执行 点击一下鼠标 就是空的 showBox(x,y,txt); // 调用函数 } } document.onmousedown = function(event) { // 点击空白处隐藏 var event = event || window.event; var targetId = event.target ? event.target.id : event.srcElement.id; if(targetId != "demo"){ $("demo").style.display = "none"; } } function showBox(mousex,mousey,contentText) { // 相关操作 setTimeout(function() { $("demo").style.display = "block"; $("demo").style.left = mousex + "px"; $("demo").style.top = mousey + "px"; $("demo").innerHTML = contentText; },200) } </script>
动画基本原理
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } </style> </head> <body> <button>开始</button> <div></div> </body> </html> <script> //动画的基本原理 盒子的 offsetLeft + 步长 var btn = document.getElementsByTagName("button")[0]; var div = document.getElementsByTagName("div")[0]; var timer = null; btn.onclick = function() { timer = setInterval(function() { if(div.offsetLeft > 400) { clearInterval(timer); } div.style.left = div.offsetLeft + 10 + "px"; },20); } </script>
匀速动画封装函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box { position: absolute; width: 100px; height: 100px; background-color: pink; } #box1 { position: absolute; top: 150px; width: 200px; height: 200px; background-color: purple; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> <div id="box1"></div> </body> </html> <script> var box = document.getElementById("box"); var box1 = document.getElementById("box1"); var btn200 = document.getElementById("btn200"); var btn400 = document.getElementById("btn400"); btn200.onclick = function() { animate(box,200); animate(box1,500); } btn400.onclick = function() { animate(box,400); } // 封装匀速运动 function animate(obj,target){ clearInterval(obj.timer); // 先清除定时器 var speed = obj.offsetLeft < target ? 5 : -5; // 用来判断 应该 + 还是 - obj.timer = setInterval(function() { var result = target - obj.offsetLeft; // 因为他们的差值不会超过5 obj.style.left = obj.offsetLeft + speed + "px"; if(Math.abs(result)<=5) // 如果差值不小于 5 说明到位置了 { clearInterval(obj.timer); obj.style.left = target + "px"; // 有5像素差距 我们直接跳转目标位置 } },30) } </script>
无限广告轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; border:0;} .all{ width:500px; height:200px; padding:7px; border:1px solid #ccc; margin:100px auto; position:relative; } .screen{ width:500px; height:200px; overflow:hidden; position:relative; } .screen li{ width:500px; height:200px; overflow:hidden; float:left;} .screen ul{ position:absolute; left:0; top:0px; width:3000px;} .all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;} .all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;} .all ol li.current{ background:yellow;} </style> <script type="text/javascript"> function animate(obj,target){ clearInterval(obj.timer); // 先清除定时器 var speed = obj.offsetLeft < target ? 15 : -15; // 用来判断 应该 + 还是 - obj.timer = setInterval(function() { var result = target - obj.offsetLeft; // 因为他们的差值不会超过5 obj.style.left = obj.offsetLeft + speed + "px"; if(Math.abs(result)<=15) // 如果差值不小于 5 说明到位置了 { clearInterval(obj.timer); obj.style.left = target + "px"; // 有5像素差距 我们直接跳转目标位置 } },10) } window.onload = function() { // 获取元素 var box = document.getElementById("all"); // 大盒子 var ul = document.getElementById("ul"); var ulLis = ul.children; // 操作元素 // 因为我们要做无缝滚动 ，所以要克隆第一张，放到最后一张后面去 // a.appendchild(b) 把 b 放到 a 的最后面 // 1. 克隆完毕 ul.appendChild(ul.children[0].cloneNode(true)); // 2. 创建 ol 和 小 li console.log(ulLis.length); var ol = document.createElement("ol"); // 生成的是ol box.appendChild(ol); // 把ol 追加到 box 里面 for(var i=0;i<ulLis.length-1;i++) { var li = document.createElement("li"); li.innerHTML = i + 1; // 给里面小的li 文字 1 2 3 4 5 ol.appendChild(li); // 添加到 ol 里面 } ol.children[0].className = "current"; //3. 开始动画部分 var olLis = ol.children; for(var i=0; i<olLis.length;i++) { olLis[i].index = i; // 获得当前第几个小li 的索引号 olLis[i].onmouseover = function() { for(var j=0;j<olLis.length;j++) { olLis[j].className = ""; // 所有的都要清空 } this.className = "current"; animate(ul,-this.index*500) // 调用动画函数 第一个参数 谁动画 第二个 走多少 square = key = this.index; // 当前的索引号为主 } } // 4. 添加定时器 var timer = null; // 轮播图的定时器 var key = 0; //控制播放张数 var square = 0; // 控制小方块 timer = setInterval(autoplay,1000); // 开始轮播图定时器 function autoplay() { key++; // 先 ++ if(key>ulLis.length - 1) // 后判断 { ul.style.left = 0; // 迅速调回 key = 1; // 因为第6张就是第一张 第6张播放 下次播放第2张 } animate(ul,-key*500); // 再执行 // 小方块 square++; if(square > olLis.length -1) { square = 0; } for(var i=0;i<olLis.length;i++) // 先清除所有的 { olLis[i].className = ""; } olLis[square].className = "current"; // 留下当前的 } //last最后 鼠标经过大盒子要停止定时器 box.onmouseover = function() { clearInterval(timer); } box.onmouseout = function() { timer = setInterval(autoplay,1000); // 开始轮播图定时器 } } </script> </head> <body> <div class="all" id='all'> <div class="screen"> <ul id="ul"> <li><img src="images/taobao/1.jpg" width="500" height="200" /></li> <li><img src="images/taobao/2.jpg" width="500" height="200" /></li> <li><img src="images/taobao/3.jpg" width="500" height="200" /></li> <li><img src="images/taobao/4.jpg" width="500" height="200" /></li> <li><img src="images/taobao/5.jpg" width="500" height="200" /></li> </ul> </div> // ol </div> </body> </html>
