js实现车轮的来回滚动
最近喜欢用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实现车轮的来回滚动的更多相关文章
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）
闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...
- 【js】我们需要无限滚动列表吗？
无限滚动列表,顾名思义,是能够无限滚动的列表(愿意是指那些能够不断缓冲加载新数据的列表的).但是,我们真的需要这样一个列表吗?在PC端,浏览器的性能其实已经能够满足海量dom节点的渲染刷新(笔者经过简 ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- ios Label TextFile 文本来回滚动 包括好用的三方
通常显示不够了,比如八个字.只能显示6个字 .产品要求 来回滚动 下面有两种 方法 : 一种UIScrollView 一种 View动画 如果不能满足你 请点击这个 https://github ...
随机推荐
- HBase 5、Phoenix使用
1.建表 执行建表语句 $ . ../examples/stock_symbol.sql 其中../examples/stock_symbol.sql是建表的sql语句 CREATE TABLE IF ...
- 第一个Spring MVC程序
最近公司项目要开始使用Spring MVC替代Struts2了,就学习了一下Spring MVC的使用.这是第一个Spring mvc程序,分别使用xml和注解两种方式. 一.使用xml格式进行构建 ...
- Visual Studio® 2010 Web Deployment Projects站点编译生成bin同时发表插件
VS2010环境下: 1.Visual Studio® 2010 Web Deployment Projects下载地址: http://www.microsoft.com/downlo ...
- CSS清除浮动_清除float浮动
2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...
- ubuntu14.04下arm-linux-gcc 4.5.1的安装与配置
使用的是友善之臂mini6410自带光盘中的. 1.对新版本arm-linux-gcc-5.4.1进行解压(注意,下面的C是大写的) tar zxvf arm-linux-gcc-4.5.1-v6-v ...
- 深入char、varchar、text和nchar、nvarchar、ntext的区别详解
很多开发者进行数据库设计的时候往往并没有太多的考虑char, varchar类型,有的是根本就没注意,因为存储价格变得越来越便宜了,忘记了最开始的一些基本设计理论和原则,这点让我想到了现在的年轻人,大 ...
- C#入门中的必备语法（一）
首先我们要知道C#语言是一种面向对象的语言由C和C++演变而来,它依赖于.NET Framework..NET Framework可以提供一个强大的代码库供其调用.之所以说C#语言依赖于.NET Fr ...
- C - The Hardest Problem Ever
Description Julius Caesar lived in a time of danger and intrigue. The hardest situation Caesar ever ...
- visual studio无法输入密匙解决方法
控制面板->程序和功能->修复/卸载(更改),当到输入密匙界面运行程序,即可出现密匙输入框. 所用程序网上搜索:CrackVS2008ForWindows7
- crontab指令详解
引用:http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/06/3002602.html 具体指令请参考文章:linux指令. 详细版推荐原 ...