点击图片放大

最新推荐文章于 2024-06-29 13:53:58 发布
最新推荐文章于 2024-06-29 13:53:58 发布
阅读量525 收藏
点赞数
分类专栏： 前端 文章标签： 图片放大
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42982865/article/details/84570996
版权 
插件   zoomerang.js
/*
 * zoomerang.js - http://yyx990803.github.io/zoomerang/
 */

(function () {

    // webkit prefix helper
    var prefix = 'WebkitAppearance' in document.documentElement.style ? '-webkit-' : ''

    // regex
    var percentageRE = /^([\d\.]+)%$/

    // elements
    var overlay = document.createElement('div'),
        wrapper = document.createElement('div'),
        target,
        parent,
        placeholder

    // state
    var shown = false,
        lock  = false,
        originalStyles

    // options
    var options = {
        transitionDuration: '.4s',
        transitionTimingFunction: 'cubic-bezier(.4,0,0,1)',
        bgColor: '#fff',
        bgOpacity: 1,
        maxWidth: 300,
        maxHeight: 300,
        onOpen: null,
        onClose: null,
        onBeforeClose: null,
        onBeforeOpen: null
    }

    // compatibility stuff
    var trans = sniffTransition(),
        transitionProp = trans.transition,
        transformProp = trans.transform,
        transformCssProp = transformProp.replace(/(.*)Transform/, '-$1-transform'),
        transEndEvent = trans.transEnd

    setStyle(overlay, {
        position: 'fixed',
        display: 'none',
        zIndex: 99998,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        opacity: 0,
        backgroundColor: options.bgColor,
        cursor: prefix + 'zoom-out',
        transition: 'opacity ' +
            options.transitionDuration + ' ' +
            options.transitionTimingFunction
    })

    setStyle(wrapper, {
        position: 'fixed',
        zIndex: 99999,
        top: '50%',
        left: '50%',
        width: 0,
        height: 0
    })

    // helpers ----------------------------------------------------------------

    function setStyle (el, styles, remember) {
        checkTrans(styles)
        var s = el.style,
            original = {}
        for (var key in styles) {
            if (remember) {
                original[key] = s[key] || ''
            }
            s[key] = styles[key]
        }
        return original
    }

    function sniffTransition () {
        var ret   = {},
            trans = ['webkitTransition', 'transition', 'mozTransition'],
            tform = ['webkitTransform', 'transform', 'mozTransform'],
            end   = {
                'transition'       : 'transitionend',
                'mozTransition'    : 'transitionend',
                'webkitTransition' : 'webkitTransitionEnd'
            }
        trans.some(function (prop) {
            if (overlay.style[prop] !== undefined) {
                ret.transition = prop
                ret.transEnd = end[prop]
                return true
            }
        })
        tform.some(function (prop) {
            if (overlay.style[prop] !== undefined) {
                ret.transform = prop
                return true
            }
        })
        return ret
    }

    function checkTrans (styles) {
        var value
        if (styles.transition) {
            value = styles.transition
            delete styles.transition
            styles[transitionProp] = value
        }
        if (styles.transform) {
            value = styles.transform
            delete styles.transform
            styles[transformProp] = value
        }
    }

    var stylesToCopy = [
        'position', 'display', 'float',
        'top', 'left', 'right', 'bottom',
        'marginBottom', 'marginLeft', 'marginRight',
        'marginTop', 'font', 'lineHeight', 'verticalAlign'
    ]

    function copy (el, box) {
        var styles = getComputedStyle(el),
            ph = document.createElement('div'),
            i = stylesToCopy.length, key
        while (i--) {
            key = stylesToCopy[i]
            ph.style[key] = styles[key]
        }
        setStyle(ph, {
            visibility: 'hidden',
            width: box.width + 'px',
            height: box.height + 'px',
            display: styles.display === 'inline'
                ? 'inline-block'
                : styles.display
        })
        if (options.deepCopy) {
            ph.innerHTML = el.innerHTML
        } else {
            ph.textContent = el.textContent
        }
        return ph
    }

    var api = {

        config: function (opts) {

            if (!opts) return options
            for (var key in opts) {
                options[key] = opts[key]
            }
            setStyle(overlay, {
                backgroundColor: options.bgColor,
                transition: 'opacity ' +
                    options.transitionDuration + ' ' +
                    options.transitionTimingFunction
            })
            return this
        },

        open: function (el, cb) {

            if (shown || lock) return

            target = typeof el === 'string'
                ? document.querySelector(el)
                : el

            // onBeforeOpen event
            if (options.onBeforeOpen) options.onBeforeOpen(target)

            shown = true
            lock = true
            parent = target.parentNode

            var p     = target.getBoundingClientRect(),
                scale = Math.min(options.maxWidth / p.width, options.maxHeight / p.height),
                dx    = p.left - (window.innerWidth - p.width) / 2,
                dy    = p.top - (window.innerHeight - p.height) / 2

            placeholder = copy(target, p)

            originalStyles = setStyle(target, {
                position: 'absolute',
                top: 0,
                left: 0,
                right: '',
                bottom: '',
                whiteSpace: 'nowrap',
                marginTop: -p.height / 2 + 'px',
                marginLeft: -p.width / 2 + 'px',
                cursor: prefix + 'zoom-out',
                transform: 'translate(' + dx + 'px, ' + dy + 'px)',
                transition: ''
            }, true)

            // deal with % width and height
            var wPctMatch = target.style.width.match(percentageRE),
                hPctMatch = target.style.height.match(percentageRE)
            if (wPctMatch || hPctMatch) {
                var wPct = wPctMatch ? +wPctMatch[1] / 100 : 1,
                    hPct = hPctMatch ? +hPctMatch[1] / 100 : 1
                setStyle(wrapper, {
                    width: ~~(p.width / wPct) + 'px',
                    height: ~~(p.height / hPct) + 'px'
                })
            }

            // insert overlay & placeholder
            parent.appendChild(overlay)
            parent.appendChild(wrapper)
            parent.insertBefore(placeholder, target)
            wrapper.appendChild(target)
            overlay.style.display = 'block'

            // force layout
            var force = target.offsetHeight

            // trigger transition
            overlay.style.opacity = options.bgOpacity
            setStyle(target, {
                transition:
                    transformCssProp + ' ' +
                    options.transitionDuration + ' ' +
                    options.transitionTimingFunction,
                transform: 'scale(' + scale + ')'
            })

            target.addEventListener(transEndEvent, function onEnd () {
                target.removeEventListener(transEndEvent, onEnd)
                lock = false
                cb = cb || options.onOpen
                if (cb) cb(target)
            })

            return this
        },

        close: function (cb) {

            if (!shown || lock) return
            lock = true

            // onBeforeClose event
            if (options.onBeforeClose) options.onBeforeClose(target)

            var p  = placeholder.getBoundingClientRect(),
                dx = p.left - (window.innerWidth - p.width) / 2,
                dy = p.top - (window.innerHeight - p.height) / 2

            overlay.style.opacity = 0
            setStyle(target, {
                transform: 'translate(' + dx + 'px, ' + dy + 'px)'
            })

            target.addEventListener(transEndEvent, function onEnd () {
                target.removeEventListener(transEndEvent, onEnd)
                setStyle(target, originalStyles)
                parent.insertBefore(target, placeholder)
                parent.removeChild(placeholder)
                parent.removeChild(overlay)
                parent.removeChild(wrapper)
                overlay.style.display = 'none'
                placeholder = null
                shown = false
                lock = false
                cb = typeof cb === 'function'
                    ? cb
                    : options.onClose
                if (cb) cb(target)
            })

            return this
        },

        listen: function listen (el) {

            if (typeof el === 'string') {
                var els = document.querySelectorAll(el),
                    i = els.length
                while (i--) {
                    listen(els[i])
                }
                return
            }

            setStyle(el, {
                cursor: prefix + 'zoom-in'
            })

            el.addEventListener('click', function (e) {
                e.stopPropagation()
                if (shown) {
                    api.close()
                } else {
                    api.open(el)
                }
            })

            return this
        }
    }

    overlay.addEventListener('click', api.close)
    wrapper.addEventListener('click', api.close)

    // umd expose
    if (typeof exports == "object") {
        module.exports = api
    } else if (typeof define == "function" && define.amd) {
        define(function(){ return api })
    } else {
        this.Zoomerang = api
    }
})();


