zoukankan      html  css  js  c++  java
  • hover动画

    var originalWidth = $(".post-thumb").width()
    var originalHeight = $(".post-thumb").height()
    $(".picDiv").height(originalHeight)
    
    window.onresize = function() {
        //窗口尺寸发生变化后清除掉mouseenter mouseleave事件 删除style 恢复到变化前的窗口大小
        $(".post-thumb").each(function() {
             $(this).removeAttr("style")
             //停止动画 否则图片无法正常宽高 一定一定要停止 我就是在这里卡了一天
            $(this).stop(true)   
        })
        
         $(".picDiv").removeAttr("style")
         originalHeight = $(".post-thumb").height()
         originalWidth = $(".post-thumb").width()
         $(".picDiv").height(originalHeight)
         $(".post-thumb").each(function() {
             $(this).hover(mouseEnterFunction,mouseLeaveFunction)        
          })
    
    }
    
    
    function mouseEnterFunction() {
         $(this).animate({ 
              originalWidth * 1.05,
             height: originalHeight * 1.05
         }, 
        { duration: 300 })
    }
    
    function mouseLeaveFunction() {
         $(this).animate({ 
              originalWidth, 
             height: originalHeight 
         }, 
        { duration: 300 }) 
    }

    .picDiv {
    overflow:hidden;
    position:relative;
    }

    .cid-qQ5Y03vkMR .team-item .item-image img {
    100%;
    overflow:hidden;
    position:absolute;
    left:0px;
    }

    每天进步一点点
  • 相关阅读:
    第十一次作业
    第十次作业
    第九次作业
    第八次作业
    第七次作业
    第六次作业
    Springboot 2.x 使用 Druid 数据源
    @ConditionalOnMissingBean、@Import 组合使用
    Springboot 2.x 整合 JDBC
    IDEA org.apache.maven.plugins:maven-jar-plugin 报红
  • 原文地址:https://www.cnblogs.com/miraclesakura/p/9056711.html
Copyright © 2011-2022 走看看