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

html

<img id="moveDot" class="moveDot" src="data: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给图层添加动态样式的更多相关文章

  1. js 左侧树添加选择样式

    选择样式添加 menuToggle: function() { var menus = $('.nav-primary').children('li'); var tog = menus.has('. ...

  2. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  3. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  4. 微信小程序--动态添加class样式

    尺寸单位: rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = ...

  5. 【转】ArcGIS Server 10.1 动态图层—添加栅格

    本文将介绍如何通过arcgisserver10.1动态图层添加栅格影像.与添加矢量数据不同的是,天际栅格用到了RasterDataSource接口,如下所示 <esri:DynamicLayer ...

  6. 044. asp.net主题之二为主题添加CSS样式和动态加载主题

    1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...

  7. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  8. Less (一种动态样式语言)

    Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...

  9. 使用JQuery.lettering.js实现多行文本样式自定义

    前几天一位在广告公司的朋友发来求助,说:“有一个项目要求实现对字符串进行动态拆分,然后对拆分出的字符分别使用不同的样式效果...”,听到这个需求,我内心有点不屑,这有何能,最多五分钟搞定啊~~ 于是我 ...

随机推荐

  1. C# 链表去重 List 一维 二维 分别使用 Distinct() GroupBy() 方法

    分别使用List中Distinct(),GroupBy()实现链表的去重. 1.先上效果: 一维链表中分别有元素“aa”,"bb",'aa','aa',"cc" ...

  2. AndroidStudio 快捷键(最实用的20个)(转)

    有时候用的编辑器多了,快捷键容易记混淆,所以我门只用记最实用的快捷键就行了,其他效率不高的到要用的时候再查也不迟 下面是我使用AndroidStudio以来最常用的也是我认为最有用的20个快捷键 给大 ...

  3. parse

    import Parse from 'parse'; import { AsyncStorage } from 'react-native'; // 创建新的子类 var GameScore = Pa ...

  4. js判断终端以及APP应用判断

    **第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下:** <script type="text/javascript"& ...

  5. k8s集群安装

    准备三台虚拟机,一台做master,两台做master节点,关闭selinux. 一.安装docker,两node节点上进行 1. 2.安装docker依赖包:yum install -y yum-u ...

  6. 后端必备的Linux知识

    目录 从认识操作系统开始 操作系统简介 操作系统简单分类 初探Linux Linux简介 Linux诞生简介 Linux的分类 Linux文件系统概览 Linux文件系统简介 文件类型与目录结构 Li ...

  7. Getting Started with Word2Vec

    Getting Started with Word2Vec 1. Source by Google Project with Code: https://code.google.com/archive ...

  8. D9 图论综合题

    1.白银莲花池 LUOGU 2411 第一种思路:当然我们可以写三个bfs a掉这个题,这写下来一二百行要有了吧: 第二种:我们可以在一个bfs中维护所有的信息,一个方向数组,从起点开始,向八个方向扩 ...

  9. 2019.04.10打卡(HTML)

    代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  10. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...