angularhtml鼠标移入方法

html-css012

angularhtml鼠标移入方法,第1张

你好!angularhtml鼠标移入方法,首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.event.x | window.event.y来获取鼠标的坐标x,y。

我是这么实现的,首先我们在html页面上绑定鼠标移入移出事件(因为是前端小白,大神们欢迎指正,相互学习哦),下面是我的源码

下面是鼠标悬浮的小div

js如下图

给div的position设置成固定定位,然后修改它的top的值为鼠标y的值,left的值设置为鼠标x轴的距离减去div 宽度的一半,喜欢什么样式子自己设置哦,有什么问题欢迎留言,喜欢前端的小伙伴们关注我一起学习进步

html中引入angularjs的方法:

1、在html的script标签中加入以下代码:

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

2、引入后调用示例:

<html ng-app="myNoteApp">

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-controller="myNoteCtrl">

<h2>我的笔记</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>

<button ng-click="save()">保存</button>

<button ng-click="clear()">清除</button>

</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>

<script src="myNoteCtrl.js"></script>

</body>

</html>

3、运行结果:

angularJS在页面中输出html标签的方法:

angular.module("bgoApp",[]).

controller("bgoCtrl",function($scope){

$scop.title="省流量、防偷跑,\n守护你的流量"

});

angularJS里边输出换行有两种方式:

1、使用转义字符,即\n

2、往页面上appe..