用js改变背景图的位置

xiaoxiao2021-02-28  64

$(document).ready(function() { $("li span").mouseover(function(e){ var lengthx=$(this).css('background-position').split(' ')[0];//取background-position的X轴的数值 var lengthy=$(this).css('background-position').split(' ')[1];//取background-position的Y轴的数值 var lx; if(lengthx.length==5){//判断X轴的长度 lx = lengthx.substring(0,3);//只取数字(如果有负号要带上负号) } else if(lengthx.length==6){ lx = lengthx.substring(0,4); } var ly=lengthy.substring(0,4);//我的例子的Y轴是同一个值,所以Y轴不用判断,直接取数字,若需要判断同X轴 var sum=ly*1-39*1;//拿到数值之后将Y轴的数值改变, var positions=lx+"px"+" "+sum+"px";//计算后还要将px拼起来 $(this).css("background-position",positions);//最后赋给css }) $("li span").mouseout(function(e){ var lengthx=$(this).css('background-position').split(' ')[0]; var lengthy=$(this).css('background-position').split(' ')[1]; var lx; if(lengthx.length==5){ lx = lengthx.substring(0,3); } else if(lengthx.length==6){ lx = lengthx.substring(0,4); } var ly=lengthy.substring(0,4); var sum=ly*1+39*1; var positions=lx+"px"+" "+sum+"px"; $(this).css("background-position",positions); }) }); .span1{width: 44px;background: url(images/index_global.png) -41px -124px no-repeat;/*background-position: ;*/}.span2{width: 36px;background: url(images/index_global.png) -87px -124px no-repeat;}.span3{width: 34px;background: url(images/index_global.png) -125px -124px no-repeat;} <ul class="pannerconect"><li><a href=""><span class="span1"></span><em>1</em></a></li><li><a href=""><span class="span2"></span><em>2</em></a></li><li><a href=""><span class="span3"></span><em>3</em></a></li></ul> 
转载请注明原文地址: https://www.6miu.com/read-41053.html

最新回复(0)