JS入门到精通第16章图像处理

分类Javascript时间2026-07-06 13:38:37发布信义之树浏览110

导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用预装载图像制作幻灯</tit...

一、练习

1. 练习1

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>使用预装载图像制作幻灯</title>
    
<script type="text/javascript">

 window.addEventListener('DOMContentLoaded',function(){    
    var begin=setInterval('showpic()',1000);
    
  });    
    
var j=0;
var test=new Array(15);
for(var i=0;i<=14;i++){
test[i]=i;
}
var test2=[];
for(var i=0;i<test.length;i++){
test2[i]=new Image();
test2[i].src=test[i]+'.gif';

alert(test2[i].src);
}


    
function showpic(){
  if(j==14)
     j=0;
  else
     ++j;

  var imagestr=test2[j].src.split("/");
  var imagesrc=imagestr[imagestr.length-1];
  str="<img src='image/"+imagesrc+"'/>";
  div1.innerHTML=str;
}
    
</script>
</head>
    
<body onLoad="var begin=setInterval('showpic()',1000);">
    
<div id='div1'></div>
    
</body>
    
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_1/

（3）Tips

有点绕，写的很潦草。

++j和j++一样的效果。

取分割后数组的最后一个元素。

2. 练习2

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>按时间随机变化的网页背景</title>
<style type="text/css">
<!--
.style2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}
.style5 {color: #FFFFFF;font-size: 14px;}
table{
  width: 265px;
  height: 110px;
  margin: 5px auto;
  border-collapse: collapse;
}
td{
  border:1px solid #0000FF;
}
-->
</style>
</head>
<body onLoad="randompic();">
    
<div>修改密码</div>
<table>
  <tr>
    <td><span>用户名：</span></td>
    <td><input name="textfield" type="text"></td>
  </tr>
  <tr>
    <td><span>密&emsp;码：</span></td>
    <td><input name="textfield2" type="text"></td>
  </tr>
  <tr>
    <td><span>确认密码：</span></td>
    <td><input name="textfield3" type="text"></td>
  </tr>
  <tr>
    <td colspan="2"><div style="text-align: center">
      <input name="Submit2" type="button" value="保存">
&nbsp;&nbsp;      
<input name="Button" type="button" value="取消">
    </div></td>
  </tr>
</table>
<p>

<script type="text/javascript">
   window.addEventListener('DOMContentLoaded',function(){
        randompic();
    });    
    
    
    
function randompic(){
    var i = Math.floor(Math.random()*5);
    var src = "";
    switch(i){
     case 0 :
         src = "0.jpg";
        break;
     case 1: 
         src = "1.jpg";
         break;
     case 2:
         src = "2.jpg";
        break;
    case 3:
        src = "3.jpg";
        break;
    case 4:
        src = "4.jpg";
        break;        
    }
    document.body.background=src;    
    setTimeout("randompic()",3000);
}
</script>
</p>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_2/

（3）Tips

document.body.background。

setTimeout。

3. 练习3

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>无间断的图片循环滚动效果</title>
  <style>
    #box{
      width: 750px;
      margin: 0 auto;
      overflow: hidden;
      border: 3px solid #0000FF;
    }
    #inner{
      width: 800%;
    }
    #div1{
      float: left;
       border: 1px solid #0000FF;
    }
    #div2{
      float: left;
      width: 1325px;
      border: 3px solid #00FF00;
    }
    img{
      width: 110px;
      height: 89px;
      float: left;
    }
  </style>
</head>
<body>
<div id="box">
  <div id="inner">
    <div id="div1">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
      <img src="7.jpg">
      <img src="8.jpg">
      <img src="9.jpg">
      <img src="10.jpg">
      <img src="11.jpg">
      <img src="12.jpg">
    </div>
    <div id="div2"></div>
  </div>
