前端必备技能：图片点击放大，左右滑动，点击关闭；

端程序员都逃不过的一个功能，图片点击放大还可以左右滑动，再次点击图片关闭方法图片；

这个功能太常见了，头条，微信，微博都有此功能；这次写的跟微博挺像的，微博的图片小图展示的时候窄的一边百分百展示，宽的一边溢出隐藏，还是要居中；放大以后宽的一边百分比展示，窄的一边等比例缩放；放大以后可以左右滑动，还有回弹效果；话不多说上代码；

引入的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窗口打开时显示大广告图片和自动关闭

您的项目需求