angularhtml鼠标移入方法

html-css030

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 宽度的一半,喜欢什么样式子自己设置哦,有什么问题欢迎留言,喜欢前端的小伙伴们关注我一起学习进步

你是从网上下个这样的效果,然后有BUG是么,不是你自己写的对么,第一个问题,如果你不想拖出去的话,拖动时,当X和Y值大于你这个DIV最大的那个值,也就是,到最边的时候,值就等于那个最边,这样就不会出去了,第二个问题,他应该是,把拖动时的值显示出来了,你不想要的话,在JS把那一句给删除就可以了,如果不知道在哪,用个笨方法,用CSS把那个DIV隐藏,或用个DIV把他盖住,就行了。

第一段是画板代码。第二段是拖动和点击的代码

想画之后再拖动好麻烦,我地方法只能是记住画的矩形坐标之后判断鼠标点击点再坐标内

就拖动画板,太麻烦了,如果找到好的方法贴出来。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<style>

*{margin: 0padding: 0}

canvas{background: #fff}

</style>

<body>

<canvas width=1200 height=800></canvas>

<script>

var oC = document.getElementsByTagName('canvas')[0]

var gd = oC.getContext('2d')

gd.beginPath()

oC.onmousedown = function(ev){

gd.moveTo(ev.pageX,ev.pageY)

oC.onmousemove = function(ev){

gd.lineTo(ev.pageX,ev.pageY)

console.log(ev.pageX,ev.pageY)

gd.strokeStyle = "red"

gd.stroke()

}

oC.onmouseup = function(){

oC.onmousemove = null

oC.onmouseup = null

}

ev.preventDefault()

}

</script>

</body>

</html>

=============================

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<style>

*{margin: 0padding: 0}

div{width: 100pxheight: 100pxbackground: redposition: absolutetop: 0left: 0cursor: pointer}

</style>

</head>

<body>

<div></div>

<script>

var oDiv = document.getElementsByTagName('div')[0]

oDiv.onmousedown = function(ev){

var oEvent = ev || event

var disX = oEvent.pageX - oDiv.offsetLeft

var disY = oEvent.pageY - oDiv.offsetTop

document.onmousemove = function(ev){

var oEvent = ev || event

var l = oEvent.pageX - disX

var t = oEvent.pageY - disY

oDiv.style.top = t + 'px'

oDiv.style.left = l + 'px'

}

document.onmouseup = function(){

document.onmousemove = null

document.onmouseup = null

}

}

oDiv.ondblclick = function(){

oDiv.style.display = 'none'

}

</script>

</body>

</html>