dede图片缩放至幻灯大小_创建照片幻灯片（缩放）效果

最新推荐文章于 2024-08-09 21:30:00 发布

cukeoumuqian0413

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量190

点赞数

文章标签： js javascript css html vue ViewUI

原文链接：https://www.script-tutorials.com/photo-inspiration-effect/

版权

dede图片缩放至幻灯大小

Photo inspiration (zoom fading) effect Today we continue JavaScript examples, and our article will about using javascript in modeling of nice fading and zoom effects for set of images. As we using pure javascript, our result will quite crossbrowser. I prepared 2 modes of switching (you can switch it using added button)

照片灵感(缩放淡入淡出)效果今天，我们继续使用JavaScript示例，并且我们的文章将介绍如何使用javascript对一组图像进行漂亮的淡入淡出和缩放效果建模。当我们使用纯JavaScript时，我们的结果将是相当跨浏览器的。我准备了2种切换模式(您可以使用添加的按钮进行切换)

Here are sample and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样，我们从HTML开始。

This is our main page code with all samples.

这是我们所有示例的主页代码。

index.html (index.html)


<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/script.js"></script>
<div class="example">
    <h3><a href="#">Photo inspiration (zoom fading) example</a> <button id="mode" style="float:right">Change mode</button></h3>
    <div id="panel"></div>
    <div id="imgsource" style="display:none;">
        <img src="data_images/pic1.jpg" />
        <img src="data_images/pic2.jpg" />
        <img src="data_images/pic3.jpg" />
        <img src="data_images/pic4.jpg" />
        <img src="data_images/pic5.jpg" />
        <img src="data_images/pic6.jpg" />
        <img src="data_images/pic7.jpg" />
        <img src="data_images/pic8.jpg" />
        <img src="data_images/pic9.jpg" />
        <img src="data_images/pic10.jpg" />
    </div>
</div>


<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/script.js"></script>
<div class="example">
    <h3><a href="#">Photo inspiration (zoom fading) example</a> <button id="mode" style="float:right">Change mode</button></h3>
    <div id="panel"></div>
    <div id="imgsource" style="display:none;">
        <img src="data_images/pic1.jpg" />
        <img src="data_images/pic2.jpg" />
        <img src="data_images/pic3.jpg" />
        <img src="data_images/pic4.jpg" />
        <img src="data_images/pic5.jpg" />
        <img src="data_images/pic6.jpg" />
        <img src="data_images/pic7.jpg" />
        <img src="data_images/pic8.jpg" />
        <img src="data_images/pic9.jpg" />
        <img src="data_images/pic10.jpg" />
    </div>
</div>

We prepared and hide our set of using images. Plus prepared panel area for drawing.

我们准备并隐藏了我们的一组使用图像。加上准备用于绘图的面板区域。

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / main.css (css/main.css)


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:770px;height:565px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#panel {
    position:relative;
    width: 768px;
    height: 512px;
    overflow: hidden;
}
#panel img {
    position: absolute;
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: optimizeSpeed;
}


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:770px;height:565px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#panel {
    position:relative;
    width: 768px;
    height: 512px;
    overflow: hidden;
}
#panel img {
    position: absolute;
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: optimizeSpeed;
}

步骤3. JS (Step 3. JS)

Here are our main control JS file.

这是我们的主要控制JS文件。

js / main.js (js/main.js)


