目的是实现瀑布流式的图片分布,试了小分辨率的图片可以,然而换成手机拍摄的图片就不行了
注意看看右边的比例,图片已经被放大到了丧心病狂的程度。
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="butong_net_left" style="overflow:hidden;max-width:100%;
max-height:100%;
">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="butong_net_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="feng1.jpg"></td>
<!--<td><img src="feng2.jpg"></td>
<td><img src="feng3.jpg"></td>
<td><img src="feng4.jpg"></td> -->
</tr>
</table>
</td>
<td id="butong_net_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function() {clearInterval(MyMar3)}
butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
</body>
</html>
-
尝试
- 因为自己并没有学过html,所以就只能依样画葫芦的修改一下网上的代码。
http://www.cnblogs.com/cainiao-Shun666/p/6622678.html
参考这篇文章,激动地我以为要成功了。结果发现图片下半部分全被截掉了,。- 我怀疑是overflow属性,再尝试搜索了一下overflow属性,发现是对溢出的内容提供滚轮处理,明显和我们的要求不相符。
http://www.w3school.com.cn/tiy/t.asp?f=csse_pos_overflow_auto - 所以到底是哪个属性可以让图片压缩显示呢???
未完待续!!
好像看到偷着乐的自己 ^ _ ^
- 我怀疑是overflow属性,再尝试搜索了一下overflow属性,发现是对溢出的内容提供滚轮处理,明显和我们的要求不相符。
- 因为自己并没有学过html,所以就只能依样画葫芦的修改一下网上的代码。