返回首页

微信图文编辑中,怎么做到点击图片后 出现长图?

来源:www.fanlv.net  时间:2023-09-16 13:41   点击:57  编辑:admin   手机版

说说我的方法吧,找了篇有相关功能的文章,题主那篇iPhone的太过复杂了,我用了这一篇

官宣 | 彭于晏正式成为红星美凯龙全新品牌形象代言人

然后用135编辑器导入文章,再点选源代码把多余的图片对应的代码删掉就有想要的效果了…


---------------------------------- 分割线 2020/12/21 ----------------------------------

偶尔看见有人问, 再分享一下源码吧, 把下面的代码放进编辑器, 替换掉自己的图片即可

<section data-role="outer" style="font-size: 16px;">
    <section style="display: block;margin: 0 auto;max-width: 340px !important;text-align: center;">
        <section style="display: block;overflow: hidden;text-align: left;width: 100% !important;background: #fff;">
            <section style="height: 0 !important;display: block;">

                <!-- 图 1 START -->
                <section style="display: block;padding-top: 0px;text-align: center;box-sizing: border-box;">
                    <section style="display: block;margin: 0px auto;text-align: center;height: 603px;max-width: 340px !important;">
                        <svg height="603px" preserveaspectratio="xMidYMin meet" space="default" style="background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/GicBfQicib0kia1YjOnibAXsBDOnWoq1CviaEibib44yq2dxaqzczEe4pwxcUlsdURFagoktaMib1ib8ErSXg4pRpdTGlr2Q/640&quot;);background-size: contain;background-repeat: no-repeat;width: 100%;height: 603px;" viewbox="0 0 1080 604" width="100%" xml="" xmlns="http://www.w3.org/2000/svg">
                        </svg>
                    </section>
                </section>
                <!-- 图 1 END -->

                <section style="display: block;padding-top: 0;text-align: center;transform: translateZ(0.01px);-webkit-transform: translateZ(0.01px);-moz-transform: translateZ(0.01px);-ms-transform: translateZ(0.01px);-o-transform: translateZ(0.01px);margin-top: -2px;">
                    <section style="box-sizing: border-box;">
                        <section style="display: inline-block;width: 100%;vertical-align: top;overflow: hidden;align-self: flex-start;box-sizing: border-box;height: 2200px;">
                            <section style="height: 0px;overflow: visible;box-sizing: border-box;">
                                <section style="text-align: center;box-sizing: border-box;">
                                    <section style="max-width: 100%;vertical-align: middle;display: inline-block;line-height: 0;box-sizing: border-box;">

                                        <!-- 图 2 START -->
                                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587622913433&di=49afcaea34ba820bedc84e186c56a14a&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj360%2F007UgWt8gy1gd0mv6vyhij31ia54anph.jpg" data-type="jpeg" style="vertical-align: middle;box-sizing: border-box;width: 340px !important;visibility: visible !important;" width="340px" data-ratio="1.7773333333333334" data-w="750"/>
                                        <!-- 图 2 END -->

                                        <!-- 图 3 START -->
                                        <img src="https://mmbiz.qpic.cn/mmbiz_jpg/GicBfQicib0kia1YjOnibAXsBDOnWoq1CviaEibNOEOMOXiaLRdJqibrxETzvAkq5ClXwkNKQBKicy7FhQMweFGIAAU8E32g/640" data-type="jpeg" style="vertical-align: middle;box-sizing: border-box;width: 340px !important;visibility: visible !important;" width="340px" data-ratio="1.7773333333333334" data-w="750"/>
                                        <!-- 图 4 START -->

                                    </section>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
            </section>

            <!-- 图 4 START -->
            <section style="display: block;margin: 0px auto;text-align: center;min-height: 603px;max-width: 340px !important;">
                <svg opacity="0" preserveaspectratio="xMidYMin meet" space="default" style="background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/GicBfQicib0kia1YjOnibAXsBDOnWoq1CviaEibib44yq2dxaqzczEe4pwxcUlsdURFagoktaMib1ib8ErSXg4pRpdTGlr2Q/640?wx_fmt=gif&quot;);background-size: contain;background-repeat: no-repeat;width: 100%;height: 603.5px;margin-bottom: -25px;" viewbox="0 0 1080 604" width="100%" xml="" xmlns="http://www.w3.org/2000/svg">
                    <animate attributename="height" fill="freeze" restart="never" calcmode="spline" keysplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keytimes="0;0.0035;1" values="603;603;2453" dur="3s" begin="click"></animate>
                    <g transform="translate(0, 965)"></g>
                </svg>
            </section>
            <!-- 图 4 END -->

        </section>
    </section>
</section>


截图说明一下, 想点击之后看到的效果是基于原图展开的话, 图1 与 图4的图片(url地址)需要一致, 然后根据自己需要, 按图2 和图3的格式添加自己需要展开的图片即可

顶一下
(0)
0%
踩一下
(0)
0%
相关评论
我要评论
用户名: 验证码:点击我更换图片