var insp = {
    iTimeInterval : 50,
    iMaxZoom : 100, // max zoom
    bHZoom : true, // horizontal zoom
    bVZoom : true, // vertical zoom
    iMode : 1, // mode (1 or 2)
    iZStep : 0,
    iImgStep : 1,
    oPan : null,
    iPanWidth : 0,
    iPanHeight : 0,
    oImgBefore: null,
    oImgAfter: null,
    oImgSource : null,
    // main initialization function
    init : function(iMode) {
        this.iMode = iMode;
        this.oImgSource = document.getElementById('imgsource').children;
        this.oPan = document.getElementById('panel');
        this.iPanWidth = this.oPan.offsetWidth;
        this.iPanHeight = this.oPan.offsetHeight;
        // initial properties of first img element
        this.oImgBefore = document.createElement('img');
        this.oImgBefore.src = this.oImgSource[0].src;
        this.oImgBefore.style.top = (this.bVZoom ? -this.iMaxZoom : 0) + 'px';
        this.oImgBefore.style.left = (this.bHZoom ? -this.iMaxZoom : 0) + 'px';
        this.oImgBefore.style.width = (this.bHZoom ? this.iPanWidth + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
        this.oImgBefore.style.height = (this.bVZoom ? this.iPanHeight + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
        this.oImgBefore.style.filter = 'alpha(opacity=1)';
        this.oImgBefore.style.opacity = 1;
        this.oPan.appendChild(this.oImgBefore);
        // initial properties of second img element
        this.oImgAfter = document.createElement('img');
        this.oImgAfter.src = this.oImgSource[1].src;
        this.oImgAfter.style.top = '0px';
        this.oImgAfter.style.left = '0px';
        this.oImgAfter.style.width = this.iPanWidth + 'px';
        this.oImgAfter.style.height = this.iPanHeight + 'px';
        this.oImgAfter.style.filter = 'alpha(opacity=0)';
        this.oImgAfter.style.opacity = 0;
        this.oPan.appendChild(this.oImgAfter);
        setInterval(insp.run, this.iTimeInterval);
    },
    // change mode function
    changemode : function(){
        this.iMode = (this.iMode == 2) ? 1 : 2;
    },
    // main loop drawing function
    run : function(){
        if (insp.iMaxZoom > insp.iZStep++) {
            if (insp.bHZoom) {
                insp.oImgBefore.style.left = (parseInt(insp.oImgBefore.style.left) - 1) + 'px';
                insp.oImgBefore.style.width = (parseInt(insp.oImgBefore.style.width) + 2) + 'px';
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.left = (parseInt(insp.oImgAfter.style.left) - 1) + 'px';
                    insp.oImgAfter.style.width = (parseInt(insp.oImgAfter.style.width) + 2) + 'px';
                }
            }
            if (insp.bVZoom) {
                insp.oImgBefore.style.top = (parseInt(insp.oImgBefore.style.top) - 1) + 'px';
                insp.oImgBefore.style.height = (parseInt(insp.oImgBefore.style.height) + 2) + 'px';
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.top = (parseInt(insp.oImgAfter.style.top) - 1) + 'px';
                    insp.oImgAfter.style.height = (parseInt(insp.oImgAfter.style.height) + 2) + 'px';
                }
            }
            if (insp.oImgAfter.filters)
                insp.oImgAfter.filters.item(0).opacity = Math.round(insp.iZStep / insp.iMaxZoom * 100);
            else
                insp.oImgAfter.style.opacity = insp.iZStep / insp.iMaxZoom;
        } else {
            insp.iZStep = 0;
            if (insp.bHZoom) {
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.left = '0px';
                    insp.oImgAfter.style.width = insp.iPanWidth + 'px';
                }
                insp.oImgBefore.style.left = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
                insp.oImgBefore.style.width = (insp.iMode == 2 ? (insp.iPanWidth + (2 * insp.iMaxZoom)) : insp.iPanWidth) + 'px';
            }
            if (insp.bVZoom) {
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.top = '0px';
                    insp.oImgAfter.style.height = insp.iPanHeight + 'px';
                }
                insp.oImgBefore.style.top = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
                insp.oImgBefore.style.height = (insp.iMode == 2 ? (insp.iPanHeight + (2 * insp.iMaxZoom)) : insp.iPanHeight) + 'px';
            }
            if (insp.oImgAfter.filters)
                insp.oImgAfter.filters.item(0).opacity = 0;
            else
                insp.oImgAfter.style.opacity = 0;
            insp.oImgBefore.src = insp.oImgAfter.src;
            insp.oImgAfter.src = insp.oImgSource[++insp.iImgStep % insp.oImgSource.length].src;
        }
    }
}
// page onload
onload = function() {
    insp.init(); // perform initialization
    document.getElementById('mode').onclick = function(){ // onclick handling
        insp.changemode();
    }
}


