LearnKode

7 Example(s) of Ng-Mousemove


Description :

Count variable increase each time by 1 when we move mouse on the button.


Ng-Mousemove Example - 1 
<!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>
    <div>
        <input type="button" value="Mouse Move" ng-mousemove="count=count+1" />
        {{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-mousemove directive call the mouseDown($event) function which calculates X and Y cordinate that is assign to the ng-style of div elements which will show the the circle when we move mouse on the square.


Ng-Mousemove Example - 2 
<!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>
<style>
    .circle{
        border-radius:50px;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <p>Mouse Move on the square</p>
        <div style="width:300px;height:300px; background-color:tomato;" ng-mousemove="mouseDown($event)"></div>
        <div class="circle" ng-style="{ 'backgroundColor':'red', 'margin-top':X+'px', 'margin-left':Y+'px',width:'50px',height:'50px' }" ></div>
        <div class="circle" ng-style="{ 'backgroundColor':'pink', 'margin-top':X-200+'px', 'margin-left':Y+'px',width:'50px',height:'50px' }" ></div>
    </div>
    <pre ng-show="X">Mouse move at:{{X}},{{Y}}</pre>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseDown = function (event) {
            $scope.X = event.clientX-100;
            $scope.Y = event.clientY-100;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-mousemove directive call the mouseDown($event) function which calculates X and Y cordinate that is assign to the ng-style of div element and size of square increase or decrease when we move mouse on it.


Ng-Mousemove Example - 3 
<!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 the square</p>
        <div style="height:10px;width:10px; background-color:red;" ng-style="{'backgroundColor':'lightgreen', width:X+'px',height:Y+'px' }" ng-mousemove="mouseDown($event)"></div>
        <pre ng-show="X">Mouse move at:{{X}},{{Y}}</pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseDown = function (event) {
            $scope.X = event.clientX;
            $scope.Y = event.clientY;
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

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.


Ng-Mousemove Example - 4 
<!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>
Try it » Download Example »

Output

Description :

Textbox value will increase if we move the mouse in textbox.Value is shown is textbox because it is bind to mouseMove variable with ng-model directive.


Ng-Mousemove Example - 5 
<!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>
    <div>
        Mouse Move: <input type="text" ng-mousemove="mouseMove=mouseMove+1" ng-model="mouseMove" />
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of Ng-Mousemove, We have created a scratchbox and on mousemove it will scratch from scratchbox and apply the css. See the code:


Ng-Mousemove Example - 6 
<!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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .Scratchbox {
            height: 10px;
            width: 10px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div class="container">
            <div class="row" ng-init="genetareNumbers()">
                <div class="col-md-offset-3 col-md-6">
                    <h2>Scratch the Box on Mouse Move</h2>
                    <div ng-repeat="d in numbers">
                        <div class="Scratchbox" ng-style="style" ng-mousemove="style={'background-color':'white'}"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('myController', ['$scope', function ($scope) {
            $scope.numbers = [];
            $scope.genetareNumbers = function () {
                for (var i = 1; i < 1167; i++) {
                    $scope.numbers.push(i);
                };
            };
        }]);
    </script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Mousemove:


Ng-Mousemove Example - 7 
<!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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <div class="row well" ng-init="count1=count2=count3=100">
            <div class="col-md-4">
                <div ng-mousemove="count1=count1==900?100:count1+1" style="height:150px;background-color:#8D{{count1}}A"></div>
            </div>
            <div class="col-md-4">
                <div ng-mousemove="count2=count2==900?100:count2+1" style="height:150px;background-color:#{{count2}}8FF"></div>
            </div>
            <div class="col-md-4">
                <div ng-mousemove="count3=count3==900?100:count3+1" style="height:150px;background-color:#{{count3}}F6E"></div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output