Javascript 背景不';不要向左重复
我试着做一个滑动菜单,我有一个带磁带背景的div,当它通过背景重复向左设置动画时,一切正常,但是当它向右设置动画并且到达背景的左边框时,它会消失,因为背景重复不会向左重复,只是向右重复。。有办法让背景向左重复吗 “slider”div中的列表不会以与“slider”div相同的速度移动 这是HTML代码Javascript 背景不';不要向左重复,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试着做一个滑动菜单,我有一个带磁带背景的div,当它通过背景重复向左设置动画时,一切正常,但是当它向右设置动画并且到达背景的左边框时,它会消失,因为背景重复不会向左重复,只是向右重复。。有办法让背景向左重复吗 “slider”div中的列表不会以与“slider”div相同的速度移动 这是HTML代码 <!DOCTYPE html> <html> <head> <title>Prueba</title> <lin
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
<script type = "text/javascript" src = "jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
var mode = 0; // 0 Left - 1 Right
autoSlider();
function autoSlider(){
mode = 0;
$("#slider").animate({left: "-=60px", width: "+=60px"}, 'slow', 'linear', autoSlider);
}
function slideLeft(){
mode = 1;
$("#slider").animate({left: "+=60px", width: "-=60px"}, 'slow', 'linear', slideLeft);
}
$("#slider").mouseover(function(){
$("#slider").stop();
});
$("#slider").mouseout(function(){
if(mode === 0)
autoSlider();
else
slideLeft();
});
$("#Left").mouseover(function(){
$("#slider").stop();
autoSlider();
});
$("#Right").mouseover(function(){
$("#slider").stop();
slideLeft();
});
});
</script>
</head>
<body>
<div id = "wrapper">
<div id = "slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id = "Left">
Left
</div>
<div id = "Right">
Right
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
#slider {
padding: 0;
left: 0px;
background-color: black;
background-image: url("http://s11.postimg.org/msh93rl8z/Tira_Fotografica.png");
background-repeat: repeat-x;
width: 800px;
height: 304px;
position: relative;
overflow: hidden;
}
#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
#Left {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: -100px;
}
#Right {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: 800px;
}
#slider ul {
list-style: none;
}
#slider ul li {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background-color: white;
margin: 50px 10px 0px 0px;
}
我试图将代码放在JSFIDLE上,但它没有运行。
对不起,我的英语不好很好用。请看这里:
看看#slider元素
这个值很烦人;-)
左边越来越小,宽度越来越大。
当滑块移向相反方向时,左侧变大,宽度变为0px
[编辑]:因此背景不会设置动画。该div已设置动画。如何修复div并在div中设置动画。当背景位置重复时,您也可以使用背景位置进行操作。如回答中所述,正在设置动画的是正在移动的div,当它移动到接近该值时,它有一个
宽度值,它将停止,尝试使用css sprite sheet设置图像重复片段的动画
<div style="left: -5863.5px; width: 6663.8px; overflow: hidden;" id="slider">