超实用的jQuery代码片段

 1.jQuery回到顶部效果

HTML代码：
<a href="javascript:;" id="btn" title="回到顶部"></a>

CSS代码：
<style>
       #btn{
            width:40px;
            height:80px;
            position:fixed;
            left:93%;
            bottom:30px;
            background:url(images/top_bg.png) no-repeat left top;
            display:none;
       }
       #btn:hover{
            background:url(images/top_bg.png) no-repeat left -40px;
       }
</style>

JS代码：
<script>
        window.onload=function(){
            var timer=null;
            var istop=true;

        //    获取屏幕可视区域的高度
            var clientHeight=document.documentElement.clientHeight;
        //    触发滚动条事件
            window.onscroll=function(){
        //        获得滚动条的高度
                var ostop=document.documentElement.scrollTop||document.body.scrollTop;
        //        如果滚动条的高度大于可视区域的高度
                if(ostop>=clientHeight){
　　　　//　　　　　设置a标签可见
                    btn.style.display='block';
                }else{
                    btn.style.display='none';
                }
                if(!istop){
                    clearInterval(timer);
                }
                istop=false;
            }

            $('#btn').click(function(){
　　　　//　　　　先清楚定时器，防止定时器叠加
                clearInterval(timer);
                timer=setInterval(function(){
                    var ostop=document.documentElement.scrollTop||document.body.scrollTop;
                    var ospeed=Math.ceil(ostop/5);
        //            设置滚动条的高度
                    document.documentElement.scrollTop=document.body.scrollTop=ostop-ospeed;
                    istop=true;
        //            如果滚动条的高度为0的时候
                    if(ostop==0){
                        clearInterval(timer);
                    }
                },30);
            })
        }
    </script>

 

 2.处理图片的尺寸

HTML代码：
<ul id="imglist">
      <li><img src="images/1.jpg" alt="" /></li>
      <li><img src="images/2.jpg" alt="" /></li>
      <li><img src="images/3.jpg" alt="" /></li>
      <li><img src="images/4.jpg" alt="" /></li>
      <li><img src="images/5.jpg" alt="" /></li>
      <li><img src="images/1.jpg" alt="" /></li>
      <li><img src="images/2.jpg" alt="" /></li>
      <li><img src="images/3.jpg" alt="" /></li>
      <li><img src="images/4.jpg" alt="" /></li>
      <li><img src="images/5.jpg" alt="" /></li>
      <li><img src="images/1.jpg" alt="" /></li>
      <li><img src="images/2.jpg" alt="" /></li>
      <li><img src="images/3.jpg" alt="" /></li>
</ul>

CSS代码：
<style>
        #imglist{
          list-style:none;
        }

        #imglist li{
          float:left;
          margin:10px;
        }
</style>

JS代码：
<script>
        
            // 图片修改大小
            $('#imglist img').each(function() {
                var maxWidth = 180;
                var maxHeight = 180;
                var ratio = 0;
                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;
                }
                
                //如果图片的实际宽度大于最大的宽度
                if(width > maxWidth){
                //    求出设置的最大宽度是图片实际宽度的百分比
                    ratio = maxWidth / width;
                    $(this).css("width", maxWidth);
                    $(this).css("height", height * ratio);
                    height = height * ratio;
                } 
            });
 </script>

 3.判断键盘输入

$(document).ready(function () {
     $(this).keypress(function (e) {
          switch (e.which) {
              case 13:
                   alert("您按下了回车键");
                   break;
              //more detect
           }
     });
});

4.倒计时，页面跳转

$(document).ready(function () {
         var count = 10;
         var timer = setInterval(function () {
         $("p.countdown").html(count + " 秒后将跳转！");
                if (count == 0) {
                    clearInterval(timer)
                    window.location = 'http://google.com';
                }
                count--;
         }, 1000);
});