转盘转网页视频链接实现

最新推荐文章于 2022-11-08 20:30:00 发布

csdnjytz

最新推荐文章于 2022-11-08 20:30:00 发布

阅读量316

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/csdnjytz/article/details/120207877

版权

以下是代码，图片和jquery经过图床转换成了链接。部分借鉴了前辈的方法，在此基础上进行改进和优化，在此感谢。

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>教师节快乐！！！拆盲盒</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
alert("第一次打开文件可能会有点慢，请耐心等候，如遇到拦截可点击允许运行哦~\n短片内容纯属娱乐哈，如有雷同，即是巧合..");
$(document).ready(function(e) {
$("#content img").click(function(e) {
var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数
$("#zhuan").css('transform', 'rotate(' + num + 'deg)');
num %= 360; //num=num%360;摩以360后的余数，
//得到一个1至360的数值，进行转盘分成几分的判断
//设定旋转变换3秒后执行下面的提示

setTimeout(function() {
if(num <= 51.4 * 1) {
alert('爱就一个字哦！');
window.open("https://www.xinpianchang.com/a11226959?from=search_post","_self"); //网页链接必须在一行写完链接——self
} else if(num <= 51.4 * 2) {
alert('今天是美好的一天');
window.open("https://www.xinpianchang.com/a11475629?from=search_post","_self");
} else if(num <= 51.4 * 3) {
alert('比海更深');
window.open("https://www.xinpianchang.com/a10430824?from=search_post","_self");
} else if(num <= 51.4 * 4) {
alert('教师节快乐哈');
window.open("https://www.xinpianchang.com/a10929992?from=search_post","_self");
} else if(num <= 51.4 * 5) {
alert('绽放精彩人生~');
window.open("https://www.xinpianchang.com/a10930198?from=search_post","_self");
} else if(num <= 51.4 * 6) {
alert('感恩网课~~');
window.open("https://www.xinpianchang.com/a10929403?from=search_post","_self");
} else if(num <= 51.4 * 7) {
alert('轻松一刻~');
window.open("https://www.xinpianchang.com/a10631253?from=ArticlePageSimilar","_self");
}
}, 3000);

});
});
</script>
<style type="text/css">
/*转盘背景*/

#content {
width: 675px;
height: 675px;
background: url("https://i0.hdslb.com/bfs/album/bd8b1c023025b6e591e9ba1bac57369da9023f81.gif") no-repeat;
background-size:675px 675px;
margin: auto;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/*转盘*/

#zhuan {
width: 528px;
height: 528px;
background: url("https://i0.hdslb.com/bfs/album/5f1406d830cd452c5fe703d51c33227c19fd19b6.gif") no-repeat;
background-size:528px 528px;
margin: 72px 0px 0 72px;
transition: all 3s ease;
/*3秒变换一次*/
}
/*转盘指针*/

#content img {
position: absolute;
top: 135px;
left: 229.5px;
cursor: pointer;
}

html, body, #bj {
width: 100%;
height:100%;
background: url("https://i0.hdslb.com/bfs/album/d9c87c695dcccfe0e613d1cff606c651570b82d8.gif");
}
</style>
</head>

</div>
<div>

</body>

</html>

效果如图：

csdnjytz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转盘转网页视频链接实现

以下是代码，图片和jquery经过图床转换成了链接。部分借鉴了前辈的方法，在此基础上进行改进和优化，在此感谢。<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>教师节快乐！！！拆盲盒</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
复制链接

扫一扫