12/23

今天总结一下那个点菜的网页。那个网页的js除了点菜的加减运算其他的都用的是插件。

1.Adaptive  是一网页自适应的框架。

使用方法：

 

1 2 3 4 5 6

<script src="js/adaptive.js"></script>  <script>  window['adaptive'].desinWidth = 640;// 设计图宽度  window['adaptive'].baseFont = 18;// 没有缩放时的字体大小  window['adaptive'].init();// 调用初始化方法  </script>

然后在css中设置相应样式即可：

 

1 2 3 4 5 6 7 8 9 10 11 12 13

.main-info { height: 0.88rem; padding-bottom: 0.24rem; } .fund-info { position: relative; font-weight: normal; padding: 0.2rem 0; padding-right: 1.7rem; padding-left: 0.23rem; font-size: 0.32rem; line-height: 1; }

利用rem布局，根据公式  

html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度  

设置html元素的font-size,然后根据设计图大小/100即为css大小。  
比如一个div设计图宽度为89px,那么在css中我们可以这样书写：width:0.89rem;  
如果是文字，我们也建议使用rem。  

对于iphone的retina高清显示屏，我们做了缩放处理，以达到最佳显示效果。

 

 

2jquery.nav 是网页顶部导航定位滚动内容插件

文件引用：

1 2 3 4 5 6 7

<script src="js/jquery.min.js"></script> <script src="js/jquery.nav.js"></script> <script> $(function(){     $('#nav').onePageNav(); }); </script>

 

3.navbar.js  是一个导航插件  

是个能在滚动页面的时候帮用户固定导航条在浏览器窗口的顶部的 jQuery 插件，。用户还可以添加自己喜欢的 jQuery 效果或者是迷人的 CSS 库来美化导航。

  

4.waypoints.min 滚动监听事件

在使用Waypoints插件之前，首先需要包含一个jQery文件，然后包含下载的插件

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/waypoints.min.js"></script>

 

这个时候你就可以尽情的使用Waypoints插件了, 最简单的使用方法是调用.waypoint，并传递到一个函数中

$('#example-basic').waypoint(function() {
  notify('Basic example callback triggered.');
});