码迷,mamicode.com
首页 > Web开发 > 详细

js给图层添加动态样式

时间:2019-01-24 10:59:07      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:png   src   htm   script   指定位置   anim   highlight   height   alt   

需求:需要在视窗内随意点击对应位置,图层从上到下匀速运动到指定位置

技术分享图片

 

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);

  

js给图层添加动态样式

标签:png   src   htm   script   指定位置   anim   highlight   height   alt   

原文地址:https://www.cnblogs.com/joesmile/p/10312664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!