怎样在用css制作鼠标经过移动图片

html-css021

怎样在用css制作鼠标经过移动图片,第1张

有很多方法，给你提供两种简单的

1、在dreamweaver中，在“插入”菜单中有一个“图像对像”——“鼠标经过图像”，然后，在对话框选择两张图片就行了

2、利用css中的hover

hover

img {margin:*

*

*

*

}

*表示新的位置

这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹

<body>

<center>

<canvas id="cavsElem" width="800" height="560" style="border: 1px solid black ">你的浏览器不支持此涂鸦板</canvas>

画笔颜色：<input type="color" id="context.color" />

画笔大小:<input type="number"id="context.size" max="10" value="1" />

</center>

<script>

(function(){

var canvas=document.getElementById('cavsElem')//获得画布

var context=canvas.getContext('2d')//准备画笔

var a=document.getElementById('context.color')

var b=document.getElementById('context.size')

    canvas.onmousedown=function(e){     //鼠标触发onmousedown事件时,获取起始坐标

     var x=e.clientX-canvas.getBoundingClientRect().left

     var y=e.clientY-canvas.getBoundingClientRect().top

     context.beginPath()

     context.moveTo(x,y)    

    canvas.onmousemove=function(event){   //触发鼠标移动事件时，获取绘制线条的坐标

     var x=event.clientX-canvas.getBoundingClientRect().left

     var y=event.clientY-canvas.getBoundingClientRect().top

     context.lineTo(x,y)//绘制线条

     context.strokeStyle=a.value

context.lineWidth=b.value

     context.stroke()

    }

    canvas.onmouseup=function(event){    //鼠标被松开时，返回null

     canvas.onmousemove=null

    }

  }

 }())

</script>

</body>