点击图片随机移动位置
2013-06-25 22:41
253 查看
<html>
<head>
<script>
//onclick 事件
//改变它的CSS的left和top的值
function clickfun(){
document.getElementById("imgId").style.left=Math.random()*500;
//点击图片随机改变 left
位置
document.getElementById("imgId").style.top=Math.random()*400; //点击图片随机改变
top 位置
}
//onmouseover 把当前的IMG的链接改为另一张图片
function mOver(){
document.getElementById("imgId").src="201301.jpg";
}
//onmouseout 鼠标移出的时候,把图片链接改回原图
function mOut(){
document.getElementById("imgId").src="201302.jpg";
}
</script>
</head>
<body>
<!--
cursor:pointer:鼠标移动到图片上时变为手型 -->
<img src="201302.jpg" id="imgId" style="position:absolute;width:50;height:50;top:100;left:100; cursor:pointer;"
onclick="clickfun()" onmouseover="mOver()" onmouseout="mOut()">
</body>
</html>
<!-- 用到的图片 -->
![](http://img.blog.csdn.net/20130625222941812?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEwNzE4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
<head>
<script>
//onclick 事件
//改变它的CSS的left和top的值
function clickfun(){
document.getElementById("imgId").style.left=Math.random()*500;
//点击图片随机改变 left
位置
document.getElementById("imgId").style.top=Math.random()*400; //点击图片随机改变
top 位置
}
//onmouseover 把当前的IMG的链接改为另一张图片
function mOver(){
document.getElementById("imgId").src="201301.jpg";
}
//onmouseout 鼠标移出的时候,把图片链接改回原图
function mOut(){
document.getElementById("imgId").src="201302.jpg";
}
</script>
</head>
<body>
<!--
cursor:pointer:鼠标移动到图片上时变为手型 -->
<img src="201302.jpg" id="imgId" style="position:absolute;width:50;height:50;top:100;left:100; cursor:pointer;"
onclick="clickfun()" onmouseover="mOver()" onmouseout="mOut()">
</body>
</html>
<!-- 用到的图片 -->
相关文章推荐
- 让图片直线移动到鼠标点击位置,类似游戏里的人物走动!
- 三消游戏中随机排列图片位置,和点击图片消失下落
- 让图片直线移动到鼠标点击位置,类似游戏里的人物走动!
- JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应
- 【Ubuntu】Ubuntu16.04移动Unity位置和点击图片最小化
- JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应
- Javascript实现图片位置控制(鼠标拖拽 + 键盘方向键移动)源码分享
- 图片的映射(点击图片某位置进行跳转)
- 页面同一位置重叠多张图片,鼠标点击切换特效
- XNA实践鼠标篇--根据点击坐标移动图片(四)下
- 图片热区,使图片的某个位置可以点击链接到其他页面
- 图片的切换与位置的移动
- JQuery 图片移动位置
- Unity3D 物体移动到点击位置
- Unity3d--物体移动到鼠标点击位置
- 不重复随机数列生成算法2-数组有效位置的最后一个元素移动到当前位置
- 鼠标点击图片后移动事件
- 移动滚动轴,背景图片位置不变。
- MFC 图片控件图片加载以及鼠标移动事件和鼠标点击事件
- 艾伟_转载:在WPF里面实现以鼠标位置为中心缩放移动图片