前端必備技能：圖片點擊放大，左右滑動，點擊關閉；

端程序員都逃不過的一個功能，圖片點擊放大還可以左右滑動，再次點擊圖片關閉方法圖片；

這個功能太常見了，頭條，微信，微博都有此功能；這次寫的跟微博挺像的，微博的圖片小圖展示的時候窄的一邊百分百展示，寬的一邊溢出隱藏，還是要居中；放大以后寬的一邊百分比展示，窄的一邊等比例縮放；放大以后可以左右滑動，還有回彈效果；話不多說上代碼；

引入的js有jquery.js，vue.js 用的2.5.2版本，還有rem.js自己寫的，rem.js代碼我會放到后邊有需要的朋友可以拿走；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>touch</title>
    <style>
        html,body,p,div,span,img{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .imagesLise{
            display: flex;
            flex-wrap: wrap;
        }
        .imagesLise>p{
            margin-top: 0.33rem;
            margin-left: 0.33rem;
            width: 2rem;
            height: 2rem;
            background-size: cover !important;
        }
        .maxImagesBox{
            position: fixed;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            background-color: #000000;
        }
        .maxImagesLise{
            height: 100%;
            display: flex;
        }
        .maxImagesLise>p{
            display: inline-block;
            width: 7.5rem;
            height: 100%;
            background-size: contain !important;
        }
    </style>
</head>
<body>
    <div id="app" >
        <div class="imagesLise">
            <p @click="touch(1,index)" v-for="(item,index) in imagseList" :style="{background: 'url(' + item + ') no-repeat center' }"></p>
        </div>
        <div class="maxImagesBox" @touchmove.prevent v-show="imagesBox">
            <div id="maxImagesLise" class="maxImagesLise" :style="{width: imagseList.length*100 + '%', 'transition-duration': time+'ms'}">
                <p @click.stop="touch(0)" v-for="(item,index) in imagseList" :style="{background: 'url(' + item + ') no-repeat center' }"></p>
            </div>
        </div>
    </div>
<script src="js/vue.js"></script>
<script src="js/rem.js"></script>
<script src="js/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data(){
            return {
                imagseList:[
                    './images/img_0.jpg',
                    './images/img_1.jpg',
                    './images/img_2.jpg',
                    './images/img_3.jpg',
                    './images/img_4.jpg',
                    './images/img_5.jpg',
                    './images/img_6.jpg',
                ],
                time:0,
                imagesBox:false,

            }
        },
        mounted(){

        },
        methods:{
            touch(n,index){
                var that = this;
                if (!n){
                    that.imagesBox = false;
                    return;
                }
                that.imagesBox = true;
                setTimeout(function () {//使用延遲是因為ios系統執行速度太快，數據渲染速度有點跟不上，容易引起bug所以用了延遲執行；
                    var imgBox = document.getElementById("maxImagesLise");
                    var x,xx,n = 0-index*7.5;
                    imgBox.style.transform = "translate3d(" + n + "rem,0rem,0rem)";
                    imgBox.addEventListener("touchstart",function (e) {
                        x = e.touches[0].pageX;
                    });
                    imgBox.addEventListener("touchmove",function (e) {
                        e.preventDefault();
                        xx = n + (e.touches[0].pageX-x)/100*2;
                        if (xx>0){
                            xx = 0;
                        }
                        if (xx<(that.imagseList.length-1)*-7.5){
                            xx = (that.imagseList.length-1)*-7.5;
                        }
                        imgBox.style.transform = "translate3d(" + xx + "rem,0rem,0rem)";
                    });
                    imgBox.addEventListener("touchend",function (e) {
                        xx = Math.round(xx / -7.5) * -7.5;
                        that.time = 300;
                        imgBox.style.transform = "translate3d(" + xx + "rem,0rem,0rem)";
                        n = xx;
                        setTimeout(function () {
                            that.time = 0;
                        },300)
                    })
                },10)
            },
        }
    })
</script>
</body>
</html>

rem.js代碼

(function(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 設置好后才能執行 refreshRem，不然 refreshRem 會執行2次；
    refreshRem();
    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止執行兩次
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 瀏覽器后退的時候重新計算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

這次因為時間原因基本就沒有寫注釋，如果有不明白的地方可以留言百度；

注意：此功能適用于移動端，如果是pc端這個可以用作參考；基本原理不變；

ello，大家好，今天講一個js的廣告圖片下落的js的demo

javascript窗口打開時顯示大廣告圖片和自動關閉

上效果圖，當你打開一個網頁時會有廣告下落，那么我們怎么寫js呢？效果圖：

先寫html代碼：

再寫javascript代碼：

好了，今天的js分享結束了，記得關注暖夕H2

段JavaScript腳本程序, 負責關閉窗口, 如果網頁不是通過腳本程序打開的(window.open()), 調用window.close()腳本關閉窗口前, 必須先將window.opener對象置為null,

否則瀏覽器(IE7、IE8)會彈出一個確定關閉的對話框。

解決方案有以下幾種方法：

1.指向自己關閉法

＜script language="javaScript"＞
function closeWindow()
{
window.opener = null;
window.open(' ', '_self', ' ');
window.close();
}
＜/script＞
＜input type='button' value='關閉窗口' onClick="closeWindow()"＞

2.框架top關閉法

＜script language="javaScript"＞
function closeWindow()
{
window.opener = null;
window.open('', '_top', '');
window.parent.close();
}
＜/script＞
＜input type='button' value='關閉窗口' onClick="closeWindow()"＞

3.另外還有一種網上常用的方法, 不過似乎對IE8不起作用但在IE6上是中簡單的直接關閉的方法

在線咨詢

上一篇：CSS樣式優先級怎樣劃分？CSS優先級規則
下一篇：知識分享：域名的綁定與解析設置

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端必備技能：圖片點擊放大，左右滑動，點擊關閉；

javascript窗口打開時顯示大廣告圖片和自動關閉

您的項目需求