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;
    }

    每天进步一点点
  • 相关阅读:
    端口
    log4j常用配置以及日志文件保存位置
    jbpm node signal
    JBPM3.2 TABLE
    JBPM TaskInstance 对象创建过程
    【转】链接脚本
    快速平方根倒数
    GPS开发之知识储备(NMEA0183)
    HEX文件格式和其校验算法
    NRF51822之IIC(MEMS_LIS2DH12)
  • 原文地址:https://www.cnblogs.com/miraclesakura/p/9056711.html
Copyright © 2011-2022 走看看