原生JS运动系列
静宝宝的博客
希望读者们能给出一些建议,有不足的地方麻烦多多指点,谢谢
展开
-
分块运动-原生JS详解
下面我做一个简单的布局,假设图片路径为image/0、1、2.jpg共三张图片<style>.box{ width: 800px; height: 400px; margin: 50px auto; position: relative; background: url(imag原创 2017-01-23 20:01:23 · 368 阅读 · 0 评论 -
穿墙运动-原生JS详解
这是拉钩网的效果图,模仿原网站写的,大家可以参考原网站效果图1–Math.atan2()函数与所求角度函数详解,参照下面代码看图2–关于鼠标移入方向与值n的详解,参照下面代码看图3–这是我写的一个简单的demo;//只是布一个简单的局来模仿<ul> <li> <img src="image/1.png"/> <原创 2017-01-22 22:34:33 · 469 阅读 · 0 评论 -
用原生js封装运动框架
… function getCssStyle(obj,styleName){ if(obj.currentStyle){ return obj.currnentStyle[styleName] }else{ return computedStyle(obj,false)[styleName] }function startMov原创 2017-01-15 22:12:42 · 562 阅读 · 0 评论 -
斜三角分块运动-原生JS详解
与上一篇分块运动不同的是,上一篇是一行一行的一块一块的运动直到最后一个。而斜三角分块运动是从左上角开始,只要是斜对角在一条线上的都会同时显示,透明度从0到1开始运动。两种运动的大部分代码一样,由于for循环瞬间就可以完成,只需要改变需要同时运动的元素在定时器开启时的延时时间而已; <style>.box{ width: 800px; height:原创 2017-01-23 21:02:48 · 829 阅读 · 0 评论 -
圆的运动-原生JS详解
接下来做一个简单的布局<style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid #000; position: relative;原创 2017-01-23 21:59:28 · 1080 阅读 · 0 评论 -
苹果菜单靠近变大-原生JS详解
以下是效果图 下面我做一个简单的布局<style type="text/css"> *{ margin: 0; padding: 0;} .box{ width: 100%; position: absolute; left: 0;原创 2017-01-24 12:15:09 · 468 阅读 · 0 评论 -
无线随机运动-原生JS详解
让一个块在页面中无限随机运动 相当于不停地给物体一个随机的目标点 <style type="text/css"> div{ width: 100px; height: 100px; background: red; position: absol原创 2017-01-24 13:27:18 · 1000 阅读 · 0 评论