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

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" onm ouseover="Bian(this)" onm ouseout="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.去外层虚线方法