首页 > 计算机技术 > 微信弹幕图片、图片点击后显示其他字怎么做
2016
02-26

微信弹幕图片、图片点击后显示其他字怎么做


最近微信公众号的图片弹幕效果和点击图片显示其他内容非常伙伴,很多小伙伴都好奇这些怎么做的吧。其实一点都不复杂,弹幕就是个HTML代码,换上文字就是你的内容,点击图片后显示其他字,其实就是一张png图片。下面一一来解答。

微信弹幕图片

微信弹幕图片

先来看效果:

啊啊 wings blog 博主好帅啊快打开  www.wusiwei.com!!! 你懂的我要上电视,终于上电视了,o(≧v≦)o~~好棒十万个微什么,这个网站也很不错,里面好多微信干货听说明天要下雨计算机技巧,全宇宙最好用的公众号给大家推荐一个微信号——计算机技巧,很多电脑、手机技巧哦!


HTML代码如下:

<section id="wrap_node" style="border: dashed 1px #797979; padding: 5px;">

    <section label="Copyright © 2016 playhudong All Rights Reserved." style="

border:none;

border-style:none;

margin: 1em auto;

width:100%;

" id="shifu_bar_001" donone="shifuMouseDownStyle(&#39;shifu_bar_001&#39;)">

        <svg class="xhr" xmlns="http://www.w3.org/2000/svg" style="

width:100%;

height:20em;

background:rgb(255,255,255);

box-sizing:border-box">

            <text y="40" x="-92.6304" fill="rgb(235,166,36)" style="

font-size:1em;

box-sizing:border-box">

                啊啊 wings blog 博主好帅啊

                <animate attributename="x" from="800" to="-400" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="90" x="658.107" fill="rgb(223,34,28)" style="

font-size:1.2em;

box-sizing:border-box">

                快打开 &nbsp;www.wusiwei.com!!! 你懂的

                <animate attributename="x" from="800" to="-400" begin="1s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="120" x="181.756" fill="rgb(40,216,8)" style="

font-size:1em;

box-sizing:border-box">

                我要上电视,终于上电视了,o(≧v≦)o~~好棒

                <animate attributename="x" from="800" to="-600" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="160" x="-669.191" fill="rgb(33,25,23)" style="

font-size:0.875em;

box-sizing:border-box">

                十万个微什么,这个网站也很不错,里面好多微信干货

                <animate attributename="x" from="800" to="-800" begin="3s" dur="10s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="210" x="436.292" fill="rgb(70,118,217)" style="

font-size:1em;

box-sizing:border-box">

                听说明天要下雨

                <animate attributename="x" from="800" to="-800" begin="5s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="240" x="93.4349" fill="rgb(255,92,139)" style="

font-size:0.7em;

box-sizing:border-box">

                计算机技巧,全宇宙最好用的公众号

                <animate attributename="x" from="800" to="-800" begin="2s" dur="14s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

            <text y="280" x="-390.174" fill="rgb(7,140,59)" style="

font-size:1.2em;

box-sizing:border-box">

                给大家推荐一个微信号——计算机技巧,很多电脑、手机技巧哦!

                <animate attributename="x" from="800" to="-800" begin="3s" dur="11s" repeatcount="indefinite" style="box-sizing:border-box;"></animate>

            </text>

        </svg>

    </section>

</section>

<p class="shifubrush">

    <br/>

</p>


直接把中文换成你要的内容就行了,然后就剩拷贝复制了。当然还有更直接的,网上搜“微信编辑器”很多编辑器现在已经自这个样式了。为了避免广告嫌疑,这里就不说哪个编辑器了。


图片点击后显示其他字

先直接看下效果图:

图片点击后显示其他字

原理如下:

做一张黑白子的png透明图片,黑字内容及即点开图片前显示的内容(因为在手机上看,png透明图片,背景默认都是白色),白字部分就是点开后的内容了(点开后看大图是全屏模式,全屏模式下背景是黑色,这样就把黑字部分隐藏了,而只显示白字部分)。懂了吧!下面是我自己做的一张png图,点开后内容也自动变了。

图片点击后显示其他字

(如果在电脑上看,估计有些看不明显,手机应该都能明显看出区别)


若想查看具体效果,请关注本站微信公众号,回复“弹幕”即可查看具体效果


相关文章:

微信朋友圈照片红包破解方法

微信摇骰子100%必胜的方法

微信朋友圈中翻译变文字的“问号”是怎么弄的