网站侧边栏小姐姐随机跳舞组件代码
在网站侧边添加一个小姐姐随机跳舞的可折叠组件,这个组件的特点是,当用户点击时,会随机播放小姐姐的舞蹈视频。这样的设计不仅可以增加网站的趣味性,也可以吸引更多的用户停留和浏览。
<section id="xiaojiejie">
<div class="xiaojiejie">
<style>
#player { margin: 1px auto; max-width: 100%; border-radius: 10px; display:
block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height:
40px; border: none; background-color: #f95491; color: #fff; margin-top:
1px; border-radius: 5px; font-size: 18px; cursor: pointer; transition:
0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp
{ width: 100%; display: flex; justify-content: space-between; } .kzsp>button
{ border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color:
#f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer;
} .kzsp>button:active { background-color: #e25a00; }
</style>
<button type="button" id="ckxjj">
点我看小姐姐视频
</button>
<div id="xjjsp">
<video id="player" src="http://v.nrzj.vip/video.php?_t=0.7043674648906169"
controls="" alt="小姐姐视频">
</video>
<div class="kzsp">
<button id="switch">
连续: 开
</button>
<button id="next">
下一个
</button>
</div>
<button type="button" id="gbxjj">
关闭视频
</button>
</div>
<script>
var player = document.getElementById('player');
var bind = function(element, event, callback) {
return element.addEventListener(event, callback);
};
var sp = 0;
$(document).ready(function() {
$('#ckxjj').click(() = >{
$('#ckxjj').hide();
$('#xjjsp').show();
if (sp == 0) {
randomm();
sp = null
}
player.onerror = () = >{
randomm()
}
player.play();
});
$('#gbxjj').click(() = >{
$('#ckxjj').show();
$('#xjjsp').hide();
player.pause();
})
});
var get = function(id) {
return document.getElementById(id);
};
var auto = true;
// 生成播放视频
function randomm() {
player.src = 'http://v.nrzj.vip/video.php?_t=0.7043674648906169';
player.play();
};
bind(get('next'), 'click', randomm);
bind(get('switch'), 'click',
function() {
auto = !auto;
this.innerText = '连续:' + (auto ? '开': '关');
});
bind(player, 'ended',
function() {
if (auto) randomm();
});
player.pause();
</script>
</div>
</section>
添加教程
以WordPress为例子,我们进入网站后台找到外观-小工具-自定义HTML,添加以下代码,如果不是WordPress,自己在想要的位置找到对应文件添加。
THE END