本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下
鼠标移动事件：根据点击的省份名，获得数据，并实时重绘移动层的省份
$('#eventCanvas').mousemove(function(ev){var mouseX, mouseY
if(ev.layerX || ev.layerX==0){
mouseX = ev.layerX
mouseY = ev.layerY
}else if(ev.offsetX || ev.offsetX==0){
mouseX = ev.offsetX
mouseY = ev.offsetY
}
if(draging){
if(opts.dragAll){ <span style="font-family: Arial, Helvetica, sans-serif">//拖动整个地图，存在问题，地图画的太慢</span>
mapContext.clearRect(0, 0, 1100, 630)
for(var i = 0i < allZoneData.lengthi++){
for(var j = 0j < allData[allZoneData[i].name].lengthj++){ //allData是第一次读取数据时放到内存里的变量，它包含了所有数据
pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY)
}
}
}else{
moveMapContext.clearRect(0, 0, 1100, 630)
pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY)
}
}
})
鼠标抬起事件：设置dragging为false，clear移动层。
$('#eventCanvas').mouseup(function(e){if(opts.dragAll){
}else{
moveMapContext.clearRect(0, 0, 1100, 630)
}
draging = false
})
小结：功能、原理都很简单，但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的，这样就可以在不同的层画不同的内容，方便维护和管理。
以上就是本文的全部内容，希望对大家的学习有所帮助。
通过css伪类中的“hover”来实现。
1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：
2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p {display: none}”；再给div设置宽和高，这里为了演示方便，为div设置一个灰色的背景色，代码为“div {width: 100pxheight: 100pxbackground: #ccc}”：
3、给div标签添加hover伪类，然后打出一个空格，再设置此时p标签的显示样式。代码为“div:hover p {display: block}”，这段代码的意思是，当鼠标放在div上时，将p标签的显示状态从隐藏改成显示，此时p标签中的文字就会显示出来：
4、当鼠标从div移走时，文字就会消失：
这里介绍两种方式：
一：通过css样式中的 ":hover"实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
div:hover{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
</body>
</html>
二：通过javascript方式实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
.divs{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
<script>
// 首先获取div元素
var divs = document.getElementsByTagName('div')[0]
//鼠标移入，将divs的className样式赋给该标签
divs.onmouseover = function () {
this.className = "divs"
}
//鼠标移出，将空的className样式赋给该标签
divs.onmouseout = function () {
this.className = ""
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）