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

Posted 向前看!明天会更好!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="width:100%; height:80px; background-color:#000; position:fixed;"></div>

<div style="width:200px; height:300px; background-color:#00F;"></div>

<div class="t"></div>

<div style="width: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>

 

以上是关于1.图片放大方法+2.中间菜单栏位置随滚轮移动固定方法3.去外层虚线方法的主要内容,如果未能解决你的问题,请参考以下文章

在网页里点开放大了一张图片后,怎么实现随鼠标滚轮放大缩小?

C# winform 中的picturebox 中装载的图片怎样随滚轮放大缩小,图框大小不变

fixed和absolute定位区别

在java Applet里如何实现鼠标滚轮放大缩小图片?

用js实现页面图片,以鼠标位置为中心,滚轮缩放图片

CAD图形的缩放——视区缩放教程