Post Jobs

PC和移动端,jQuery结合CSS制作动态的下拉菜单

 结果正确: 

CSS 分别给菜单建立起CSS样式,请看代码:

优势
1.良好的体验。全程异步,线程不会阻塞。
2.代码优雅。不需要复杂的嵌套,框架帮你自动完成嵌套工作,你只需要关注编码本身,易于维护。
3.简单易用。build(function(){ })
你可以理解成C#的Thread,我开多一个线程去执行function(){} 
(JS是单线程的,这点要强调下!) 

*接下来介绍小技巧,非常实用,它能保证一个元素无论大小如何变化,比例始终保持一致。这个技巧尤其适用于移动端,因为元素为了响应式通常使用百分比的形式。

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;} 
      function Test() {
      var TestMethod = function () {
        alert(1);
      };
      var func = js.Build(function () {
        _$Async(function () {
          TestMethod();
        });
      });
    }

因此会有一些很严重的问题,当网络不好的时候图片没有完全加载完成就会出现图片展示不全高度缺失的情况,这点在移动端很明显。而且当我们加载更多时,更难判断新追加的图片是否加载完成。

一目了然,看起来非常简洁,由于下拉菜单开始是关闭的,我还要建立一个可视的可触发下拉的按钮,本文为了方便直接使用了一张图片作为触发按钮。并将图片放置菜单列表上部

4.简单易扩展。(请将所有要执行的方法用_$Async‘包住’)
5.易于调试。
缺点 1.build(function(){ }),函数内不支持自定义局部变量,如var
a=1;
 如果想使用局部变量,只能:        

我们用百度图片作为范例:

XHTML
首先是要在页面的head部分引入jquery库,这是必须的。

1.异步JS的重要性
随着Web平台地位的提升,霸占着浏览器的JavaScript语言也成为了世界上最流行的语言之一,甚至通过Node.js进入了服务器编程领域。JavaScript的一个重要特性便是“不能阻塞”,这里的“不能”是指“不应该”而不是“无法”的意思(只要提供阻塞的API)。

图片 1

接着我使用一个无序列表来构建菜单。

请使用 

首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动:

<script type="text/javascript" src="js/jquery.js"></script> 

图片 2

<div class="box box-item">
 <div class="img" data-src="./resource/images/1.jpg"></div>
 <div class="desc">Description</div>
</div>

图片 3

您可能感兴趣的文章:

  • ajax 异步获取数据实现代码
    (js创建ajax对象)
  • js 异步处理进度条
  • js 实现图片预加载(js操作 Image对象属性complete ,事件onload
    异步加载图片)
  • 详谈 Jquery
    Ajax异步处理Json数据.
  • js异步加载的三种解决方案
  • jQuery
    Ajax异步处理Json数据详解
  • js
    异步操作回调函数如何控制执行顺序
  • js中同步与异步处理的方法和区别总结
  • AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
  • jquery的ajax异步请求接收返回json数据实例
  • 我的Node.js学习之路(三)–node.js作用、回调、同步和异步代码
    以及事件循环
  • 使用jquery.upload.js实现异步上传示例代码
  • asp.net+ajaxfileupload.js
    实现文件异步上传代码分享
  • 详谈nodejs异步编程
  • angularjs
    处理多个异步请求方法汇总
.box {
 width: 50%;
 height: 0;
 padding-bottom: 100%;
}

值得注意的是,.menu
li.alt样式是用来区分奇偶行换行要用的,在下文的jquery代码中会体现。
jQuery 在jQuery代码中,首先我要个下拉菜单行数进行区分,分别给偶数行一个样式:alt。接着为图片按钮添加单击触发事件,当单击按钮时可以切换下拉菜单。

