javascript制作苹果系统菜单,带详细注释
2018-03-03 14:54
471 查看
html代码: <div class="nav"><!--class="自定义的名字" 命名规范(见名知义:用有语义的英文单词)-->
<img src="images/1.png" width="64"><!--图片标签设置了宽度 高度会等比例自动缩放-->
<img src="images/2.png" width="64">
<img src="images/3.png" width="64">
<img src="images/4.png" width="64">
<img src="images/5.png" width="64">
</div>
css代码:
<style>/* css 样式*/ /* 第一步:找到对应的标签元素 第二步:设置相应的属性 */ *{/*通用选择器:选择到所有的标签元素*/ margin:0;/*外边距*/ padding:0;/*内边距*/ } .nav{/* . class类选择器*/ position:absolute;/*绝对定位:因为其父元素都没有设置定位属性所以他相对于浏览器窗口来定位了*/ bottom:0;/*距离参考物下端的距离*/ width:100%;/*和父元素宽度一样*/ /*height:100px;高度* background:red;*背景颜色*/ text-align:center;/*文本居中*/ } </style>javascript代码:
<script> //定义一个变量来保存所有的图片标签元素 //document.getElementsByTagName 在document文档下面通过标签名来获取元素 var oImg = document.getElementsByTagName("img"); var oDiv = document.getElementsByClassName("nav")[0]; //console.log(oImg.length); //当鼠标在文档里面移动的时候执行什么功能 document.onmousemove = function(ev){ //获取鼠标的坐标值 var ev = ev || window.event;//做浏览器兼容处理 for (var i=0;i<oImg.length ; i++) { //获取每个图片标签中心点的坐标 //offsetTop 获取元素距离有定位属性的父元素的上边的距离 var x = oImg[i].offsetLeft + oImg[i].offsetWidth/2; var y = oImg[i].offsetTop + oImg[i].offsetHeight/2+oDiv.offsetTop; //console.log(x +":"+ y); //clientX鼠标距离浏览器窗口可视区域的距离 var a = ev.clientX - x;//坐标x之间的距离 var b = ev.clientY - y;//坐标y之间的距离 //勾股定理计算斜边尺寸 //Math.pow 幂函数 //Math.pow(a,2)//a的平方 //Math.sqrt()开平方 var c = Math.sqrt(Math.pow(a,2)+Math.pow(b,2)); //计算一个缩放比例 var scale = 1 - c/300; //console.log(scale); //控制缩放的范围 if(scale < 0.5){ scale = 0.5; } oImg[i].width = scale*128; } } </script>
想学习web前端或者正在学习web前端的小伙伴可以来我的前端群,542827633,有视频、源码、学习方法等大量干货分享。
相关文章推荐
- javascript--苹果系统底部菜单--详细分析
- javascript--苹果系统底部菜单--详细分析(转)
- 使用 Javascript 并结合 XML 制作滑动透明的菜单,且该菜单拥有跟随鼠标的注释 (转载)
- 使用 Javascript 并结合 XML 制作滑动透明的菜单,且该菜单拥有跟随鼠标的注释
- 详解基于javascript实现的苹果系统底部菜单
- Javascript制作的评星打分系统
- 苹果电脑安装双系统Mac和Win7,详细教程
- 制作带busybox的U盘文件系统详细步骤
- Git的详细使用方法适用于window Linux 以及苹果系统 网址
- 用U盘制作并安装WIN10 64位原版系统的详细教程
- CorelDRAW苹果水晶球详细制作
- Win7下安装苹果MAC OS X Mountain Lion 双系统详细图文教程
- javascript发表日志系统制作
- 苹果 mac osx 下吧iOS镜像写入u盘制作系统安装盘
- MFC中菜单的应用(注释详细)
- 机房收费系统(VB.NET)——超详细的报表制作过程
- 苹果Mac os系统u盘安装系统制作教程
- Linux内核移植和根文件系统制作(详细步骤精讲)
- Android_系统工具_draw9patch超详细教程制作.9.png
- Zedboard-制作根文件系统【详细讲解版】