web前端javaScript仿京东淘宝图片鼠标浮动图片上移效果

1.添加浮动css样式

 .a{-webkit-transform: translateY(-5px);-moz-transform: translateY(-5px);-ms-transform: translateY(-5px);transform: translateY(-5px);-webkit-transition: -webkit-transform .4s ease;transition: -webkit-transform .4s ease;-moz-transition: transform .4s ease,-moz-transform .4s ease;transition: transform .4s ease;transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;  }.b{-webkit-transform: translateY(0px);-moz-transform: translateY(0px);-ms-transform: translateY(0px);transform: translateY(0px);-webkit-transition: -webkit-transform .4s ease;transition: -webkit-transform .4s ease;-moz-transition: transform .4s ease,-moz-transform .4s ease;transition: transform .4s ease;transition: transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease;  }

2.javaScript中添加class

 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(document).ready(function(e) {
    

  $(".div2img").hover(function(){
    
       $(this).addClass("a");
        $(this).removeClass("b");
      },function(){    $(this).removeClass("a");$(this).addClass("b");})
     
         }</script >