问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用js把一张图片由右向左展开？

头像
谁的代码谁心疼
    17410

    如穷游网https://www.qyer.com/的头部焦...，自动播放模式是图片由右向左展开，先显示图片右边的内容。
    图片描述图片描述
    自己做了尝试，样式是right:0 然后改变width直到恢复大小，但是视觉效果仍然是先展示图片左边的内容。
    是css3的什么新特性或者是什么其他写法么，希望有大神不吝赐教。谢谢

    javascriptcsshtmlhtml5
    阅读 5.3k
    4 个回答
    得票最新
    头像
    pangyutong
      18515
      ✓ 已被采纳

      clipboard.png
      看了一下穷游的轮播以下几点
      第一：轮播时候，资源已经加载完毕，width：0
      第二：div样式改变了一个类名 img改了一次类名

      clipboard.png

      请开始YY

      首先：加载出来，布局不用说吧？
      next：width：0 然后给width做缓动 这个就是长的动作
      next：你的疑惑就在于从那边长出来 是吧？然后你想，如果是翻过去的都float在left，没翻过去的都float在right，那从那边长出来呢？

      图中
      clipboard.png

      clipboard.png

      just do it！！ 少年！

      头像
      sunnymask
        795

        图片描述

        头像
        谁的代码谁心疼
          17410

          自己写了一个小demo给大家看看效果上的区别，gif图 第二张图片呈现的形式是对的。图片描述

          头像
          沈小白
            24211324

            从右开始倒是实现了，但是想不通怎么让上一张图片在滚动的同时还存在，(看看怎么解决)

            <!DOCTYPE html>
<html lang="zh-CN">
<div>

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style>
            *{
                   margin: 0;
                   padding: 0;
               }
               ul,li{
                   list-style-type: none;
               }
               ul{
                   width:100%;
                   height:400px;
                   overflow: hidden;
                   position: relative;
               }
               li{
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                overflow: hidden;
               }
               img{
                   width: 100%;
                   height: 100%;
               }
            li div{
                opacity: 0;
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);

            }
            li .fadeInRight {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                transition: 2s ease-in-out;
                z-index: 3;
            }
    
        </style>
    </head>

    <body>
        <ul class="lunBoBox">
            <li>
                <div><img src="https://pic.qyer.com/public/home/focus/2019/02/22/15508149786321?imageMogr2/interlace/1|imageslim" alt=""></div>
            </li>
            <li>
                <div><img src="https://pic.qyer.com/public/home/focus/2019/02/25/15510649585571?imageMogr2/interlace/1|imageslim" alt=""></div>
            </li>
            <li>
                <div><img src="https://pic.qyer.com/public/home/focus/2019/02/22/15508146653008?imageMogr2/interlace/1|imageslim" alt=""></div>
            </li>
            
        </ul>
    </body>
</div>

</html>
<script type="text/javascript">
;
$(function() {
    var li = $(".lunBoBox li")
    var aa = 0;
    var liWidth = $(".lunBoBox li").width()
    var timer = setInterval(function() {
        aa++;
        if (aa >= li.length) {
            aa = 0;
        }
        move()
    }, 3000)

    function move() {
        $(".lunBoBox li").find('div').removeClass('fadeInRight')
        $(".lunBoBox li").eq(aa).find('div').addClass('fadeInRight')
    }

})
</script>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题