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 >