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 ...
随机推荐
- 【转】android camera(一)：camera模组CMM介绍
关键词:android camera CMM 模组 camera参数平台信息:内核:linux系统:android 平台:S5PV310(samsung exynos 4210) 作者:xubin ...
- poj 2723 Get Luffy Out（2-sat）
Description Ratish is a young man who always dreams of being a hero. One day his friend Luffy was ca ...
- #include<string.h>
#include<string.h> 1 strcpy #include <string.h> char *strcpy(char *str1, const char *str ...
- JsonKit 解析
- (void)requestMapListData { NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"&qu ...
- 检查ORACLE的警告文件的脚本
检查两天内的须要重视的信息: vi alter_error.sh echo "Check Alter Error:" cat $TRACE/alert_$ORACLE_SID. ...
- mysql sql limit where having order
SQL语句执行顺序及MySQL中limit的用法 . 分类: MySql2013-09-02 09:1315人阅读评论(0)收藏举报 写的顺序:select ... from... where.... ...
- c保存lua函数
使用下面方式可保存lua任何值,目前只实现fucntion的保存,且无参数.如果需要实现参数,可自己扩展: 可实现下面方式: CFun( lua_fun ) -- okCFun( function() ...
- 那些 Cynthia 教我的事 之 PMSec (二)
一.在Foreach之前要判断是否为空. 常常从数据库里取出来表就直接用了,很少记得判断是否有值.不严谨的说. 专业人员写的是酱滴... DataLayer.PMSecDataSet.PMSECReq ...
- C#钩子应用实例
C#钩子应用实例一.写在最前 本文的内容只想以最通俗的语言说明钩子的使用方法,具体到钩子的详细介绍可以参照下面的网址: http://www.microsoft.com/china/community ...
- 2015.4.10-SQL 高级查询(二)
1.TOP字句: 用于规定要返回的记录的数目 select top number(个数)/percent(百分数) 列名 from 表名 2.like模糊查询,用于where字句中,以及通配符 ...