我们可以写一个让小方块运动的函数

   div#demo {
width: 100px;
height:;
position: absolute;
left:;
top:;
} var div = document.getElementById(‘demo’);
var timer = window.setInterval(function () {
div.style.left = parseInt(getStyle(div, ‘left’)) + 1 + ‘px’;
ifparseInt((getStyle(div, ‘left’)) > 1000) {
clearInterval(timer);
}
}, 10);
 

浅谈脚本化css(三)之方块运动函数的更多相关文章

  1. 浅谈脚本化css(二)

    查询计算样式 window上面有一个方法叫做getComputedStyle可以来获取元素的计算样式,也就是css样式.   window.getComputedStyle(ele. null); J ...

  2. 浅谈脚本化css(一)

    读写css属性 每一个dom元素都有一个属性style,dom.style里面存放的这个元素的行间样式,我们可以通过这个属性来读写元素的行间样式. 注意: 1.我们碰到float这样的关键字属性的时候 ...

  3. 深入理解脚本化CSS系列第三篇——脚本化CSS类

    前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...

  4. JavaScript权威指南--脚本化CSS

    知识要点 客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程.脚本化css启用了一系列有趣的视觉效果.例如:可以创建动画让文档从右侧“滑入”.创造这些效果的javascript ...

  5. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  6. 深入理解脚本化CSS系列第四篇——脚本化样式表

    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...

  7. 深入理解脚本化CSS系列第一篇——脚本化行内样式

    × 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...

  8. 20190608_浅谈go&java差异(三)

    20190608_浅谈go&java差异(三) 转载请注明出处https://www.cnblogs.com/funnyzpc/p/10990703.html 第三节内容概览 多线程通讯(线程 ...

  9. 关于脚本化css

    ---恢复内容开始--- 想把自己认为的最重要的,最有用的几块写上,以后会边学边总结完善. 1.首先我们通过JavaScript可以获取到我们想要获取的元素的样式.而这个样式并非单独的哪一个部分的规则 ...

随机推荐

  1. 程序猿的日常——Java基础之抽象类与接口、枚举、泛型

    再次回顾这些基础内容,发现自己理解的又多了一点.对于一些之前很模糊的概念,渐渐的清晰起来. 抽象类与接口 抽象类通常是描述一些对象的通用方法和属性,并且默认实现一些功能,它不能被实例化.接口仅仅是描述 ...

  2. 详解linux下的串口通讯开发

    串行口是计算机一种常用的接口,具有连接线少,通讯简单,得到广泛的使用.常用的串口是RS-232-C接口(又称EIA RS-232-C)它是在1970年由美国电子工业协会(EIA)联合贝尔系统.调制解调 ...

  3. iOS 模拟不同的字体大小

     真的是神器!! 参考 Creating Self-Sizing Table View Cells

  4. iOS多线程---GCD中线程的通信

    在子线程的任务完成后,有时候需要从子线程回到主线程,刷新UI. 从子线程中回到主线程,以前已经写过一种方法: [self.imageView performSelectorOnMainThread:@ ...

  5. css设置:图片文字等不能被选择

    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

  6. Spring Security构建Rest服务-0200-搭建项目

    一.代码结构: 二.使用Springmvc开发restful API 传统url和rest区别: 三.写代码 1,编写RestfulAPI的测试用例:使用MockMvc伪造mvc package co ...

  7. Filter应用之2-设置某些页面缓存或是不缓存

    要想让所有浏览器不缓存页面,需要在每个jsp上加上: <% response.setHeader("expires","-1"); response.se ...

  8. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

  9. linux把程序添加到全局环境变量

    比如把, nginx服务放到全局变量 ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ /usr/local/bin/就是环境变量目录

  10. php如何使用rabbitmq实现发布消息和消费消息(tp框架)(第一篇)

    1,默认已经安装好了rabbitmq: 参考 http://www.cnblogs.com/spicy/p/7017603.html 2,安装rabbitmq客户端: 方法1: pecl 扩展安装  ...