zoukankan      html  css  js  c++  java
  • 1.图片放大方法+2.中间菜单栏位置随滚轮移动固定方法3.去外层虚线方法

    <a></a>去外层虚线方法:a:focus{outline:none;-moz-outline:none;}

    图片放大方法1:

    <style type="text/css">
    .xt{ width:230px; height:230px;}
    .tp{ width:230px; height:230px; overflow:hidden;}
    .tp img{transition:all 1s ease-out 0s; margin-left:0px; margin-top:0px; perspective-origin:bottom;}
    </style>
    
     
    
    <body>
    
    <div class="tp">
      <img class="xt" onmouseover="Bian(this)" onmouseout="Hui(this)" src="c320_20160923147459793296513.jpg"/>
    </div>
    
    
    </body>
    
     
    
    <script type="text/javascript">
    function Bian(a)
      {
        a.style.marginTop = "-10px";
        a.style.marginLeft = "-10px";
        a.style.height=" 260px";
        a.style.width= "260px";
    
      }
    function Hui(a)
      {
        a.style.height=" 230px";
        a.style.width= "230px";
        a.style.marginTop = "0px";
        a.style.marginLeft = "0px";
    }
    </script>
    图片放大方法二:(只调整鼠标样式实现图片放大)
    <style type="text/css">
    
    *{ margin:0px auto; padding:0px; font-size:15px; font-family:微软雅黑;}
    #a{ width:300px; height:300px; margin-top:150px; overflow:hidden;}
    .b{width:300px; height:300px; cursor:pointer; margin-top:0px; margin-left:0px; }
    .b:hover{ width:350px; height:350px; margin-top:-25px; margin-left:-25px;  transition: all 1s ease-in-out 0s; }
    
    </style>
    
    </head>
    <body>
    
    <div id="a">
        <img class="b" src="a6.png" />
    </div>
    
    </body>

     

    2.中间菜单栏位置随滚轮移动固定方法:

    <style type="text/css">
    
    .t{ width:990px; height:80px; background-color:#F00; font-size:23px;}
    
    </style>
    
    <body>
    
    <div style="100%; height:80px; background-color:#000; position:fixed;"></div>
    
    <div style="200px; height:300px; background-color:#00F;"></div>
    
    <div class="t"></div>
    
    <div style="800px; height:1000px; background-color:#09F;"></div>
    
    </body>
    
     
    
    <script type="text/javascript">
    
    $(document).ready(function(e)
    {
      var off=$(".t").offset();  //当前DIV离浏览器边框四边的距离
      var of=off.top-160;  //DIV离顶部的距离-本身DIV高度加顶部DIV高度的总高
      $(window).scroll(function()
        {
          var scr=$(window).scrollTop();  //获取滚动条Y轴距离
            if(scr>of)
              {
                $(".t").css("position","fixed");
                $(".t").css("top","80px");  //根据需要调整
                $(".t").css("background-color","#906");   //根据需要调整
                $(".t").css("left","275px");  //根据需要调整
                $(".t").css("width","800px");  //根据需要调整
                $(".t").css("height","60px");  //根据需要调整
    
              }
            if(scr<of)
              {
                $(".t").css("position","absolute");
                $(".t").css("top","230px");   //根据需要调整
                $(".t").css("background-color","#F00");   //根据需要调整
                $(".t").css("left","180px");  //根据需要调整
                $(".t").css("width","990px");  //根据需要调整
                $(".t").css("height","80px");  //根据需要调整
              }
    
        })
    });
    </script>
  • 相关阅读:
    Linux学习65 实战使用awk高级功能统计网络请求连接状态
    Linux学习64 awk使用与实战
    Linux学习63 shell脚本高级编程-信号捕捉实战
    Linux学习62 shell脚本高级编程-数组和字符串处理
    Linux学习61 企业军工级别安全策略-SELinux简介
    Linux学习60 centos7新特性-systemd及systemctl实战
    Linux学习59 shell脚本高级用法-函数编程与应用实战
    【HBase】HBase与MapReduce的集成案例
    【HBase】底层原理
    【HBase】Java实现过滤器查询
  • 原文地址:https://www.cnblogs.com/zxl89/p/5955690.html
Copyright © 2011-2022 走看看