最近喜欢用js做车轮的来回滚动，简单的js动画分享给大家。有什么建议记得说出来大家一起讨论哦！效果图如下：

源代码：

<style>
#pic1{
width:20px;
height:20px;
background: red;
}
</style>
</head>
<body>
<div id="pic1">
</div>
</body>
<script>
window.onload =function(){
var ab=document.getElementById("pic1");
var left=0;
var fangxiang="left";
var isrun=false;
if(isrun){
clearInterval(window.id);
isrun=false;
}else{
window.id=setInterval(function(){
if(left>500){
fangxiang="right";
}if(left<=0){
fangxiang="left";
}if(fangxiang=="left"){
left+=10;
var logTime = setInterval(function(){

ab.style.transform = "rotate(" + left + "deg)";
},1);
}else{
left-=10;
}
ab.style.marginLeft=left+"px";
},100);
isrun=true;
}
}
</script>

js实现车轮的来回滚动的更多相关文章

  1. jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）

    闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...

  2. jquery实现同时展示多个tab标签+左右箭头实现来回滚动

    内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...

  3. 【js】我们需要无限滚动列表吗？

    无限滚动列表,顾名思义,是能够无限滚动的列表(愿意是指那些能够不断缓冲加载新数据的列表的).但是,我们真的需要这样一个列表吗?在PC端,浏览器的性能其实已经能够满足海量dom节点的渲染刷新(笔者经过简 ...

  4. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  5. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  6. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  7. 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

    Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...

  8. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  9. ios Label TextFile 文本来回滚动 包括好用的三方

    通常显示不够了,比如八个字.只能显示6个字 .产品要求 来回滚动 下面有两种 方法 : 一种UIScrollView  一种 View动画  如果不能满足你  请点击这个 https://github ...

随机推荐

  1. 诺基亚HERE地图

    1.基本图层 2.3D图层 3.卫星图层 4.地形图层 5.在线帮助

  2. 静态链表实现 (A-B)U(B-A)

    图中黄色部分为(A-B)U(B-A)的实际意义,用结构数组做静态链表来实现该表达式 大致流程是先建立A链表,接着将挨个输入的B中元素在A链表中遍历.如果没找到,就加到A链表结尾下标为endpointe ...

  3. pythonBasic

    1,judgment in  deciding(if...:,if..else:,if else...else:),loop(for...:,while True...:) break,continu ...

  4. Linux环境Nginx安装多版本PHP

    php5.4.44 所谓多版本多版本PHP就是php5.4和5.5以及其他版本在同一台服务器. 假如php5.5是主版本已经安装在/usr/local/php目录下,那么再安装其他版本的php再指定不 ...

  5. 一种基于Qt的可伸缩的全异步C/S架构server实现(二) 网络传输

    二.网络传输模块 模块相应代码命名空间    (namespace ZPNetwork) 模块相应代码存储目录    (\ZoomPipeline_FuncSvr\network) 2.1 模块结构 ...

  6. 使用java连接hive，并执行hive语句详解

    安装hadoop 和 hive我就不多说了,网上太多文章 自己看去 首先,在机器上打开hiveservice hive --service hiveserver -p 50000 & 打开50 ...

  7. Swift中NSData与NSDictionary之间的相互转换

    原创Blog,转载请注明出处 使用NSKeyedUnarchiver类来进行相互转换 1.NSDictionary转NSData var dictionaryExample : [String:Any ...

  8. UGUI实现的虚拟摇杆，可改变摇杆位置

    实现方式主要参考这篇文章:http://www.cnblogs.com/plateFace/p/4687896.html. 主要代码如下: using UnityEngine; using Syste ...

  9. 【并查集专题】【HDU】

    PS:做到第四题才发现 2,3题的路径压缩等于没写 How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  10. PPTP协议握手流程分析

    一  PPTP概述 PPTP(Point to Point Tunneling Protocol),即点对点隧道协议.该协议是在PPP协议的基础上开发的一种新的增强型安全协议,支持多协议虚拟专用网,可 ...