html中 实现 鼠标移到实现 滚动图片 停止 放大
DW\u5236\u4f5c\u7f51\u9875\uff0c\u4e0b\u9762\u4ee3\u7801\u5982\u4f55\u4fee\u6539\u624d\u80fd\u4f7f\u9f20\u6807\u653e\u5728\u6eda\u52a8\u56fe\u7247\u4e0a\u65f6\u5c31\u505c\u6b62\u6eda\u52a8\uff1f\u5728\u6807\u7b7e\u91cc\u6dfb\u52a0onMouseOver="this.stop()" onMouseOut="this.start()"\u5373\u53ef\u3002
onmouseover="this.stop()\u6307\u7684\u662f\u5f53\u4f60\u7684\u9f20\u6807\u79fb\u5230\u4f60\u5b9a\u4e49\u597d\u7684\u5bf9\u8c61\u65f6.\u8be5\u5bf9\u8c61\u4f1a\u505c\u6b62\u5f53\u524d\u7684\u52a8\u4f5c\u3002
onmouseout="this.start()\u6307\u7684\u662f\u5f53\u4f60\u7684\u9f20\u6807\u79fb\u5f00\u4f60\u5b9a\u4e49\u597d\u7684\u5bf9\u8c61\u65f6,\u8be5\u5bf9\u8c61\u4f1a\u91cd\u65b0\u521a\u624d\u7684\u52a8\u4f5c\u3002
\u4ee3\u7801\u5982\u4e0b\uff0c\u53ef\u4ee5\u5b9e\u73b0\u4f60\u8bf4\u7684\u5f53\u9f20\u6807\u623f\u5b50\u56fe\u7247\u4e0a\u505c\u6b62\u6eda\u52a8\u7684\u6548\u679c\u3002
setInterval\u548cclearInterval
\u9760mouseover\u548cmouseout\u6765\u5206\u522b\u89e6\u53d1
\u53ef\u4ee5\u53c2\u8003\u8fd9\u91cc http://www.52ladybug.com/index.php/archives/220
下面是我写了一个小例子你看一下是不是你想要的:
<html>
<head>
<style type="text/css">
div{border:2px solid green;
background:white;
position:absolute;
}
</style>
<body onload="startMove()">
<div style="left:0px;position:absolute;width:100px;height:100px;" id="move" onmouseover="startZoom()" onmouseout="startMove()"></div>
<script type="text/javascript">
var obj=document.getElementById("move");
var objLeft=parseInt(obj.style.left);
var objWidth=parseInt(obj.style.width);
var objHeight=parseInt(obj.style.height);
var timerMove,timerZoom;
function startMove(){
timerMove=setInterval("move()",100);
clearInterval(timerZoom);
}
function startZoom(){
timerZoom=setInterval("zoom()",100);
clearInterval(timerMove);
}
function move(){
objLeft=objLeft+1;
//alert(obj.style.left);
obj.style.left=objLeft+'px';
}
function zoom(){
objWidth=objWidth+5;
objHeight=objHeight+5;
obj.style.width=objWidth+'px';
obj.style.height=objHeight+'px';
}
</script>
</body>
</html>
还有一种方法,我忘记了,是直接增加style样式+onmouseover="" onmouseout=""两个属性;在样式里改变他的宽度和高度,这个是固定大小的.
扩展阅读：鼠标可以移动但是点击无效 ... html鼠标悬停事件hover ... 鼠标指针不受控制的乱动 ... 鼠标显示小手怎样调回 ... hover鼠标变手指 ... html鼠标移入移出事件 ... html鼠标移入显示图片 ... html中隐藏与悬浮显示 ... html鼠标移到a上面让a变色 ...
