最近喜欢用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. LeeCode-Two Sum

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  2. 【LeetCode练习题】Reverse Words in a String

    Reverse Words in a String Given an input string, reverse the string word by word. For example,Given ...

  3. html5 laboratory - drawing in the canvas

    html5 laboratory - drawing in the canvas Creating a bar chart with canvas 21st February 2010 The exp ...

  4. A Corrupt Mayor's Performance Art（线段树区间更新+位运算，颜色段种类）

    A Corrupt Mayor's Performance Art Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 100000/100 ...

  5. C/C++中经常使用的字符串处理函数和内存字符串函数

    一.            字符处理函数 1.        字符处理函数:<ctype.h> int isdigit(int ch) ;//是否为数字,即ch是否是0-9中的字符 int ...

  6. Android系统的开机画面显示过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7691321 好几个月都没有更新过博客了,从今天 ...

  7. struts2 action重定向

    struts2的结果类型: <action name="loginAction" class="com.itheima.action.LoginAction&quo ...

  8. EF查询数据库框架的搭建

    一个简单的EF查询框架除了运行项目外,大概需要5个类库项目,当然这个不是一定要这样做,这可以根据自己的需要设置有多少个项目.这里介绍的方法步骤只适合EF零基础的人看看就是了. 在开始之前,先建立一个运 ...

  9. C# Process.Start()方法详解(转)

    C# Process.Start()方法详解 System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某 ...

  10. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...