• 超实用的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);
    });
  • 相关阅读:
    notebook笔记
    from __future__ import absolute_import
    GUI
    version_info
    函数参数
    None
    exec、eval
    os
    IGeometry接口
    IGeometry接口
  • 原文地址:https://www.cnblogs.com/wanf/p/7427792.html
Copyright © 2020-2023  润新知