big{
display: none;
width: 500px;
height: 500px;
background-color: black;
position: absolute;
top:0;
right: 100px;
}
small{
width: 100px;
height: 100px;
background-color: yellow;
position: fixed;
top:50%;
right: 0px;
z-index: 10;
}
small:hover big{
display: block;
}
</style><div class="small">
<div class="big"></div>
</div>你的意思是用canvas2D绘制是吧
实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上)而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理
实现逻辑是这样:
1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么一般鼠标事件都是判断d起的位置
2,判断有效坐标,在事件中判断坐标位置是否在位置,也就是在canvas的位置
ex:
//some code
canvaswidth=400;
canvasheight=400;
var context2d = canvasgetContext("2d");
var img =new Image();
imgsrc="xxx/xxxpng";
imgonload=function(){
context2ddrawImage(img,X,Y,WIDTH,HEIGTH);
//X=0,Y=0,W=50,H=50
canvasaddEventListener("mouseup", keyUp, false);
}
function keyUp(evt){
Event_UpX = evtoffsetX;
Event_UpY = evtoffsetY;
if(Event_UpX>=绘制坐标X&&Event_UpX<=宽度){
if(Event_UpY>=绘制坐标Y&&Event_UpY<=高度){
//do something
}
}
}
本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下
鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份
var mouseX, mouseY;
if(evlayerX || evlayerX==0){
mouseX = evlayerX;
mouseY = evlayerY;
}else if(evoffsetX || evoffsetX==0){
mouseX = evoffsetX;
mouseY = evoffsetY;
}
if(draging){
if(optsdragAll){ <span style="font-family: Arial, Helvetica, sans-serif;">//拖动整个地图，存在问题，地图画的太慢</span>
mapContextclearRect(0, 0, 1100, 630);
for(var i = 0;i < allZoneDatalength;i++){
for(var j = 0;j < allData[allZoneData[i]name]length;j++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据
pubFunsdrawMap(mapContext,allData[allZoneData[i]name][j],mouseX - tempX, mouseY - tempY);
}
}
}else{
moveMapContextclearRect(0, 0, 1100, 630);
pubFunsdrawMoveLayerLine(mouseX - tempX, mouseY - tempY);
}
}
});
鼠标抬起事件：设置dragging为false，clear移动层。
if(optsdragAll){
}else{
moveMapContextclearRect(0, 0, 1100, 630);
}
draging = false;
});
小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。
以上就是本文的全部内容，希望对大家的学习有所帮助。
onmouseout：当鼠标指针移出时运行脚本；注意： onmouseout 属性不能使用于以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <title>。
有一个简短的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoobcom)</title>
<script>
function bigImg(x)
{
xstyleheight="64px";
xstylewidth="64px";
}
function normalImg(x)
{
xstyleheight="32px";
xstylewidth="32px";
}
</script>
</head>
<body>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smileygif" alt="Smiley" width="32" height="32">
<p>当用户将鼠标移动到时触发 bigImg() 函数。该函数使变大。</p>
<p>当用户将鼠标移开时触发normalImg() 函数。该函数使变回原来大写。</p>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）