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

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. localStorage,sessionStorage和cookie的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  2. C#返回字符串的字节长度,一个中文算两个字符的代码

    如下代码段是关于C#返回字符串的字节长度,一个中文算两个字符的代码. public static int GetLength(string str) { if (str.Length == 0) re ...

  3. .NET 常用ORM之NHibernate

    NHibernate做.Net应该都不陌生,今天我们就算是温故下这个技术,概念性的东西就不说了,这次主要说本人在实际使用的遇到的问题,比较费解现在就当是记录下,避免以后再犯.本次主要使用的情况是1对N ...

  4. gzip对字符串的压缩和解压

    package org.jc.plugins.gzip; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStre ...

  5. Windows 下安装 Memcached

    Windows 下安装 Memcached 官网上并未提供 Memcached 的 Windows 平台安装包,我们可以使用以下链接来下载,你需要根据自己的系统平台及需要的版本号点击对应的链接下载即可 ...

  6. 【Alpha】Scrum Meeting 8

    目录 前言 任务分配 燃尽图 会议照片 签入记录 困难 前言 第8次会议在4月12日21:00进行微信会议. 交流确认了任务进度,对下一阶段任务进行分配.时长15min. 任务分配 姓名 当前阶段任务 ...

  7. Introducation of Servlet filter(servlet过滤器介绍 )

    本文章向大家介绍Servlet Filter,主要包括 Servlet Filter使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 过滤器是一个可以转换 ...

  8. 一键git push脚本(python版)

    #!/usr/bin/env python import os import subprocess import sys import time gitconfig = { 'cwd': './blo ...

  9. [Redis] - redis实战1

    rememberMe>>>>:null Creating a new SqlSession SqlSession [org.apache.ibatis.session.defa ...

  10. HDU 1560 DNA sequence(DNA序列)

    HDU 1560 DNA sequence(DNA序列) Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K  ...