文章/答案/技术大牛

发布

社区首页 >问答首页 >角随机css旋转总是移动的

问角随机css旋转总是移动的
EN

Stack Overflow用户

提问于 2015-01-07 16:42:06

回答 1查看 712关注 0票数 0

我想要一个带有随机css旋转的img。我成功地做到了这一点，但是当您将鼠标移动到传单地图上时，img总是在旋转：

http://jsfiddle.net/J03rgPf/mzwwfav4/3/

如何才能只设置一次随机css，使getRandRot函数不再被一次又一次地调用？

<body ng-controller="DemoController">
 <leaflet center="center"></leaflet>
 <div class="{{getRandRot()}}">
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
 </div>  
</body>

角JS码：

var app = angular.module('demoapp',['leaflet-directive']);

app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
    angular.extend($scope, {
        center: {
            lat: 51.505,
            lng: -0.09,
            zoom: 5
        }
    })

    $scope.getRandRot = function(){
        var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
        var rand = Math.floor(Math.random() * rotations.length);
        return rotations[rand];  
      }
}]);

CSS

.angular-leaflet-map {
    width: 100%;
    height: 280px;
}

.rotate-10{
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.rotate-5{
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}
.rotate5{
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}
.rotate10{
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}

angularjs

rotation

leaflet

angular-leaflet-directive

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-07 16:53:20

也许可以将调用getRandRot的响应分配给控制器中的值？

通过使用class={{ getRandRot() }}，您将创建一个绑定到getRandRot，该绑定将在每个摘要阶段内调用

这就是诀窍：

HTML

 <body ng-controller="DemoController">
   <leaflet center="center"></leaflet>
   <div ng-class="randRot">
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
   </div>  
</body>

var app = angular.module('demoapp',['leaflet-directive']);

app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
    angular.extend($scope, {
        center: {
            lat: 51.505,
            lng: -0.09,
            zoom: 5
        }
    })

    getRandRot = function(){
        var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
        var rand = Math.floor(Math.random() * rotations.length);
        return rotations[rand];  
      }

    $scope.randRot = getRandRot();
}]);

顺便说一下，ng类是动态设置具有角度元素的类的首选方法。

希望这能有所帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27824229

复制

相似问题

问角随机css旋转总是移动的
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角随机css旋转总是移动的EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角随机css旋转总是移动的
EN