<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.8.2.min.js"></script>
  <script src="AsyncJavaScript.js"></script>
  <script>
    function Show() {
      var js = new AsyncJs();
      var url = "WebForm1.aspx";
      var func = js.Build(function () {
        _$Async(function () {
          alert("点击后开始第一次ajax请求");
        });
        _$Async({
          url: url,
          data: { val: "第一次ajax请求" },
          success: function (data) {
            alert("第一次请求结束,结果:" + data);
          }
        });
        _$Async(function () {
          alert("点击后开始第二次ajax请求");
        });
        var result = _$Async({
          url: url,
          data: { val: "第二次ajax请求" },
          success: function (data) {
            return data;
          }
        });
        _$Async(function () {
          alert("第二次请求结束,结果:" + result);
        });

      });
      eval(func);
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <input type="button" onclick="Show()" value="查询" />
      <input type="text" />
    </div>
  </form>
</body>
</html>

使用背景图的方式还有好处那就是可以比较方便的实现懒加载。那什么是懒加载呢?就是当元素在我们的视野中时才展示图片,滚动时屏幕下方的图片并不展示,这可以很好的增加加载速度提升体验。

您可能感兴趣的文章:

  • jQuery+CSS
    实现的超Sexy下拉菜单
  • jquery
    多级下拉菜单核心代码
  • 用jquery实现下拉菜单效果的代码
  • jQuery
    ul标签下拉菜单演示代码
  • 来自国外的30个基于jquery的Web下拉菜单
  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
  • Jquery带搜索框的下拉菜单
  • JQuery设置获取下拉菜单某个选项的值(比较全)
  • jQuery结合CSS制作漂亮的select下拉菜单
  • jquery+css实现绚丽的横向二级下拉菜单-附源码下载

从异步JS的重要性开始说起,再引入异步js框架,一步步的深入了解异步JS。

 最后有一点要注意,因为我们没有像百度一样用一个个列盒子去装,而是用定位的方式。导致的问题是图片元素的父级没法自适应高度,如果你有相关的需求我们可以计算出所有列中最长的长度,并将这个值赋值给父容器的min-height属性:

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul> 

可以看到完全是按顺序执行,并且线程无阻塞。

var boxArr = $('.box'),
 columnHeightArr = [];
columnHeightArr.length = 2;

boxArr.each(function(index, item) {
  if (index < 2) {
    columnHeightArr[index] = $(item).outerHeight(true);
  } else {
    var minHeight = Math.min.apply(null, columnHeightArr),
 minHeightIndex = $.inArray(minHeight, columnHeightArr);

    $(item).css({
   position: 'absolute',
   top: minHeight,
   left: boxArr.eq(minHeightIndex).position().left
 });

    columnHeightArr[minHeightIndex] += $(item).outerHeight(true);
  }
});
$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
}); 

a,b,c会按顺序执行,且线程不会阻塞。

以上就是为大家分享的关于jQuery瀑布流布局,内容很丰富,需要大家一点点的理解消化,真正的做到学以致用,希望能够帮助到大家。

注意**,**我使用了jQuery的slideToggle方法以滑动的方式实现菜单的显示和隐藏,效果非常流畅。

以上就是介绍了异步JS框架的作用以及实现方法,希望对大家的学习有所帮助,真正理解异步js的重要性。

动手

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足。本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单。

2.异步JS框架登场
假如现在有3个ajax请求,分别为A,B,C。A执行完后才能执行B,B执行完后才能执行C。这样我们就不得不嵌套了,在A的回调函数里执行B,然后在B的回调函数里执行C。这样的代码非常不友好。
本着‘专业造轮子’的原则,我的异步JS框架出发了!
大致结构-  

图片 4

以上就是分享的jQuery结合CSS制作动态的下拉菜单,希望对大家的学习有所帮助。

后台C#代码   

$(window).scroll(function() {
 scrollLoad();
 lazyLoad(); 
});
<img src="nav.gif" width="184" height="32" class="menu_head" /> 
 protected void Page_Load(object sender, EventArgs e)
    {
      string val = Request.QueryString["val"];
      if (!string.IsNullOrEmpty(val))
      {
        Thread.Sleep(2000);
        Response.Write(val + "返回结果");
        Response.End();
      }
    }
