最近喜欢用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. bzoj2018 [Usaco2009 Nov]农场技艺大赛

    Description Input 第1行:10个空格分开的整数: N, a, b, c, d, e, f, g, h, M Output 第1行:满足总重量最轻,且用度之和最大的N头奶牛的总体重模M ...

  2. Maximum Subarray 解答

    Question Find the contiguous subarray within an array (containing at least one number) which has the ...

  3. InternetExplorer 表单及用户名密码提交

    陆ftp或者其他类似需要输入密码的站点,可以在url中直接输入用户名密码,格式为: ftp://username:password@url 另外一种情况是,如果是表单提交的也可以通过url填写,如: ...

  4. 把程序嵌入网页之ATL编写ActiveX[标准窗口+接受参数]

    从VS2010开始ATL ActiveX支持IObjectSafety接口,所以用VS2010来编写,新建一个ATL项目 向导的第一页没什么东西,直接下一步,选项可以根据具体需求调整 点“完成”,切换 ...

  5. Hibernate绑定参数

    使用绑定参数的优势: 我们为什么要使用绑定命名参数?任何一个事物的存在都是有其价值的,具体到绑定参数对于HQL查询来说,主要有以下两个主要优势:①. 可以利用数据库实施性能优化 因为对Hibernat ...

  6. Codeforces 474D Flowers dp（水

    题目链接:点击打开链接 思路: 给定T k表示T组測试数据 每组case [l,r] 有2种物品a b.b物品必须k个连续出现 问摆成一排后物品长度在[l,r]之间的方法数 思路: dp[i] = d ...

  7. LFS: Interface eth0 doesn't exist

    环境 宿主主机:Ubuntu 14.04.4 LTS 32位 LFS内核:Linux 4.2.0 好不用容易将LFS引导起来了,但系统启动后,无法配置网口.系统启动时提示:Interface eth0 ...

  8. 随学随记之java的数据类型

    Java中的变量只有两种数据类型:基本数据类型(8种).引用数据类型 定义变量时内存中的状态变化:定义数据类型,开辟空间,存放数据. 8种基本数据类型的变量各占多大的内存空间,变量的取值范围 byte ...

  9. 【转】SSIS 2012 – Package Configurations Menu Option Missing

    原文:http://dataqueen.unlimitedviz.com/2012/01/ssis-2012-package-configurations-menu-option-missing/ I ...

  10. 在Red Hat Enterprise Linux 5 64-bit安装oracle11g r2

    网上这种文档一搜就一堆,没别的目的,刚接触oracle为了加深理解记忆.只要是跟我的版本一样操作系统和oracle软件,按照步骤肯定可以成功安装 在虚拟机上安装Red Hat Enterprise L ...