</div>
<script type="text/javascript">
  var box=document.getElementById("box");
  var div1=document.getElementById("div1");
  var div2=document.getElementById("div2");
  var n=15;  //数值越小图片滚动的越快
  div2.innerHTML=div1.innerHTML;
    
  alert(div2.offsetWidth);
  alert(box.scrollLeft);
  alert(div1.offsetWidth);    
    
  var Mycheck;
  function move(){
      if(div2.offsetWidth-box.scrollLeft<=0)
          box.scrollLeft=0;
          //box.scrollLeft-=div1.offsetWidth;
      else
          box.scrollLeft++;
      Mycheck=setTimeout(move,n);
  }
  box.onmouseover=function(){clearTimeout(Mycheck);}
  box.onmouseout=function(){Mycheck=setTimeout(move,n);}
  move();
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_3/

（3）Tips

难以理解，两个为啥大小不一样，过渡的时候怎样的。

box.onmouseover，clearTimeout()。

width=800%。

4. 练习4

（1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<!--<link href="CSS/style.css" rel="stylesheet">-->
<title>随机生成登录图片验证码</title>
<style>
td {
    font-size: 9pt;    color: #000000;
}

img{
    border:0;
}
.blue {
    font-size: 9pt;    color: #034683; font-family:"Times New Roman"
}

.btn_grey {
    font-family: "宋体";    font-size: 9pt;color: #333333;    
    background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
    border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
    border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
    font-family: "宋体";
    font-size: 9pt;
    color: #333333;
    border: 1px solid #999999;

}

body {
    margin: 0px;
    /*background-image:url(../images/bg.gif)*/
}
 
</style>
</head>
<body>
<table width="350" height="224"  border="0" cellpadding="0" cellspacing="0" background="Images/login.jpg">
        <tr>
          <td height="84">&nbsp;</td>
        </tr>      
              
        <tr>
          <td height="45" valign="top"><table width="62%" height="114"  border="0" cellpadding="0" cellspacing="0">
              <form name="form1" method="post" action="#">
            <tr>
              <td height="30" colspan="4">&nbsp;<span>用户名</span>：
              <input name="manager" type="text" id="manager" size="20"></td>
            </tr>
            <tr>
              <td height="27" colspan="4"><span>密&nbsp; &nbsp;&nbsp;&nbsp;码：</span>              <input name="PWD" type="password" id="PWD" size="22"></td>
            </tr>
            <tr>
              <td width="35%"  height="27"><span>验证码</span>：              </td>
              <td width="14%"><input name="checkcode" type="text" id="checkcode" size="5"></td>
              <td width="48%" ><div id='div1'></div></td>
              <td width="3%" >&nbsp;</td>
            </tr>

            <tr>
              <td colspan="4"><input name="Submit" type="submit" value="确认"> &nbsp;
                <input name="Submit2" type="reset" value="重置">
              &nbsp;</td>
            </tr></form>
          </table></td>
        </tr>
</table>
<script type="text/javascript">
var str="";
var img="";
var strsource=['明','天','日','科','技','会','更','好','创','新'];
for(var i=1;i<=4;i++){
    var n=Math.floor(Math.random()*strsource.length);
    str=str+strsource[n]; //验证的，这里没用到
    img=img+"<img src='Images/checkcode/"+n+".gif' width='19' height='20'> ";
    div1.innerHTML=img;
}
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_4/

（3）Tips

好像又挺简单。

5. 练习5

（1）源代码

