js中div循环转动的动画代码

最新推荐文章于 2023-05-30 18:14:09 发布
最新推荐文章于 2023-05-30 18:14:09 发布
阅读量4.8k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csharp_wuxin/article/details/52490756
版权 
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #diva{
            width: 100%;
            height: 50px;
            position: absolute;
            background: blue;
        }
        #divb{
            width: 100%;
            position: absolute;
            height: 50px;
            background: pink;
        }
        #divc{
            width: 100%;
            position: absolute;
            height: 50px;
            background: yellow;
        }
    </style>
</head>
    <body>
    <div id="diva"></div>
    <div id="divb"></div>
    <div id="divc"></div>

    </body>
    <script src="js.js"></script>
    <script src="tweenEvent.js"></script>
    <script>
        var diva=document.getElementById("diva");
        var divb=document.getElementById("divb");
        var divc=document.getElementById("divc");
        var bWidth=utils.win("clientWidth");
        //css这个方法可以访问属性，也可以设置属性，当第二个参数直接是属性的时候就是访问属性
        //当第二个参数是键值对的时候，就是改变属性；
        utils.css(diva,{"width":bWidth});
        utils.css(divb,{"width":bWidth});
        utils.css(divc,{"width":bWidth});
        utils.css(diva,{left:0});
        utils.css(divb,{left:-bWidth});
        utils.css(divc,{left:-2*bWidth});
        setInterval(function(){
            diva.style.left=diva.offsetLeft+2+"px";
            if(diva.offsetLeft==bWidth){
                diva.style.left=-2*bWidth+"px";
            }
            divb.style.left=divb.offsetLeft+2+"px";
            if(divb.offsetLeft==bWidth){
                divb.style.left=-2*bWidth+"px";
            }
            divc.style.left=divc.offsetLeft+2+"px";
            if(divc.offsetLeft==bWidth){
                divc.style.left=-2*bWidth+"px";
            }
        },30)
    </script>
csharp_wuxin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+js如何实现旋转动画
Missxu1895的博客
05-18 200
我是分为两种方式进行旋转动画显示的，一种是原生js一种是vue+js。 主要的效果如下图显示： 当点击具体的某一块的时候，该元素会旋转到圆盘最前面的中间位置显示，同时要有透视效果，就是远小近大（远处的盒子最小，近处的盒子最大。透明度同理。）第一种方法纯原生，代码如下：（根据代码给出解释） 这种首先给出了一个元素运动的运动轨迹以及动画。主要是既改变自身元素的旋转也改变背景圆盘的旋转。主要是用css完成。 第二种方法是用vue+js 用js代码去控制多个小球的时候运动轨迹
html无缝循环滚动代码,js实现循环无缝滚动
weixin_39900608的博客
06-09 580
原理一(scrollDiv滚动，浮动改变left值)大的div(bigDiv)包含一个滚动的div(scrollDiv)，这个scroll宽度必须大于bigDiv。当scroll滚动完之后不能显示空白，所以要创建一个同样的scroll放到原来的scroll后面，并把原来的scroll的left值变为0；实现无缝滚动；原理二(bigDiv滚动其scrollLeft++，使其滚动)让在外面的bigDi...
js动画旋转
qq_59861678的博客
02-28 861
动画旋转，在定时器的催动下五秒后停止旋转
JS实现div内部的文字或图片自动循环滚动
wh531030320的专栏
09-14 3044
style type="text/css"> .content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden} dl{width:400px;height:30px;border:1px solid black;}
javascript早期动画循环(一)
人生代码 ---- 公众号
05-05 1269
在JavaScript中创建动画的典型方式，就是使用setInterval()方法来控制所有的动画，以下是一个使用setInterval()的基本动画循环。 (function(){ function aa() { doSome(); doOther(); } setInterval(aa, 100); })(); <!DOCTYPE html> <html la...
js 图片水平循环转动
宋有诚的专栏
07-06 1179
window.onload=function(){           var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);           setInterval(function(){r
jQuery圆形转动切换文字公告代码.zip
07-11
这些公告通常会作为子元素被包含在一个循环布局中，例如使用`<div>`元素并设置适当的CSS样式以形成圆形排列。 2. CSS样式：CSS将定义元素的布局、颜色、边框和动画效果。圆形布局可能通过设置`border-radius`为50%...
CSS3台式风扇旋转动画代码
05-01
这里的`animation`属性设置了动画的多个参数：`fan-rotate`是动画名称，`2s`表示动画持续2秒，`linear`是速度曲线，表示动画速度均匀不变，`infinite`则表示动画无限循环。 为了增加风扇的立体感，我们可以使用伪...
CSS3简单花环动画代码
05-01
在花环动画中，我们可以定义花环的颜色、大小、位置等属性随时间改变，从而形成动态效果。 ```css @keyframes flower-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` ...
CSS3简单花环动画代码.zip
07-03
总结来说，"CSS3简单花环动画代码"通过CSS3的@keyframes、transform、animation等特性，实现了绿色花环的动态转动效果。这个案例展示了CSS3在网页动画设计中的强大能力，不仅可以创造出丰富的视觉效果，还能提高用户...
js通过循环多张图片实现动画效果
10-15
主要为大家详细介绍了js通过循环多张图片实现动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯CSS3风扇旋转动画特效
07-24
`animation`属性将这个动画应用到`.fan`类的元素上，2秒的时长表示动画完整执行一次的时间，`linear`表示速度在整个动画过程中保持一致，`infinite`表示动画无限次循环。 为了增加动画的真实感，我们可以考虑添加更...
用js实现一个无限循环的动画
csD_Dscnnnnnnn的博客
03-27 1205
用js实现一个无限循环的动画
原生js实现3D旋转效果
庚中
11-08 9707
实现效果: 实现过程: 步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建). &amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;amp;amp;quot
简单JS之旋转--记录一下平常会用到的简单功能，封装成函数方便以后使用
m0_48889470的博客
06-05 1095
function rotate(obj,direction,speed){//对象，方向，速度， var rotateVal=0 var dir=direction!==undefined?direction:true var spe=speed||0.1 this.run=()=>{ this.timer = setInterval(function() { rotateVal += 1; obj.style.transform = 'rotat.
利用js实现按钮控制图片旋转
Tenderness104的博客
04-29 2727
function xuanzhuan() { var len = 90; var lens = $("#DataList1_ctl00_Image1").attr("lens"); lens=parseInt(lens) var n = 90 * lens; ...
js css 实现环形布局 - 永久动画旋转
最新发布
05-30 725
【代码】js css 实现环形布局 - 永久动画旋转。
js控制div旋转
tao__f的博客
09-06 4155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>每点击一下，旋转90°</title> <style> #box{ width: 150px; height: 120px; background: red; transition: all 3s ease; } </style> &l
js创建div并在div中循环创建div
04-29
可以使用以下代码来创建一个父级div，并在其中循环创建子级div： ```javascript // 创建一个父级div const parentDiv = document.createElement('div'); // 循环创建子级div for (let i = 0; i ; i++) { const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值