需求: 需要在视窗内随意点击对应位置, 图层从上到下匀速运动到指定位置
- html
- <img id="moveDot" class="moveDot" src="images/moveDot.png">
- JS
- // 地图插点动态效果
- // 横坐标
- var x=120;
- // 纵坐标
- var y=200;
- var style = document.styleSheets[0];
- style.insertRule('.moveDot {width:30px;height:auto;position:absolute;left:'+x +'px;top:'+y +'px;z-index:999999;animation:mymove 500ms;-webkit-animation:mymove 500ms;animation-timing-function:linear;}', 0);
- style.insertRule('@keyframes mymove{from{ top:0; }to{top:'+y +'px;}}',0);
- style.insertRule('@-webkit-keyframes mymove{from{ top:0; }to{top:'+y +'px;}}',0);
来源: http://www.bubuko.com/infodetail-2931888.html