<!DOCTYPE>
<html>
<head>
  <meta charset="UTF-8">
  <title>浮动广告</title>
  <script type="text/javascript">
      
    
    var layers;
    function floaters() {
      this.items= [];
      this.addItem= function(id,x,y,content){
        document.write('<div id='+id+' style="z-index: 10; position: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</div>');
        var newItem= {};
        newItem.object= document.getElementById(id);
        if(y>10) {y=10}
        newItem.x= x;
        newItem.y= y;
        this.items[this.items.length]= newItem;
      }
      this.play= function(){
        layers= this.items;
        setInterval('play()',10);
      }
    }
    
    var delta=0.15;
      //alert(layers.length);
    function play(){
        //alert(layers.length);
        i=0;
        var obj= layers[i].object;
        var obj_x= (typeof(layers[i].x)=='string'?eval(layers[i].x):layers[i].x);
        var obj_y= (typeof(layers[i].y)=='string'?eval(layers[i].y):layers[i].y);
         
          
        //alert("obj_x:"+obj_x+"，obj_y:"+obj_y+"，offsetLeft:"+obj.offsetLeft+"，scrollLeft:"+document.body.scrollLeft)  
          
        if(obj.offsetLeft!=(document.body.scrollLeft+obj_x)) {
          var dx=(document.body.scrollLeft+obj_x-obj.offsetLeft)*delta;
          dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
          obj.style.left=obj.offsetLeft+dx;
        }
          
        if(obj.offsetTop!=(document.body.scrollTop+obj_y)) {
          var dy=(document.body.scrollTop+obj_y-obj.offsetTop)*delta;
          dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
          obj.style.top=obj.offsetTop+dy;
        }
        obj.style.display= '';
      
       
        
    }

    var strfloat = new floaters();
    strfloat.addItem("followDiv",6,80,"<img src='ad.jpg'  border='0'>");
    strfloat.play();
      
      
  </script>
</head>
<body style="width: 1000px;height: 1000px;">
    <p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p>
    <p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p>
    <p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p>
    <p>加点东西再看</p>
    <p>加点东西再看</p>
    <p>加点东西再看</p><p>加点东西再看</p>
</body>

</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_5/

（3）Tips

麻求烦谁那么算，浪费时间。

obj.offsetLeft，如果父元素没设定直接找body。

obj.style.display=''是显示，按默认显示。

6. 练习6

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>图片渐变效果</title>

</head>
    
    
<body>
<img src="1.jpg" id="myImage" style="border:1px solid #000000;opacity:0">
    
<script type="text/javascript">
var b = 1;
var c = true;
function latent()
{
  if(c == true) 
      b++;
  else 
      b--;
  if(b==100)
  {
    b--;
    c = false
  }
  if(b==10)
  {
    b++;
    c = true;
  }
  myImage.style.opacity=b/100;
  setTimeout("latent()",25);
}
latent();
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_6/

（3）Tips

myImage.style.opacity=b/100;

c=true;c=false，控制b是加还是减。

latent，潜在的，隐性的。

7. 练习7

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>进度条的显示</title>
<link href="CSS/progress.css" rel="stylesheet" type="text/css">
<style>
#test{
width:200px;
border:1px solid #000;
background:#fff;
color:#000;
}
#progress{    
display:block;
width:0px;
background:#ccc;
}    
        
</style>

<script type="text/javascript">
function progressTest(n){    
    var prog=document.getElementById('progress');
    prog.firstChild.nodeValue=n+"%";
    prog.style.width=(n*2)+"px";
    n+=10;
    if(n>100){
        n=0;
    }
    setTimeout('progressTest('+n+')',1000);
}
</script>
</head>

<body>
<p id="test"><span id="progress">10%</span></p>
<script type="text/javascript">
progressTest(10);
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_7/

（3）Tips

pro.firstChild.nodeValue，表示第一个子节点，也就是span里的文本节点里的值，就是文字本身。

progressTest 函数内部没有 return 语句，它执行完后会返回 undefined。必须用字符串拼接。

8. 练习8

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>图片的时钟显示</title>

<style type="text/css">

