Javascript 使用ng样式更改div的背景图像
我知道过去有人问过我，也有人回答过我，但有些事情对我不起作用，我不知道是什么。我想创建一个图像，可以改变一个季度一次点击该季度。因此，单击左上角，更改图像的左上部分，依此类推。（在下面的例子中，最初的图片是一只青蛙在手掌中，青蛙会一刻一刻地消失。）我已经成功地显示了最初的图像，但单击并没有完成任何事情 试图创建一个JSFIDLE，但由于某种原因，Angular模块无法加载到那里（） 以下是一个实时版本，它确实显示初始图像，但单击时不会像我希望的那样更改： 以下是我在上述URL中的代码：Javascript 使用ng样式更改div的背景图像,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我知道过去有人问过我，也有人回答过我，但有些事情对我不起作用，我不知道是什么。我想创建一个图像，可以改变一个季度一次点击该季度。因此，单击左上角，更改图像的左上部分，依此类推。（在下面的例子中，最初的图片是一只青蛙在手掌中，青蛙会一刻一刻地消失。）我已经成功地显示了最初的图像，但单击并没有完成任何事情 试图创建一个JSFIDLE，但由于某种原因，Angular模块无法加载到那里（） 以下是一个实时版本，它确实显示初始图像，但单击时不会像我希望的那样更改： 以下是我在上述URL中的代码： <
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ranatest</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script>
()
angular.module('myRanaAurora', []).controller('MyRanaAuroraController', function($scope, $timeout) {
$scope.topLurl = "palm_with_frog.gif";
$scope.topRurl = "palm_with_frog.gif";
$scope.botLurl = "palm_with_frog.gif";
$scope.botRurl = "palm_with_frog.gif";
$scope.buttonPress = function (btn) {
if (btn == 'topLurl') {
$scope.topLurl = "palm.gif";
}
else if (btn == 'topRurl') {$scope.topRurl = "palm.gif";}
else if (btn == 'botLurl') {$scope.botLurl = "palm.gif";}
else if (btn == 'botRurl') {$scope.botRurl = "palm.gif";}
};
});
</script>
<style>
#container {
position: absolute;
height: 250px;
}
#topL {
width: 125px;
height: 125px;
position: relative;
}
#topR {
width: 125px;
height: 125px;
margin-left: 125px;
margin-top: -125px;
position: relative;
}
#botL {
width: 125px;
height: 125px;
position: relative;
}
#botR {
width: 125px;
height: 125px;
margin-left: 125px;
margin-top: -125px;
position: relative;
}
</style>
</head>
<body ng-app="myRanaAurora" ng-controller="MyRanaAuroraController">
<div id="container">
<div id="topL" ng-mousedown="buttonPress('topLurl')" ng-style="{'background': 'url({{topLurl}}) left top'}"></div>
<div id="topR" ng-mousedown="buttonPress('topRurl')" ng-style="{'background': 'url({{topRurl}}) right top'}"></div>
<div id="botL" ng-mousedown="buttonPress('botLurl')" ng-style="{'background': 'url({{botLurl}}) left bottom'}"></div>
<div id="botR" ng-mousedown="buttonPress('botRurl')" ng-style="{'background': 'url({{botRurl}}) right bottom'}"></div>
</div>
</body>
</html>
拉纳泰斯特
()
角度.module（'myRanaAurora'，[]）.controller（'MyRanaAuroraController'，函数（$scope，$timeout）{
$scope.topLurl=“palm\u with\u frog.gif”；
$scope.topRurl=“palm\u with\u frog.gif”；
$scope.botLurl=“palm\u with\u frog.gif”；
$scope.botRurl=“palm\u with\u frog.gif”；
$scope.buttonPress=函数（btn）{
如果（btn=='topLurl'）{
$scope.topLurl=“palm.gif”；
}
else if（btn=='topRurl'）{$scope.topRurl=“palm.gif”；}
else if（btn=='botLurl'）{$scope.botLurl=“palm.gif”；}
else if（btn=='botRurl'）{$scope.botRurl=“palm.gif”；}
};
});
#容器{
位置：绝对位置；
高度：250px；
}
#托普{
宽度：125px；
高度：125px；
位置：相对位置；
}
#托普{
宽度：125px；
高度：125px；
左边距：125px；
边缘顶部：-125px；
位置：相对位置；
}
#博特尔{
宽度：125px；
高度：125px；
位置：相对位置；
}
#博特{
宽度：125px；
高度：125px；
左边距：125px；
边缘顶部：-125px；
位置：相对位置；
}
ngng mousedownbuttonPressng clickng mousedown