最近喜欢用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. UIColor-Hex-Swift

    // // UIColorExtension.swift // HEXColor // // Created by R0CKSTAR on 6/13/14. // Copyright (c) 2014 ...

  2. ADO.net基础学习总结

    ADO.net是一门.net连接.操作数据库的技术   释放资源:凡是实现了idisposable借口的类都需要用using来释放资源 using() { } 连接数据库 //创建数据库连接: usi ...

  3. 【IOS学习基础】weak和strong、懒加载、循环引用

    一.weak和strong 1.理解 刚开始学UI的时候,对于weak和strong的描述看得最多的就是“由ARC引入,weak相当于OC中的assign,但是weak用于修饰对象,但是他们都不会造成 ...

  4. WindowsForm 增 删 查 改

    首先是连接数据库  在数据库里写代码 建立一个数据库下面是代码 create database JinXiaoCun go use JinXiaoCun go create table users ( ...

  5. LInux系统及其文件系统

    Linux系统:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协 ...

  6. USACO 1.3... 虫洞 解题报告（搜索+强大剪枝+模拟）

    这题可真是又让我找到了八数码的感觉...哈哈. 首先,第一次见题,没有思路,第二次看题,感觉是搜索,就这样写下来了. 这题我几乎是一个点一个点改对的(至于为什么是这样,后面给你看一个神奇的东西),让我 ...

  7. linux下C++对线程的封装

    之前一直是使用C语言,前段时间转做C++.无论使用什么语言,多线程编程都是不可或缺的.最近项目中又用到了线程,现在将线程的封装做出总结: 1.线程类中应该包含线程ID.线程的状态以及线程基本操作等. ...

  8. DDD的"waiting until GDB gets ready"

    运行DDD调试器时,出现卡死现象,看软件状态,发现"waiting until GDB gets ready",Google了这个问题,很多都是删除文件夹"~/.ddd& ...

  9. C++标准程序库读书笔记-第四章通用工具

    1.Pairs(对组) (1)class pair可以将两个值视为一个单元.任何函数需返回两个值,也需要pair. (2)便捷地创建pair对象可以使用make_pair函数 std::make_pa ...

  10. mysql单表大小的限制

    mysql单表大小的限制一.MySQL数据库的MyISAM存储 引擎单表大小限制已经不是有MySQL数据库本身来决定(限制扩大到64pb),而是由所在主机的OS上面的文件系统来决定了.在mysql5. ...