js基础8-应用案例
来源：互联网 发布：淘宝一元秒杀 编辑：程序博客网 时间：2024/05/01 14:17
1. 筋斗云
css布局
云 .cloud 在字的下面，需设置 .nav ul{ position:absolute; top:0; left:0; } ul>li 需放在span. cloud后面，字压云
/* 移动的云 .cloud一定要设置 .nav ul{ position:absolute; top:0; left:0; }
<style> *{ margin:0;padding: 0; } body{ background-color: #000; } .nav{ width: 800px; height: 42px; background-color: #fff; margin: 100px auto; border-radius: 5px; background: url(images/rss.png) no-repeat right top #fff; position: relative; } .nav .cloud{ /* 移动的云 .cloud一定要设置 .nav ul{ position:absolute; top:0; left:0; } width: 83px; height: 42px; background: url(images/cloud.gif) no-repeat;position: absolute;top: 0；left:0; } .nav ul{ /* 字压云，云 .cloud 在字的下面，需设置 .nav ul{ position:absolute; top:0; left:0; } */ list-style: none;position: absolute;top:0;left: 0; } .nav ul li{float: left;width: 83px;height: 42px;text-align: center;line-height: 42px;color: #000;cursor: pointer; } </style><body><div class="nav"><span class="cloud"></span><ul> <!-- 需放在.cloud的后面， ul>li 需放在span. cloud后面，字压云 --><li>首页新闻</li> <li>师资力量</li> <li>活动策划</li> <li>企业文化</li> <li>招聘信息</li> <li>公司简介</li> <li>上海校区</li> <li>广州校区</li></ul></div></body>js思路
先写缓动公式，再按照逻辑写
<script type="text/javascript">window.onload = function(){var nav = document.getElementById("nav");var cloud = document.getElementById("cloud");var lis = nav.children[1].children;var current = 0;for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function(){target = this.offsetLeft;}lis[i].onmouseout = function(){target = current;//鼠标离开时回到鼠标点击的位置}lis[i].onclick= function(){current = this.offsetLeft;//鼠标点击时获取当前的offsetleft}}//缓动公式var leader = 0;var target = 0;setInterval(fn, 30);function fn(){leader = leader + (target-leader)/10;cloud.style.left = leader + "px";}}</script>2. 点击跟随鼠标
如何使用offset家族以及event事件
原理 target = clientX
css布局中，移动的一定要加 /* 移动的云 .cloud一定要设置 .nav ul{ position:absolute; top:0; left:0; }
<style> #image { width: 99px; position: absolute; /* 一定要加定位 */ top:0; left: 0; } </style><body><img src="images/img.jpg" alt="" id="image"/></body>
<script> var image = document.getElementById("image"); document.onclick = function(event){ var event = event || window.event; targetX = event.clientX - image.offsetWidth/ 2; targetY = event.clientY - image.offsetHeight/ 2; } //缓动公式 var targetX = 0; var targetY = 0; var leaderX = 0; var leaderY = 0; setInterval(fn, 10); function fn(){ leaderX = leaderX + (targetX-leaderX)/10; leaderY = leaderY + (targetY-leaderY)/10; image.style.left = leaderX + "px"; image.style.top = leaderY + "px"; } </script>3. 09 求在某个盒子内的坐标 复习event以及offset家族的使用
<style> *{margin:0; padding:0;} .demo { width: 400px; height: 400px; background-color: pink; margin: 100px; } </style><body><div class="demo"></div></body>
<script> var div = document.getElementsByTagName("div")[0]; div.onmousemove = function(event) { var event = event || window.event; var x = event.clientX - this.offsetLeft; var y = event.clientY - this.offsetTop; this.innerHTML = x + "px" + y + "px"; }</script>
4. 放大镜 思路
css布局思路：
Css布局原理：左边大盒子放着右边盒子以及绿色盒子，绿色盒子里面包含小橘黄色盒子，小橘黄色盒子必须在绿色盒子里移动
.box 里面包含.small 和 .big ，.small 包含 img 001.jpg 和 .mask ，.big包含img 0001.jpg ，结构如上图
然后big进行定位 ，之后 。mask进行定位，移动的一定要加 /* 移动的 .mask一定要设置 .mask{ position:absolute; top:0; left:0; }
html结构必须这样，记住
<body><div class="box"> <!--小盒子--> <div class="small"> <img src="images/001.jpg" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="images/0001.jpg" alt=""/> </div></div></body>
<style> * {margin: 0;padding: 0;} .box { width: 350px; height: 350px; margin:100px; border: 1px solid #ccc; position: relative; } .big { width: 450px; height: 450px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; } .mask { width: 100px; height: 100px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; } .small { position: relative; } </style>js思路
small onmouseover 和 onmouseout 显示隐藏，一定是small
small. onmouseout 获取盒子内坐标，mask以及big根据坐标移动
. big img 加定位
<style> * {margin: 0;padding: 0;} img { vertical-align: top; } .box { width: 350px; height: 350px; margin:100px; border: 1px solid #ccc; position: relative; } .big { width: 450px; height: 450px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 100px; height: 100px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } .big img { position: absolute; top: 0; left: 0; } </style><script> var fdj = document.getElementById("fdj"); // 获得最大的盒子 var small = fdj.children[0]; // 获得small 小图片 350盒子 var big = fdj.children[1]; // 获得 大图片 800 盒子 var mask = small.children[1]; // 小的黄色盒子 var bigImage = big.children[0]; // 大盒子里面的图片 small.onmouseover = function() { // 鼠标经过显示出他们 mask.style.display = "block"; big.style.display = "block"; } small.onmouseout = function() { mask.style.display = "none"; big.style.display = "none"; } // 鼠标在small 内移动 var x = 0; var y = 0; small.onmousemove = function(event) { var event = event || window.event; x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标 //alert(this.offsetLeft); y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2; if(x < 0) { x = 0; } else if(x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth; } if(y<0) { y = 0; } else if(y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight; } mask.style.left = x + "px"; mask.style.top = y + "px"; /*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 4个馒头 问 夫子今天吃了 3个馒头 娇子应该吃几个？ */ /*计算出他们的倍数 4 / 2 2倍 3 * 2 == 6个 */ /* 大图盒子 / 小图盒子 倍数 我们 再小图移动的距离 * 倍数 == 大图的位置*/ bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px"; bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px"; }</script>5. 水平拖动滚动条 应用于鼠标拖动窗口走
1.拖动原理== 鼠标按下 接着移动鼠标。
bar.onmousedown =function(){ //鼠标按下时记录当前距离
document.onmousemove = function(){ //鼠标拖动时，根据坐标移动
}
}
2. 当我们按下鼠标的时候，就要记录当前 鼠标的位置 - 大盒子的位置
算出 bar 当前在 大盒子内的距离 。
<style type="text/css"> .scrollBar{ width: 400px; height: 8px; background-color: #ccc; margin: 100px auto; position: relative; } .bar{ width: 10px; height: 25px; position: absolute; background-color: #369; top: -7px; left: 0; cursor: move; } .mask{ //遮罩盒子采用星级原理 position: absolute; top: 0; left: 0; width: 0; height: 8px; background-color: #369; } </style><body><div class="scrollBar" id="scrollBar"> <div class="bar" id="bar"></div> <div class="mask" id="mask"></div></div><div id="demo"></div></body>
<script type="text/javascript"> var scrollBar = document.getElementById("scrollBar"); var bar = document.getElementById("bar"); var mask = document.getElementById("mask"); bar.onmousedown = function(event){ // bar.onmousedown 的时候记录距离 var event = event || window.event; var leftval = event.clientX - scrollBar.offsetLeft; document.onmousemove = function(event){//document.onmousemove进行获取坐标移动 var event = event || window.event; var x = event.clientX-leftval-scrollBar.offsetLeft + "px"; var t = parseInt(x); if (t < 0) { t = 0; }else if(t > scrollBar.offsetWidth-bar.offsetWidth){ t = scrollBar.offsetWidth-bar.offsetWidth +"px"; } bar.style.left = t + "px"; mask.style.width = t + "px"; //遮罩盒子的宽度，采用星星原理 } var demo = document.getElementById("demo"); demo.innerHTML = parseInt(bar.style.left) / 390 * 100 + "%" ; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } bar.onmouseup = function(){ document.onmousemove = null; //采用这种方式，鼠标弹起时不做任何操作 }</script> 0 0
- js基础8-应用案例
- js基础3应用案例
- js基础1应用案例
- js基础2应用案例
- js基础4-应用案例
- js基础5应用案例
- js基础6-应用案例
- js基础7-应用案例
- js基础9应用案例
- js基础10-应用案例
- js基础11应用案例
- 一些JS基础应用
- jS事件基础应用
- Node.js的首次应用小案例
- 26 JS基础之--数组API-案例
- 读书笔记_UML基础,案例与应用
- C++语言基础 例程 二进制文件应用案例
- 读《UML基础、案例与应用》有感
- 使用nodepad++创建html模板
- hibernate自定义主键生成器详解
- 分享一个react + redux 完整的项目，同时写一下个人感悟
- CentOS7安装MariaDB成功的实践
- 一道被"坑"到的前端Javascript面试题
- js基础8-应用案例
- HDU2717 Catch That Cow
- centos7.2快速运行web项目
- Jekyll+GitHub搭建个人博客
- Java中继承thread类与实现Runnable接口的区别
- 设计模式二：工厂方法模式
- HDU 2012 素数判定
- Leetcode——501. Find Mode in Binary Search Tree
- JavaScript获取get方式的请求参数值
