一个div, overflow:hidden; 里面放图片
按钮加一个事件监听，记得阻止默认事件。
在按下这个事件触发的时候，新建一个setInterval
鼠标松开的时候释放这个计时器。
计时器里面加上控制div 高和宽度的函数就可以了
希望有帮到您追问
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>demoPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="height: 800px;width: 1300px;border: solid;">
<div><button id="ex">clickToExtend</button></div>
<div><button id="re">clickToReset</button></div>
<div id="imgBox" style="overflow: hidden;z-index: -1;margin-left: auto;margin-right: auto;height: 300px;width: 300px;"><img src="http://image215.poco.cn/mypoco/myphoto/20100818/13/53691857201008181504023009745936213_000.jpg"></div>
</div>
</body>
<script type="text/javascript" src ="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
按钮加一个事件监听，记得阻止默认事件。
在按下这个事件触发的时候，新建一个setInterval
鼠标松开的时候释放这个计时器。
计时器里面加上控制div 高和宽度的函数就可以了
希望有帮到您追问
求代码……
追答<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>demoPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="height: 800px;width: 1300px;border: solid;">
<div><button id="ex">clickToExtend</button></div>
<div><button id="re">clickToReset</button></div>
<div id="imgBox" style="overflow: hidden;z-index: -1;margin-left: auto;margin-right: auto;height: 300px;width: 300px;"><img src="http://image215.poco.cn/mypoco/myphoto/20100818/13/53691857201008181504023009745936213_000.jpg"></div>
</div>
</body>
<script type="text/javascript" src ="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
温馨提示：内容为网友见解，仅供参考
第1个回答 2015-05-25
具体的代码，就不贴了。可以提供你一些思路。
可以再图片上再加一个元素，这个元素一直水平居中，然后js控制这个元素，宽度不断增大，随着宽度的增大，然后底下的图片也被遮住了。
至于长按，应该就是在鼠标mousedown时，执行一个setTimeout()方法，然后mouseup时，在clear吧。
以上，希望能够帮助到你。追问
可以再图片上再加一个元素，这个元素一直水平居中，然后js控制这个元素，宽度不断增大，随着宽度的增大，然后底下的图片也被遮住了。
至于长按，应该就是在鼠标mousedown时，执行一个setTimeout()方法，然后mouseup时，在clear吧。
以上，希望能够帮助到你。追问
能把完整代码贴出来吗？对js一窍不通
相似回答
