zoukankan      html  css  js  c++  java
  • 鼠标悬停图片放大

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标经过图片</title>
    </head>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <style>
    *, *:before, *:after{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
    body ,a{ text-decoration:none; font-family: "微软雅黑"; }
    .pic_hover{ 1230px; margin:auto }
    .pic_hover li{ list-style:none; float:left; margin:5px; position:relative; }
    .pic_hover li .img{ 400px; height:300px; overflow:hidden; display:block;}
    .pic_hover li .img img{ 100%; height:100%; transform: scaleY(1);transition: all 0.3s ease-in-out 0s;}
    .pic_hover li .img:hover img{ 120%; height:120%; margin-left:-10%; margin-top:-10%;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    .text{ background:rgba(0,0,0,0.8); color:#fff; position:absolute; 100%; height:100%; left:0; top:0; display:none; vertical-align:middle; font-size:30px; text-align:center; }

    </style>


    <body>

    <div class="pic_hover">
    <li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题1</span></li>
    <li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题2</span></li>
    <li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题3</span></li>
    <li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题4</span></li>
    <li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题5</span></li>
    <li><span class="img"><img src="images/1.jpg" title="" alt=""> </span><span class="text">标题6</span></li>
    </div>
    <script type="text/javascript">
    $(".pic_hover li").mouseover(function(){
    $(this).find(".text").show();
    $(this).find(".img img").css({"width": "120%", "height": "120%","margin-left":"-10%","margin-top":"-10%","transform:":"scaleY(1)","transition:":" all 0.3s ease-in-out 0s" });
    });
    $(".pic_hover li").mouseout(function(){
    $(this).find(".text").hide();
    $(this).find(".img img").css({"width": "100%", "height": "100%","margin-left":"0","margin-top":"0" ,"transform:":"scaleY(1)","transition:":" all 0.3s ease-in-out 0s" });
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    IDEA导入jar包
    怎么在idea中新建package包,只有directory选项
    Python在自动化运维时经常会用到的方法
    SocketServer 网络服务框架
    导入自定义包
    socket编程
    在线安全清空慢查询日志slowlog
    OS X中微信双开
    OS X中crt中文乱码
    谈谈TCP中的TIME_WAIT
  • 原文地址:https://www.cnblogs.com/wangbei2016/p/5725333.html
Copyright © 2011-2022 走看看