我想在具有此背景的菜单 div 中制作“照片条”的效果
我正在更改 div 的宽度和左侧以使用 javascript/jquery 模拟此效果，但它无法以这种方式工作，目前是“onclick”，但我想自动设置它可能与 setInterval?
这是 HTML 代码:
<!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 slider = document.getElementById("#slider");
var speed = 10;
$("#slider").click(function(){
slider.style.width = (slider.style.width+speed)+"px";
slider.style.left = (slider.style.left-speed)+"px";
});
});
</script>
</head>
<body>
<div id = "wrapper">
<div id = "slider">
</div>
</div>
</body>
</html>
这是 CSS 代码:
*{
padding: 0;
margin: 0;
}
#slider {
padding: 0;
margin: 0;
background-color: black;
background-image: url("TiraFotografica.PNG");
background-repeat: repeat;
width: 800px;
height: 304px;
position: relative;
overflow: hidden;
}
#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
我尝试了其他不同的方法，比如window.onload，把代码放在body，尝试$(object).width，等等。问题是当我点击它时它不会移动，稍后我会尝试自动执行..
我还有一个疑问，这个菜单会让 div 进入(选项)，当我移动这个 div(“#slider”)时，那些 div 也会移动(选项)吗？
编辑:我通过 DinoMyte 添加了这个
var speed = 10;
$("#slider").click(function(){
$(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
$(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
});
现在可以正常使用了，只需要在不点击的情况下自动生成
抱歉我的英语不好..
最佳答案
问题是 slider.style.width 会给你 width + "px"，所以 (slider.style.width+speed) 不会上类。您需要先替换“px”。您还需要将当前宽度值解析为整数。
slider.style.width = parseInt(slider.style.width.replace("px","")) +speed)+"px";
更好的方法:
var speed = 10;
$("#slider").click(function(){
$(this).css("width",(parseInt($(this).css("width").replace("px","")) + speed) + "px");
$(this).css("left",(parseInt($(this).css("left").replace("px","")) - speed) + "px");
});
关于javascript - Style.width 和 left 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33790278/