如何在其他图像中制作图像滚动效果？

Question

我想做类似这样的东西，像这样在滚动效果中推广我的网站page

我发现电脑里的图片只是一张图片：

并且在里面滚动的网站也是图像：

所以我的问题是，如何让其他图像在该计算机 PC 内滚动，就像在我提供的原始站点上一样，也许是一些 JS？

这与 solution 我发现的相似：

HTML:

<ul id="scroller">
<li><img src="https://i.stack.imgur.com/lPcRz.jpg" width="400" 
height="1000"></li>
</ul>

JS:

    (function($) {
        $(function() { //on DOM ready
            $("#scroller").simplyScroll({
                customClass: 'vert',
                orientation: 'vertical',
                auto: true,
                manualMode: 'end',
                frameRate: 8,
                speed: 3
            });
        });
    })(jQuery);

和CSS：

/* Container DIV */
    .simply-scroll {
        width: 400px;
        height: 1000px;
        margin-bottom: 1em;
    }

但是如何在PC镜像中制作这个镜像，并上下移动？

Answer 1

这就是您所需要的。

.computer-empty {
    overflow: hidden;
    position: relative;
    width: 540px;
}
.computer-screen {
    overflow: hidden;
    position: absolute;
    height: 247px;
    width: 445px;
    left: 50px;
    top: 20px;
}
.screen-landing {
    left: 0;
    line-height: 0;
    position: absolute;
    width: 100%;
    transition: all 6s;
    -o-transition: all 6s;
    -ms-transition: all 6s;
    -moz-transition: all 6s;
    -webkit-transition: all 6s;
}
.screen-landing:hover {
    cursor: pointer;
    margin-top: -1036px;
}
img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.computer-empty img.computer {
    width: 100%;
}

<div class="text-align-center computer-empty">
                
                <a target="_blank" href="http://irontemplates.com/demos/redirect.php?theme=The%20Rise" class="">
                <div class="computer-screen">
                    <div class="screen-landing">
                        <img src="http://fwrd.irontemplates.com/home/img/the_rise.jpg" alt="demo - the rise">
                    </div>
                </div>
                <img class="computer" src="http://fwrd.irontemplates.com/home/img/computer.jpg" alt="computer">
                </a>
                <h1>The Rise</h1>
            </div>

Answer 2

这可能不是最好的解决方案，但我现在能想到的唯一解决方案：

1) 可以对电脑图片进行编辑，截屏透明

2) 制作 2 divs，一个在另一个里面。

3) 首先，大一点的会放一张电脑的照片。

4) 第二个将完全填充计算机图片中的空白 space，屏幕所在的位置。

5) 确保在样式表中为内部 div 添加 overflow: scroll;。

它看起来像：

HTMl:

<div>
    <img src="path to your picture of computer">
    <div class="img-box">
        <img src="path to your picture of inside screen">
    </div>
</div>

CSS:

.img-box{
        width: ???;
        height: ???;
        overflow: scroll;
    }

现在我知道这个解决方案很难做出响应，但这是我现在唯一能想到的。

如何在其他图像中制作图像滚动效果？

How to make image scrolling effect inside other image?

html

javascript

css

jquery

scrollview