var dataArr = [
 {picUrl:'./resource/images/1.jpg',width:522,height:783},
 {picUrl:'./resource/images/2.jpg',width:550,height:786},
 {picUrl:'./resource/images/3.jpg',width:535,height:800},
 {picUrl:'./resource/images/4.jpg',width:578,height:504},
 {picUrl:'./resource/images/5.jpg',width:1440,height:900}
 ];

 $.each(dataArr, function(index, item) {
 $("body").append('<div class="box box-item">' +
  '<div class="img" style="height:0;padding-bottom:'+cRate(item) * 100 + "%"+'" data-src="'+item.picUrl+'"></div>' +
  '<div class="desc">Description</div>' +
  '</div>');
 });

 var boxArr = $('.box'),
 num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
 columnHeightArr = [];
 columnHeightArr.length = num;

 arrangement();

  $('body').css('minHeight',Math.max.apply(null, columnHeightArr));

 lazyLoad();

 function arrangement() {
 boxArr.each(function(index, item) {
 if (index < num) {
 columnHeightArr[index] = $(item).outerHeight(true);
 } else {
 var minHeight = Math.min.apply(null, columnHeightArr),
  minHeightIndex = $.inArray(minHeight, columnHeightArr);
 $(item).css({
  position: 'absolute',
  top: minHeight,
  left: boxArr.eq(minHeightIndex).position().left
 });
 columnHeightArr[minHeightIndex] += $(item).outerHeight(true);
 }
 });
 }

 function lazyLoad() {
 var boxArr = $('.box-item');
 boxArr.each(function(index, item) {
 var viewTop = $(item).offset().top - $(window).scrollTop(),
 imgObj = $(item).find('.img');
 if ((viewTop < $(window).height()) && ($(item).offset().top + $(item).outerHeight(true) > $(window).scrollTop())) {
// console.log($(item).attr('data-src'));
 imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src');
 $(item).removeClass('box-item');
 }
 })
 }

 function cRate(obj) {
 return obj.height / obj.width;
 }

 function scrollLoad() {
 var viewHeight = $(window).scrollTop() + $(window).height(),
 minHeight = Math.min.apply(null, columnHeightArr);
 if (viewHeight >= minHeight) {
 //loadMore...
 }
 }

 $(window).scroll(function() {
 lazyLoad();
 scrollLoad();
 });
      new Thread(() =>
      {
        //dosomething
      });

该函数需要在你的元素已经append进页面时调用,以及在滚动时调用:

2._$Async();必须要以‘;’结尾。
3.build(function(){ }) 函数内不能直接调用外部函数,如  

首先我们在获得图片地址时同时也需要获取图片的宽和高
,这点对服务端后台来说并不是什么难事,可以拜托后台兄弟将图片的宽高数据拼进JSON,传递给你;

也许大家会好奇,到底如何实现的?又或者为什么不将eval(r)封装起来?

这里比如最外层的box宽度为220px,里面的img元素宽度就可以为100%,高度就可以通过padding挤出了。 

你是不是也曾因为ajax异步,只能在回调函数里嵌套逻辑而发狂?这样的代码看起来非常糟糕。如果使用同步,代码可以不用嵌套。但如果请求时间过长,又会因为线程阻塞,导致浏览器假死。真是非常苦恼。看来优雅的代码和良好的用户体验不能兼得了。

效果:

 var js = new AsyncJs();
      var func = js.Build(function () {
        var a = _$Async({
          url: "",
          success: function () {

          }
        });
        var b = _$Async({
          url: "",
          success: function () {

          }
        });
        var c = _$Async({
          url: "",
          success: function () {

          }
        });
      });
      eval(func);

图片 5

     function Test() {
      var TestMethod = function () {
        alert(1);
      };
      var func = js.Build(function () {
        TestMethod();
      });
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图