web 前端

广告展示网页,引入视频,点击按钮复制选中到微信或者手机号

2019-05-01  本文已影响0人  一号聪明

现如今大多数的企业或者个人都会通过对自己的产品进行在网站上推销自己的信息(微信号,手机号,关键字),和宣传视频。

我们可以通过 HTML 5 中的新标签<embed>将视频资源直接引入
| heigh | 设置嵌入内容的高度。 |
| src | 嵌入内容的 URL。 |
| type | 定义嵌入内容的类型。 |
| width| 设置嵌入内容的宽度。 |

<embed  src='http://player.bilibili.com/player.html?aid=50784205&cid=88914297&page=1'></embed>

由于微信的接口不是很友好,导致达不到自己预期的效果,所以只能通过点击后复制内容到剪切板,然后用户自行到微信或者手机通讯录进行添加,当然这个效果肯定长按再选中的效果更好,给用户达到更好的体验。但剪切板复制粘贴属于系统操作。我们可以通过现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。

<footer>
        <div>
            <p>校长微信:<span id="foo">Principal_Li_</span></p>
            <p>点击按钮复制并添加老师好友</p>
        </div>
        <div>
            <p class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">去微信咨询</p>
        </div>
    </footer>
    <div class="zhe">
        <div class="zhe-content">复制成功!</div>
    </div>
var clipboard = new ClipboardJS('.btn');
    var zhe=document.getElementsByClassName('zhe')[0];
    clipboard.on('success', function(e) {
        zhe.style.display='block';
        setTimeout(()=>{
            zhe.style.display='none';
        },2000)
});
效果
上一篇下一篇

猜你喜欢

热点阅读