HTML正文不能向右滑动

HTML Body Won't Slide To The Right

本文关键字：正文 不能 HTML      更新时间：2023-09-26

我编写了一些JQuery/Javascript，想要创建一个将背景图像推到一边的菜单幻灯片。菜单本身滑动得很好，但由于某种原因，我无法让主体移动过来。这是JavaScript, HTML和CSS。

var main = function(){
$('.icon').click(function()
{
$('.menu').animate({
left: "0px"
}, 200);
$('.body').animate({
left:"300px"
}, 200);
});
};
$(document).ready(main);
@charset "utf-8";
body {
	background-image: url(http://wallpapercave.com/wp/U7rb02o.jpg);
	background-size: cover;
	left: 0px;
	position: relative;
	margin: 0px;
	overflow: hidden;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
.menu {
	background-image: url((https
://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg))
	background: url("https://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg");
	background-repeat: repeat;
	background-position: left top;
	background-image: url(http://wallpapers.ae/wp-content/uploads/2014/10/Black-Pattern-Background-Wallpaper.jpg);
	height: 100%;
	width: 300px;
	position: fixed;
	left: -300px;
	cursor: pointer;
}
.icon {
	padding-top: 25px;
	padding-right: 0px;
	padding-left: 25px;
	padding-bottom: 25px;
	width: 75px;
	cursor: pointer;
	height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="body">
<div class="icon">
</div>
</div>
<div class="menu">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

像这样的东西应该让你开始:

$(document).ready(function(){
  $('.icon').click(function(){
    main();
  });
});
function main() {
  $('.menu').animate({
    left: 0
  }, 200);
  $('.body').animate({
    left: "300px"
  }, 200);
}
@charset "utf-8";
body {
	background-image: url(http://wallpapercave.com/wp/U7rb02o.jpg);
	background-size: cover;
	left: 0px;
	position: relative;
	margin: 0px;
	overflow: hidden;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
.menu {
	background-image: url((https
://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg))
	background: url("https://image.freepik.com/free-vector/white-cubes-pattern_1053-248.jpg");
	background-repeat: repeat;
	background-position: left top;
	background-image: url(http://wallpapers.ae/wp-content/uploads/2014/10/Black-Pattern-Background-Wallpaper.jpg);
	height: 100%;
	width: 300px;
	position: fixed;
	left: -300px;
	cursor: pointer;
}
.icon {
	padding-top: 25px;
	padding-right: 0px;
	padding-left: 25px;
	padding-bottom: 25px;
	width: 75px;
	cursor: pointer;
	height: 40px;
  z-index:999;
  position:absolute;
  top:30px;
  background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="body">
  <div class="icon"></div>
</div>
<div class="menu"></div>

相关文章：