var insp = {
    iTimeInterval : 50,
    iMaxZoom : 100, // max zoom
    bHZoom : true, // horizontal zoom
    bVZoom : true, // vertical zoom
    iMode : 1, // mode (1 or 2)
    iZStep : 0,
    iImgStep : 1,
    oPan : null,
    iPanWidth : 0,
    iPanHeight : 0,
    oImgBefore: null,
    oImgAfter: null,
    oImgSource : null,
    // main initialization function
    init : function(iMode) {
        this.iMode = iMode;
        this.oImgSource = document.getElementById('imgsource').children;
        this.oPan = document.getElementById('panel');
        this.iPanWidth = this.oPan.offsetWidth;
        this.iPanHeight = this.oPan.offsetHeight;
        // initial properties of first img element
        this.oImgBefore = document.createElement('img');
        this.oImgBefore.src = this.oImgSource[0].src;
        this.oImgBefore.style.top = (this.bVZoom ? -this.iMaxZoom : 0) + 'px';
        this.oImgBefore.style.left = (this.bHZoom ? -this.iMaxZoom : 0) + 'px';
        this.oImgBefore.style.width = (this.bHZoom ? this.iPanWidth + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
        this.oImgBefore.style.height = (this.bVZoom ? this.iPanHeight + (2 * this.iMaxZoom) : this.iPanWidth) + 'px';
        this.oImgBefore.style.filter = 'alpha(opacity=1)';
        this.oImgBefore.style.opacity = 1;
        this.oPan.appendChild(this.oImgBefore);
        // initial properties of second img element
        this.oImgAfter = document.createElement('img');
        this.oImgAfter.src = this.oImgSource[1].src;
        this.oImgAfter.style.top = '0px';
        this.oImgAfter.style.left = '0px';
        this.oImgAfter.style.width = this.iPanWidth + 'px';
        this.oImgAfter.style.height = this.iPanHeight + 'px';
        this.oImgAfter.style.filter = 'alpha(opacity=0)';
        this.oImgAfter.style.opacity = 0;
        this.oPan.appendChild(this.oImgAfter);
        setInterval(insp.run, this.iTimeInterval);
    },
    // change mode function
    changemode : function(){
        this.iMode = (this.iMode == 2) ? 1 : 2;
    },
    // main loop drawing function
    run : function(){
        if (insp.iMaxZoom > insp.iZStep++) {
            if (insp.bHZoom) {
                insp.oImgBefore.style.left = (parseInt(insp.oImgBefore.style.left) - 1) + 'px';
                insp.oImgBefore.style.width = (parseInt(insp.oImgBefore.style.width) + 2) + 'px';
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.left = (parseInt(insp.oImgAfter.style.left) - 1) + 'px';
                    insp.oImgAfter.style.width = (parseInt(insp.oImgAfter.style.width) + 2) + 'px';
                }
            }
            if (insp.bVZoom) {
                insp.oImgBefore.style.top = (parseInt(insp.oImgBefore.style.top) - 1) + 'px';
                insp.oImgBefore.style.height = (parseInt(insp.oImgBefore.style.height) + 2) + 'px';
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.top = (parseInt(insp.oImgAfter.style.top) - 1) + 'px';
                    insp.oImgAfter.style.height = (parseInt(insp.oImgAfter.style.height) + 2) + 'px';
                }
            }
            if (insp.oImgAfter.filters)
                insp.oImgAfter.filters.item(0).opacity = Math.round(insp.iZStep / insp.iMaxZoom * 100);
            else
                insp.oImgAfter.style.opacity = insp.iZStep / insp.iMaxZoom;
        } else {
            insp.iZStep = 0;
            if (insp.bHZoom) {
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.left = '0px';
                    insp.oImgAfter.style.width = insp.iPanWidth + 'px';
                }
                insp.oImgBefore.style.left = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
                insp.oImgBefore.style.width = (insp.iMode == 2 ? (insp.iPanWidth + (2 * insp.iMaxZoom)) : insp.iPanWidth) + 'px';
            }
            if (insp.bVZoom) {
                if (insp.iMode == 2) {
                    insp.oImgAfter.style.top = '0px';
                    insp.oImgAfter.style.height = insp.iPanHeight + 'px';
                }
                insp.oImgBefore.style.top = (insp.iMode == 2 ? - insp.iMaxZoom : 0) + 'px';
                insp.oImgBefore.style.height = (insp.iMode == 2 ? (insp.iPanHeight + (2 * insp.iMaxZoom)) : insp.iPanHeight) + 'px';
            }
            if (insp.oImgAfter.filters)
                insp.oImgAfter.filters.item(0).opacity = 0;
            else
                insp.oImgAfter.style.opacity = 0;
            insp.oImgBefore.src = insp.oImgAfter.src;
            insp.oImgAfter.src = insp.oImgSource[++insp.iImgStep % insp.oImgSource.length].src;
        }
    }
}
// page onload
onload = function() {
    insp.init(); // perform initialization
    document.getElementById('mode').onclick = function(){ // onclick handling
        insp.changemode();
    }
}

Hope this code is pretty easy. During time we just enlarging images, changing its opacity. All necessary variables collected in top of object. Welcome to experiment!

希望这段代码很简单。在一段时间内，我们只是放大图像，更改其不透明度。所有必需的变量都收集在对象顶部。欢迎实验！

现场演示

结论 (Conclusion)

Hope that you was happy to play with our javascript lessons. I hope that fading switching photos looks fine :) If is you were wondering – do not forget to thank. Will glad to listen your interesting comments. Good luck!

希望您很高兴玩我们JavaScript课程。我希望褪色的切换照片看起来不错：)如果您想知道–不要忘了感谢。很高兴听听您的有趣评论。祝好运！

翻译自: https://www.script-tutorials.com/photo-inspiration-effect/

dede图片缩放至幻灯大小

cukeoumuqian0413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dede图片缩放至幻灯大小_创建照片幻灯片（缩放）效果

dede图片缩放至幻灯大小Photo inspiration (zoom fading) effect Today we continue JavaScript examples, and our article will about using javascript in modeling of nice fading and zoom effects for set of images. As...
复制链接

扫一扫