首页 > 代码库 > 图片放大方法、、滚动条位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；
图片放大方法、、滚动条位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；
图片放大方法：
<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="http://www.mamicode.com/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">
.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"); //根据需要调整
}
})
});
图片放大方法、、滚动条位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；