JS完结仿苹果尾巴部分职分栏菜单作用代码

作者: 网络应用  发布:2019-09-03

废话不多说了,直接给大家贴js代码了。

本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码。分享给大家供大家参考。具体如下:

 <!DOCTYPE html>
 <html>
 <head>
   <script src="jquery-...js" type="text/javascript"></script>
   <script type="text/javascript">
     $(document).ready(function () {
       var range = ;       //距下边界长度/单位px
       var elemt = ;       //插入元素高度/单位px
       var maxnum = ;      //设置加载最多次数
       var num = ;
       var totalheight = ;
       var main = $("#content");           //主体元素
       $(window).scroll(function () {
         var srollPos = $(window).scrollTop();  //滚动条距顶部距离(页面超出窗口的高度)
         //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
         //console.log("页面的文档高度 :"+$(document).height());
         //console.log('浏览器的高度:'+$(window).height());
         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);//滚动条当前位置距顶部距离+浏览器的高度
         if (($(document).height() - totalheight) <= range && num != maxnum) {//页面底部与滚动条底部的距离<range
           main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
           main.append("<div style='border:px solid tomato;margin-top:px;color:#ac" + (num % ) + (num % ) + ";height:" + elemt + "' >hello world" + srollPos + "---" + num + "</div>");
           num++;
         }
       });
     });
   </script>
 </head>
 <body>
   <div id="content" style="height:px">
     <div id="follow">this is a scroll test;<br />  页面下拉自动加载内容</div>
     <div style='border:px solid tomato;margin-top:px;color:#ac;height:'>hello world test DIV</div>
   </div>
 </body>
 </html>

这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动画效果非常流畅,以前发过这种效果,但是是使用了jQuery实现的,今天这个没有jQuery插件哦。

ps:原生JavaScript如何触发滚动条事件?

运行效果截图如下:

<script>
window.onscroll = function(){
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var scrollH = document.documentElement.scrollHeight||document.body.scrollHeight;
var clientH = document.documentElement.clientHeight||document.body.clientHeight
//console.log(scrollT +"+"+scrollH+"+"+clientH);
if(scrollT == scrollH - clientH){
console.log("到底部了");
}else if(scrollT == 0){
console.log("到顶部了");
}
}
</script>

图片 1

您可能感兴趣的文章:

  • 判断滚动条到底部的JS代码
  • 公共js在页面底部加载的注意事项介绍
  • 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨
  • 始终在页面底部的层js实现代码
  • Javascript实现DIV滚动自动滚动到底部的代码
  • js实现滚动条滚动到页面底部继续加载
  • JS实现仿苹果底部任务栏菜单效果代码
  • js实现带关闭按钮始终显示在网页最底部工具条的方法
  • JS实现判断滚动条滚到页面底部并执行事件的方法
  • js判断滚动条是否已到页面最底部或顶部实例
  • 详解基于javascript实现的苹果系统底部菜单

在线演示地址如下:

具体代码如下:

<!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"> 
body{margin:0;padding:0}
#menu{position:absolute;width:100%;bottom:0;text-align:center;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var oMenu = document.getElementById("menu");
 var aImg = oMenu.getElementsByTagName("img");
 var aWidth = [];
 var i = 0;
 //保存原宽度, 并设置当前宽度
 for (i = 0; i < aImg.length; i++)
 {
  aWidth.push(aImg[i].offsetWidth);
  aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
 }
 //鼠标移动事件
 document.onmousemove = function (event)
 {
  var event = event || window.event;
  for (i = 0; i < aImg.length; i++)
  {
   var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
   var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
   var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
   if (iScale < 0.5) iScale = 0.5;
   aImg[i].width = aWidth[i] * iScale
  }
 };
};
</script>
</head>
<body>
<div id="menu">
 <img src="images/1.png" />
 <img src="images/2.png" />
 <img src="images/3.png" />
 <img src="images/4.png" />
 <img src="images/5.png" />
 <img src="images/6.png" />
 <img src="images/7.png" />
 <img src="images/8.png" />
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

  • 判断滚动条到底部的JS代码
  • 公共js在页面底部加载的注意事项介绍
  • 滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨
  • 始终在页面底部的层js实现代码
  • Javascript实现DIV滚动自动滚动到底部的代码
  • js实现滚动条滚动到页面底部继续加载
  • 基于javascript实现浏览器滚动条快到底部时自动加载数据
  • js实现带关闭按钮始终显示在网页最底部工具条的方法
  • JS实现判断滚动条滚到页面底部并执行事件的方法
  • js判断滚动条是否已到页面最底部或顶部实例
  • 详解基于javascript实现的苹果系统底部菜单

本文由王中王开奖结果发布于网络应用,转载请注明出处:JS完结仿苹果尾巴部分职分栏菜单作用代码

关键词: