纯音（渡情）TO：清舟 学习套用黑黑Lost in Time 控制外面鼠标移动
<style>
#papa { margin: 150px 0 0 calc(50% - 881px); width: 1600px; height: 808px; background:url('https://wj.zp68.com/lxx/yunhua/2024/03/09/bj.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; transition: filter 1s; position: relative; z-index: 1; }
#papa:hover { filter: brightness(1.2); }
#player { position: absolute; left: 620px; top: 540px; width: 100px; border-radius: 50%; transition: 4s; cursor: pointer; animation: rot .5s infinite alternate var(--state); }
#vid { position: absolute; width: 20%; height: 20%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }
@keyframes rot { to { transform: scale(.8); } }
#dt2{ position: absolute; width:93px; height: 146px; top: 43%;left:24%; }
#dt3{ position: absolute; width:93px; height: 146px; top: 43%; right: 21%;}
</style>
<div id="papa">
<img id="player" src="https://wj.zp68.com/lxx/yunhua/2024/03/09/da.gif" alt="" />
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2024/03/09/xiao.gif" alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2024/03/09/xiao.gif" alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/34/5b4168b3cb2a5.mp4" loop muted></video>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/287c-audiofreehighqps/D5/B8/GKwRINsIZfw5ADFKAwIr9Uvq.m4a" autoplay loop></audio>
</div>
<script>
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({papa: '#papa'});
let getOffsetPos = (ele) => {
let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x, y};
};
let mState = () => aud.paused
? (papa.style.setProperty('--state','paused'), vid.pause())
: (papa.style.setProperty('--state','running'), vid.play());
aud.onpause = () => mState();
aud.onplaying = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
let movTimer = null,
paWidth = papa.clientWidth,
paHeight = papa.clientHeight,
sonSize = player.clientWidth,
bodyWidth = document.body.clientWidth,
bodyHeight = document.body.clientHeight,
paOffset = {x: getOffsetPos(papa).x, y: getOffsetPos(papa).y};
document.onmousemove = function(e) {
clearTimeout(movTimer);
movTimer = setTimeout(function() {
if(e.target.id === "player") return;
if(document.fullscreenElement === null) {
let x = e.pageX, y = e.pageY;
if(x < paOffset.x) x = paOffset.x;
if(y < paOffset.y) y = paOffset.y;
x = x - paOffset.x;
y = y - paOffset.y;
if(x + sonSize >= paWidth) x = paWidth - sonSize;
if(y + sonSize >= paHeight) y = paHeight - sonSize;
player.style.cssText += `left: ${x}px; top: ${y}px`;
} else {
let xx = e.offsetX, yy = e.offsetY;
if(xx + sonSize > bodyWidth) xx -= sonSize;
if(yy + sonSize > bodyHeight) yy -= sonSize;
player.style.cssText += `left: ${xx}px; top: ${yy}px`;
}
}, 400);
};
})();
</script>
@緑叶清舟
谢谢清舟的精美礼物，小辣椒作业当还礼了，笑纳啊{:4_179:} @马黑黑
黑黑套用一个，谢谢大侠分享教程，这个全屏欣赏非常的漂亮，但现在小辣椒发现只要加了html就不能全屏欣赏了，只有代码发帖才可以，小辣椒收藏自己仓库就不行了 谢谢辣椒，太漂亮了 这厅也太阔气了{:4_189:} 这只乐曲好美哦！ 贴子看着十分高级。。这盆小花放哪都好看。。{:4_187:}
小辣椒动画一流，这么大图还如此流畅。。漂亮！{:4_204:} 小辣椒 发表于 2024-3-9 15:18
@马黑黑
黑黑套用一个，谢谢大侠分享教程，这个全屏欣赏非常的漂亮，但现在小辣椒发现只要加了html就不 ...
你说的是 iframe，它不属于这个页面的 感觉这个屏幕 也可以追剧，挺好的{:4_173:} 生动的画面，客厅里动感十足。,小辣椒选的音乐都很好听{:4_187:} 问好清舟，收礼开心{:4_187:} 你把清舟家刚装好的大客厅搬来啦！{:4_189:} 既然是清舟家客厅，电视里应当有帅哥在跳呵，{:4_189:} 好漂亮的制作，电视里有美女，左上角还弄只鹦鹉增添气氛。
亲爱的好制作，很赞{:4_199:} 跟随鼠标的花盆按钮也很漂亮，这么漂亮的大客厅呢。清舟收礼开心{:4_187:} 欣赏你的精采 音乐真好听，听的流连忘返了！{:4_187:} 手机看看效果不错，没有鼠标在界面外面的，小小手机本来就是全屏了{:4_170:} 绿叶清舟 发表于 2024-3-9 16:40
谢谢辣椒，太漂亮了
清舟太客气了{:4_179:}