.style1 {color: #52C6FF}

</style>
</head>

<body >

<p>当前时间：</p>
<img id="d0" src="img/0.jpg" alt="0">
<img id="d1" src="img/0.jpg" alt="0">
<img src="img/10.jpg" alt=":">
<img id="d2" src="img/0.jpg" alt="0">
<img id="d3" src="img/0.jpg" alt="0">
<img src="img/10.jpg" alt=":">
<img id="d4" src="img/0.jpg" alt="0">
<img id="d5" src="img/0.jpg" alt="0">
    
    
<script type="text/javascript">
 window.addEventListener('DOMContentLoaded',function(){
        setInterval('displayTime()',1000);
       });
    
var imgs=[];
for(var i=0;i<10;i++){
    imgs[i]=new Image();
    imgs[i].src='img/'+i+'.jpg';
}
    
function displayTime(){
    var now=new Date();
    var time=[];
    var hrs=now.getHours();
    hrs=(hrs<10?'0':'')+hrs;
    time[0]=hrs.charAt(0);
    time[1]=hrs.charAt(1);
    var mins=now.getMinutes();
    mins=(mins<10?'0':'')+mins;
    time[2]=mins.charAt(0);
    time[3]=mins.charAt(1);
    var secs=now.getSeconds();
    secs=(secs<10?'0':'')+secs;
    time[4]=secs.charAt(0);
    time[5]=secs.charAt(1);
    
    for(var i=0;i<time.length;i++){
        var img=document.getElementById('d'+i);
        img.src=imgs[time[i]].src;
        img.alt=time[i];
    }
}

</script>  
    
    
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_8/

（3）Tips

document.getElementById('d'+i)

img.src=imgs[time[i]].src;

img.alt=time[i]。

9. 练习9

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>不断闪烁的图片</title>
    
<script type="text/javascript">

 window.addEventListener('DOMContentLoaded',function(){
        glint();
       });
    
    
function glint(){
    div1.style.visibility = (div1.style.visibility == "hidden") ? "visible" : "hidden";
    setTimeout("glint()", 200);
}
</script>
    
</head>    
    
    
<body >
<div id="div1" style="position:absolute; left:150px; top:0">
    <a href="http://www.mingrisoft.com" target="_blank">
    <p></p>
        <img id="image1" src="Temp.jpg">
    <p></p>
    <span style="font-size: 12pt; color: #FF0000"> 明日科技最新图书 </span>
    </a>
</div>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_9/

（3）Tips

document.style.visibility="hidden"，visible。

10. 练习10

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>图片总置于顶端</title>
</head>

<body>
<div id="Tdiv" style="position: absolute; left: 0; top: 0; z-index: 25">
    <img id="image1" src="mrsoft.jpg" width="52" height="249">
</div>
    
<div style="text-align: center;">
    <img src="gougo.jpg">
</div>    
    
    
<script type="text/javascript">
var ImgW=image1.width;
function permute(tfloor,Top,left){
    
    
    var RealTop=document.body.scrollTop || document.documentElement.scrollTop;
    buyTop=Top+RealTop;
    document.getElementById(tfloor).style.top=buyTop+"px";
    
    var RealLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
 
    var bWidth=document.documentElement.clientWidth;
    
    var buyLeft=RealLeft+bWidth-ImgW;
    
    document.getElementById(tfloor).style.left=buyLeft-left+"px";
    
    alert(document.documentElement.scrollTop);
    alert(buyTop);
    alert(document.documentElement.scrollLeft);
    alert(bWidth);
    alert(buyLeft);
}
    
    
setInterval('permute("Tdiv",2,2)',3000);
    
    
</script>

</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_10/

（3）Tips

应该是懂了，图像的移动太绕。

z-index，显示在最上层。

document.body.scrollTop，document.documentElement.scrollTop。

二、编程训练

1. 训练1

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>为图片添加边框</title>
    
<script type="text/javascript">
    
function addBorder(form){
    
    document.images['line'].border = form.border.value;
}
    
</script>
    
</head>
    
<body>
    
<form name="myform">
  边框宽度：<input type="text" name="border">
  <input type="button" value="添加边框" onClick="addBorder(myform)">
</form>
    
<br>
    
<img name="line" width="200" id="mypic" src="line.jpg">
    
</body>
    
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_11/

（3）Tips

onClick="addBorder(myform)"

document.images['line'].border = form.border.value。

2. 训练2

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>置换图片</title>
</head>
    
<body>
    
<script type="text/javascript">
    
function changeImage(imageName){//定义changeImage()函数
    document.images[imageName].src = 'images/book2.jpg';//将图片置换为book2.jpg
}
    
function resetImage(imageName){//定义resetImage()函数
    document.images[imageName].src = 'images/book1.jpg';//将图片置换为book1.jpg
}
    
</script>
    
<img name="book1" src="images/book1.jpg" onMouseOver="changeImage('book1')" onMouseOut="resetImage('book1')">
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_12/

（3）Tips

document.images[imageName].src。

3. 训练3

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线调整图片透明度</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    
<style>
@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}

