说说我的方法吧，找了篇有相关功能的文章，题主那篇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("https://mmbiz.qpic.cn/mmbiz_jpg/GicBfQicib0kia1YjOnibAXsBDOnWoq1CviaEibib44yq2dxaqzczEe4pwxcUlsdURFagoktaMib1ib8ErSXg4pRpdTGlr2Q/640");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("https://mmbiz.qpic.cn/mmbiz_jpg/GicBfQicib0kia1YjOnibAXsBDOnWoq1CviaEibib44yq2dxaqzczEe4pwxcUlsdURFagoktaMib1ib8ErSXg4pRpdTGlr2Q/640?wx_fmt=gif");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%
- 相关评论
- 我要评论
-