首页 > 代码库 > 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.去外层虚线方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。