jQuery技术

前端开发12个常用的JQuery代码片段(2)

字号+ 作者:H5之家 来源:H5之家 2017-09-17 10:03 我要评论( )

关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。 $(window).bind(load,function(){//IMAGERESIZE$(#product_cat_listimg).each(function(){varmaxWidth=120;varmaxHeight=120;varratio=

关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。

$(window).bind("load", function() {      // IMAGE RESIZE      $('#product_cat_list img').each(function() {           var maxWidth = 120;           var maxHeight = 120;           var ratio = 0;           var width = $(this).width();           var height = $(this).height();           if(width > maxWidth){            ratio = maxWidth / width;            $(this).css("width", maxWidth);            $(this).css("height", height * ratio);            height = height * ratio;           }           var width = $(this).width();           var height = $(this).height();           if(height > maxHeight){            ratio = maxHeight / height;            $(this).css("height", maxHeight);            $(this).css("width", width * ratio);            width = width * ratio;           }      });      //$("#contentpage img").show();      // IMAGE RESIZE });12.滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:

var loading = false; $(window).scroll(function(){  if((($(window).scrollTop() $(window).height()) 250)>=$(document).height()){       if(loading == false){            loading = true;            $('#loadingbar').css("display","block");            $.get("load.php?start=" $('#loaded_max').val(), function(loaded){                 $('body').append(loaded);                 $('#loaded_max').val(parseInt($('#loaded_max').val()) 50);                 $('#loadingbar').css("display","none");                 loading = false;            });       }  } }); $(document).ready(function() {  $('#loaded_max').val(50); })

您可以选择一种方式赞助本站

微信转账赞助

分享到各大网站

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习(一)----each遍历hasClass属性

    jQuery学习(一)----each遍历hasClass属性

    2017-09-11 13:02

  • 一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQ

    一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别

    2017-09-10 12:05

  • 15个强大的jQuery开发技巧和心得

    15个强大的jQuery开发技巧和心得

    2017-09-08 15:00

  • .is() VS .hasClass()

    .is() VS .hasClass()

    2017-09-07 17:37

网友点评
=