如何使用 JavaScript 实现图片的曲线运动？

JavaScript019

如何使用 JavaScript 实现图片的曲线运动？,第1张

思路：使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：

1、HTML结构

<img src="1.png" id="test">

2、javascript代码

function change(n){

if(n>5) n=1 // 一共5张图片，所以循环替换

document.getElementById("test").setAttribute("src", n+".png")

n++

setTimeout("change("+n+")",1000)

}

window.onload = function(){

setTimeout("change(1)", 1000)

}

1.用JS更好实现

option = {

  legend: {

      data:['高度(km)与气温(°C)变化关系']

  },

  tooltip: {

      trigger: 'axis',

      formatter: "Temperature : <br/>{b}km : {c}°C"

  },

  grid: {

      left: '3%',

      right: '4%',

      bottom: '3%',

      containLabel: true

  },

  xAxis: {

      type: 'value',

      axisLabel: {

          formatter: '{value} °C'

      }

  },

  yAxis: {

      type: 'category',

      axisLine: {onZero: false},

      axisLabel: {

          formatter: '{value} km'

      },

      boundaryGap: false,

      data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']

  },

  series: [

      {

          name: '高度(km)与气温(°C)变化关系',

          type: 'line',

          smooth: true,

          lineStyle: {

              normal: {

                  width: 3,

                  shadowColor: 'rgba(0,0,0,0.4)',

                  shadowBlur: 10,

                  shadowOffsetY: 10

              }

          },

          data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]

      }

  ]

}