.cont {
    width: 504px;
    margin: 20px auto;
    text-align: center;
}
.cont>*{
    margin-top: 20px;
}
.cont>div{
    border: 2px dashed #00ffff;
}
span{
    color: #f00;display: inline-block;
    margin-left: 6px;
}
p{
    font: normal 16px "宋体";
    display: inline-block;
    margin: 20px auto;
}

    
</style>    
            
</head>
    
<body>
<div>
    <img src="img/pic.jpg" alt="" id="pic" width="500">
    <div>
        <p>拖动滑块设置透明度：</p>
        <label>
            <input type="range" max="100" min="0" oninput="opa()" id="num">
            <span id="val">0.5</span> 
        </label>
    </div>
</div>
    

    
<script type="text/javascript">
    opa();
    
function opa(){
    var pic=document.getElementById("pic");
    
    var opacity=document.getElementById("num").value;
    var span=document.getElementById("val")
    
    pic.style.opacity=opacity/100;
    span.innerHTML=opacity+"%";
}
    
</script>
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_13/

（3）Tips

pic.style.opacity

span.innerHTML

dashed，点状。

换成oninput顺眼多了。

三、实践与练习

1. 实践1

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
</head>

<body style="width: 1200px; height: 1000px;">
    
<div id="Tdiv" style="position: absolute;">
    <img id="image1" src="img.jpg" height="200">
</div>
    
    
    
<script type="text/javascript">
    
var ImgH=image1.height;
    
function permute(tfloor){
    var RealLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
    document.getElementById(tfloor).style.left=RealLeft+"px";
    var RealTop=document.body.scrollTop || document.documentElement.scrollTop;
    var bHeight=document.documentElement.clientHeight;
    var buyTop=RealTop+bHeight-ImgH;
    document.getElementById(tfloor).style.top=buyTop+"px";
}
    
setInterval('permute("Tdiv")',100);
    
</script>
    
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_14/

（3）Tips

终于能看懂了。

2. 实践2

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
</head>

<body>

<input id="textfield" type="text" size="15"><p>
<div id="soccer"  style="visibility: hidden;">
    <img border="0" src="img.jpg">
</div>

    
<script type="text/javascript">
    
    var sec=10;
    var timer;
    function hidepic(){
        if (sec==0){
            document.getElementById("textfield").value = "图片被显示";
            soccer.style.visibility =(soccer.style.visibility == "hidden") ? "visible" : "hidden";
        }else{
            document.getElementById("textfield").value = "图片会在 "+sec+" 秒后显示";
            setTimeout("hidepic()",1000);
        }
        sec--;
    }
  
    
window.addEventListener('DOMContentLoaded',function(){    
    hidepic();
    
  });  
    
    
</script>    
    
    
    
    
</body>
</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_15/

（3）Tips

他非要那么写，我就改。

3. 实践3

（1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
</head>


<body >
<img name="image1" src="img.jpg">
    
<script type="text/javascript">
    
    var size = 1;
    var bool = true;
    
    function imgdistortion(){
        if (bool==true){
            size++;
        }
        
        if(bool==false){
            size--;
        }    
        
        if(size==100){
            bool=false;
        }

        if(size==1){
            bool=true;
        }
        
        image1.width = 260 + size;
        image1.height = 160 - size;
        
        setTimeout("imgdistortion()",30);
    }
    
    
window.addEventListener('DOMContentLoaded',function(){    
    imgdistortion();
    
  });      
    
</script>    
    
    
</body>

</html>

（2）运行页面

https://www.xinyizhishu.top/jsC/sc/16_16/

（3）Tips

skill加一。

JS入门到精通第15章使用Cookie JS入门到精通第19章 jQuery技术

JS入门到精通 第16章 图像处理

相关内容

JS入门到精通第16章图像处理