Ng-Mousemove-4

 

In this example of Ng-Mousemove directive when your mouse move in the alphabet then alphabets changes continuously as soon as the mouse move event fire.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <p>Mouse move on letter</p> <div style="width:100px"> <p ng-mousemove="count=count==25?count=0:count=count+1" style="margin-top: -30px; font-size: 180px; color:{{Colors[count]}}">{{arr[count-0]}}</p> </div> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; $scope.Colors = ["aqua", "tomato", "beige", "tan", "blue", "brown", "cyan", "darkblue", " darkcyan", " darkgrey", "darkgreen", " darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey"]; }]); </script> </body> </html>
Output