js 图片拉伸实例

最新推荐文章于 2024-06-27 16:14:54 发布

lvzk555

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量2.6k

点赞数

文章标签： function javascript

本文链接：https://blog.csdn.net/lvzk555/article/details/7299607

版权

本文将介绍如何使用JavaScript处理图片，实现图片的拉伸效果。通过调整图片的CSS属性和利用JavaScript的DOM操作，我们可以动态改变图片尺寸，达到图片拉伸的目的。适合于网页动态布局或响应式设计中对图片大小进行自适应调整的需求。

摘要由CSDN通过智能技术生成

<style>
#top{
	position:relative;
}
#content{
	position:absolute;
}
	

</style>

<body οnlοad="moveDown()" style="margin:0px; 0px;">
<div id="top" style="width:100%; height:100px; background-color:#F96">网页的广告部分<br>
网页的广告部分<br>
</div>
<div id="content" style="width:100%; height:500px; background-color:#FF9">这是网页的正文部分</div>
</body>
<script language="javascript" type="text/javascript">
  //定义要移动的距离
  var h=0;
  var maxheight=300;
  var st;
  var top=document.getElementById("top");
  //初始时，设置top为隐藏状态
   top.style.display="none";
  //定义让广告部分展开
  function moveDown(){
   //累加  
   h+=2;
   //设置高度等于我们累加的值
   top.style.height=h;
   //设置层显示
   top.style