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>

  • 相关阅读:
    021.day21 反射 Class类 反射常用操作
    020.day20 线程概述 多线程优缺点 线程的创建 线程常用方法 生命周期 多线程同步
    019.day19 缓冲流 对象流 标准输入输出流
    018.day18 map集合如何实现排序 File类 IO流 字节流 字符流 编码
    017.day17 Map接口 克隆 treeSet集合排重缺陷
    016.day16 HashSet TreeSet 比较器Comparable Comparator
    015.day15
    014.day14
    013.day13
    线程
  • 原文地址:https://www.cnblogs.com/wangbei2016/p/5725333.html
Copyright © 2011-2022 走看看