javascript - 在 mousemove 上移动背景图像不起作用
问题描述
我正在尝试mousemove
在 Angular 项目中移动背景图像。它不起作用,我认为问题正在加载:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
因为我在我的代码中手动调试:“console.log("message") 并且没有任何反应,所以该函数永远不会被调用。
一些代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
<div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
<h1 class="title">Keeping track of your health, register as:</h1>
</div>
<div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
<a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
<a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
<a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
</div>
</div>
</div> <!-- /container -->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
console.log("dsd");
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
</body>
</html>
CSS:
#bg {
height: 100vh;
background-image: url('../../../images/1.jpg'); /* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
解决方案
您应该检查背景图像路径。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
</div>
</div> <!-- /container -->
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
<style>
#bg {
height: 100vh;
background-image: url('https://i.stack.imgur.com/rhStR.jpg');
/* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
</style>
推荐阅读
- excel - 如何生成唯一“组合”的两个单独的列列表?
- python - Python 类初始化行为和幂等性
- android - Android 发布构建失败,但调试版本构建正常
- postgresql - 如果变量有值,则使用 Where 子句
- azure-logic-apps - 在 Azure 中的逻辑应用上获取文件内容活动
- amazon-web-services - 如何配置 CloudWatch 警报以捕获错误?
- javascript - 如何在 Laravel 项目中使用 React?
- okhttp - OKHttp3:如果一个 IP 地址无法访问,如何重试另一个 IP 地址
- angular - 如何查找 API 调用何时以角度完成
- perl - 我在 Perl 中的 base64_decode 输出被截断时遇到问题