jQuery的滑块形象犯规移动，移动

我使用jQuery滑块和我想将我的图像，根据如何滑块移动，但由于某种原因，它不是为我工作这里是代码jQuery的滑块形象犯规移动，移动

.main{ 
     background: transparent url(/img/ads/bootsImg.jpg) no-repeat 20px 30px;; 
     width: 300px; 
     background-size: 322px; 
     font-family: 'Futura-Book'; 

    } 

<div id="background-image-horizontal"></div>

//滑块

$('#background-image-horizontal').slider({ 
       max: 50, 
       min: 10, 
       value: 14, 
       slide: function(e,ui) { 
        console.log("transparent url(/img/ads/bootsImg.jpg) no-repeat "+ui.value+"px 1px"); 
        $('.main').css("background","transparent url(/img/ads/bootsImg.jpg) no-repeat "+ui.value+"px 1px"); 
       } 
      });

在我的控制台我看到这个变化当我移动滑块，但我的屏幕上的图像犯规移动

transparent url(/img/ads/bootsImg.jpg) no-repeat 28px 1px ?img=bootsImg.jpg&w=300&h=300:330 
transparent url(/img/ads/bootsImg.jpg) no-repeat 29px 1px ?img=bootsImg.jpg&w=300&h=300:330 
transparent url(/img/ads/bootsImg.jpg) no-repeat 30px 1px ?img=bootsImg.jpg&w=300&h=300:330 
transparent url(/img/ads/bootsImg.jpg) no-repeat 31px 1px ?img=bootsImg.jpg&w=300&h=300:330 
transparent url(/img/ads/bootsImg.jpg) no-repeat 32px 1px ?img=bootsImg.jpg&w=300&h=300:330 
transparent url(/img/ads/bootsImg.jpg) no-repeat 33px 1px ?img=bootsImg.jpg&w=300&h=300:330

来源

2013-09-27 Autolycus

愧疚typpo – Autolycus

固定的问题...但问题没有解决 – Autolycus

是bootsImg.jpg ... cahnge问题 – Autolycus

其中一个原因可能是您没有为您的.main提及高度，我相信它是div，所以它需要0高度。尝试设置一些height。

.main{ 
     background: transparent url(/img/ads/bootsImg.jpg) no-repeat 20px 30px;; 
     width: 300px; 
     height:200px; /*Set some height*/ 
     background-size: 322px; 
     font-family: 'Futura-Book'; 

    }

Demo

来源

2013-09-27 19:46:30 PSL

jQuery的滑块形象犯规移动，移动

回答

相关问题