js  页面写    
Array.prototype.forEach.call(document.querySelectorAll('p'), function (p, i) {
                p.style.marginLeft = i * 6 + '%'
            })
            Zoomerang
                .config({
                    maxHeight: 400,
                    maxWidth: 400,
                    bgColor: '#000',
                    bgOpacity: .85,
                    onOpen: openCallback,
                    onClose: closeCallback,
                    onBeforeOpen: beforeOpenCallback,
                    onBeforeClose: beforeCloseCallback
                })
                .listen('.zoom')

            function openCallback (el) {
                console.log('zoomed in on: ')
                console.log(el)
            }

            function closeCallback (el) {
                console.log('zoomed out on: ')
                console.log(el)
            }

            function beforeOpenCallback (el) {
            	console.log('on before zoomed in on:')
            	console.log(el)
            }

            function beforeCloseCallback (el) {
            	console.log('on before zoomed out on:')
            	console.log(el)
            }

css  http://fonts.googleapis.com/css?family=Montserrat:700,400
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gbD_u50.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

给放大的元素加类 zoom

~一花一世界~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML点击图片放大
03-24
纯HTML和JS,CSS实现的点击图片,图片放大的功能
点击按钮放大或缩小图片
weixin_30275415的博客
09-21 494
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <img src="6.jpg"> <script> var flag = true,//状态true为正常的状态,...
AI绘图，如何无损放大图片，免费不花钱
最新发布
阿道夫的博客
06-29 523
我们在用 stable diffusion 制作AI图片时，默认生成图片的尺寸为512*512，即使是竖图一般也就是512*768，如果再把尺寸设置大一些，就会因为硬件算力不够而造成系统崩溃，今天就来跟大家聊一聊，如何将制作好的小图无损放大，得到一张高分辨率的大图。当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。图片放大后，图片分辨率变大，文件大小也变大了很多。
jquery点击图片放大功能
weixin_43258364的博客
10-19 1646
jquery点击图片放大功能js代码css代码 js代码 $('#enlarge').click(function () { //获取图片路径 var imgsrc = $("#enlarge").attr("src"); var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" s
点击图片实现图片放大
weixin_45932157的博客
02-19 6017
点击图片实现图片放大的效果： 我们经常会看到当我们点击图片的时候，图片可以放大，放到原来本身的样子，看起来特别舒服。 今天我参考了网上一些经验实现了图片放大功能。 首先我们看代码： <html> <head> <style> .over { position: fixed; left: 0...
vue实现点击图片放大效果
08-29
在Vue.js中实现点击图片放大效果，主要是通过创建一个子组件来处理图片的放大功能，同时结合Vue的事件系统和CSS动画实现平滑的过渡效果。以下是对该知识点的详细说明： 1. **子组件创建**： 子组件名为`BigImg.vue...
图片点击放大（不用插件）
weixin_34072458的博客
06-13 785
29图片点击放大（不用插件） html <!-- 图片放大开始 --> <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.1);z-index:10000;width:100%;height:100%;display:none;"> <div id="...
手机版点击图片放大功能
10-19
手机版点击图片放大功能，可以单张图片也可以多张图片轮播放大，https://www.helloweba.net/javascript/460.html
图片点击放大
weixin_45672607的博客
07-21 168
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <style> /*全屏显示大图*/ .opacityBottom{
点击图片放大效果
01-09
类似微博,微信朋友圈图片点击效果
图片点击放大到全屏、可以手势缩放
11-24
这个效果其实就和新浪微博一样的,不过做的可能没有那么好的效果.就是点击图片会变成全屏查看的模式，然后可以进行手势缩放。看网上没有这块的，要么是单独的点击图片放大，要么就是缩放的，而且缩放的例子是很多，但是效果都不好看，也不是我要的，这个就是自己结合在了一起了。
JS实现点击图片放大效果
01-06
JS 图片 放大 JS放大图片 很好的一个代码.以后还有很多.
图片的点击放大
Charles_hui的博客
10-06 211
$(function() { //三个目标图片，添加单击事件 $(".color_change ul li img").click(function () { //split分割符，前后分割 var str = $(this).attr("src").split(".jpg"); //str[0]获取分割后索引0的字符进行拼接 //定...
页面中图片点击放大
a552966346的博客
07-15 638
页面中图片点击放大 页面需要的JS以及css文件 <link rel="stylesheet" href="dist/zoomify.min.css"> <script src="dist/zoomify.min.js"></script>
点击图片放大功能
王定勇15993092872
03-02 147
今天发现后台列表内的图片显示状态为图片上传多大就显示多大，看着比较不规范，于是就想起来Jquery可以将显示小的图片变大，说干就干，搜索之后发现这个可行： https://www.jb51.net/article/169850.htm 但是应用于项目内则报错：报的是语法性的错误， 折磨很久，才知道是因为代码的注释导致的语法性的错误，下面贴出来项目的应用代码，引以为戒，代码注释是真的能够干扰项目程序的正常运行的，切记出现此类现象一定要把注释干掉，否则程序无法正常运行： <div id="out
imge 点击放大图片
qq_29072049的博客
09-14 635
//这个代码可以忽略 if(data.data.exposureImge!="" &amp;&amp; data.data.exposureImge!=null){ var imgurl = ''; var img = data.data.exposureImge.split(","); imgurl += '&lt;div id="mien" class="...
uniapp点击图片放大
09-06
在Uniapp中，想要实现点击图片放大的效果，可以通过以下步骤实现： 1. 在页面中引入需要放大的图片，并添加一个点击事件。 2. 在事件的回调函数中，使用uniapp提供的API将点击的图片路径传递给一个全屏显示的页面。 3. 在全屏显示的页面中，通过获取传递过来的图片路径，在页面上显示大图。 4. 添加一个点击事件，当用户点击图片的时候，关闭全屏显示的页面，回到原来的页面。 具体步骤如下： 1. 在需要放大的图片所在的页面中添加如下代码： ```html <template> <view> <image @click="showFullScreenImage" src="path/to/image.png"></image> </view> </template> ``` 2. 在 methods 中添加 showFullScreenImage 方法： ```javascript methods: { showFullScreenImage() { uni.navigateTo({ url: '/pages/fullScreenImage?imagePath=path/to/image.png' //将图片路径作为参数传递给全屏显示的页面 }) } } ``` 3. 在全屏显示的页面 fullScreenImage 中添加如下代码： ```html <template> <view> <image @click="closeFullScreenImage" :src="imagePath"></image> </view> </template> ``` 4. 在 methods 中添加 closeFullScreenImage 方法： ```javascript methods: { closeFullScreenImage() { uni.navigateBack() //关闭全屏显示的页面，返回原来的页面 } }, mounted() { this.imagePath = this.$route.query.imagePath //在页面加载时获取传递过来的图片路径 } ``` 通过以上步骤，当用户点击图片时会打开全屏显示的页面，显示原始大小的图片。当用户点击全屏图片时，会关闭全屏显示的页面，回到原来的页面。这样就实现了点击图片放大的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值