[ CSOL - CLS ] 活动网站 map area

news/2024/4/24 4:47:46/

文章目录

    • CLS时装
    • CSOL 工创精英团(设置上传图片的宽高度,提升用户体验)
      • (1)设置上传图片的宽高度
    • CSO歌手 奈奈(背景音乐DOM写入、小说分页切换、自定义滚动)
      • (1)背景音乐DOM写入
      • (2)小说分页切换
      • (3)自定义滚动
      • 自定义弹窗
      • CSO立即预约(鼠标滚动事件)
      • (1)视频切换效果
      • (2)animation 动画延迟
      • (3)闪动的心
      • (4)上下闪动
    • CLS职场精英 精致日常
    • 不规则导航
    • 短信验证码
    • CLS时装选项卡 梦幻星光

CLS时装

在这里插入图片描述
https://cls.tiancity.com/event/2020/1230fashion/?v=1609320608540

<div class="layer layer1" id="layer1"><a class="close ic" href="javascript:showDialog.hide(layer1);"></a><div class="pop lp"><a href="javascript:;" class="btn btn1 ic prev"></a><a href="javascript:;" class="btn btn2 ic next"></a><a href="javascript:;" class="btn btnClick btn4 ic active"></a><a href="javascript:;" class="btn btnClick btn5 ic"></a><a href="javascript:;" class="btn btnClick btn6 ic"></a><span class="ic name"></span><div class="pople"><div class="rw p1 lp on"></div><div class="rw p2 lp"></div><div class="rw p3 lp"></div></div><span></span><span></span></div>
</div>
<script type="text/javascript">
$(function(){$('.box .btn').each(function(i){$(this).hover(function(){$(this).addClass("ic").siblings().removeClass("ic");},function(){$(this).removeClass("ic");});$(this).click(function(){$(".pople").addClass("pople"+(i+1)+"")$(".pop span.name").addClass("name"+(i+1)+"")});});$('.btnClick').each(function(i){$(this).click(function(){$(this).addClass("active").siblings().removeClass("active");$('.pople .rw').eq(i).addClass("on").siblings().removeClass("on");});});$('.prev').click(function(){$(".pople .rw.on").prev().addClass("on").siblings().removeClass("on");$(".btnClick.active").prev(".btnClick").addClass("active").siblings().removeClass("active");});$('.next').click(function(){$(".pople .rw.on").next().addClass("on").siblings().removeClass("on");$(".btnClick.active").next(".btnClick").addClass("active").siblings().removeClass("active");});$('.layer .close').click(function(){$(".pople").attr('class','pople');$(".pop span.name").attr('class','ic name');$(".btnClick").eq(0).addClass("active").siblings(".btnClick").removeClass("active")$(".pople .rw").eq(0).addClass("on").siblings().removeClass("on")});$('.text a').each(function(i){$(this).find("span").hover(function(){$(this).siblings().show().css({'display':'block'}).parent().siblings().find("i").hide();},function(){$(this).siblings().hide()});});
})
</script>

CSOL 工创精英团(设置上传图片的宽高度,提升用户体验)

在这里插入图片描述

(1)设置上传图片的宽高度

//投稿设置图片宽度
setTimeout(function(){$(".works_list li img").each(function(i){var img = $(this);var realWidth;var realHeight;$("<img/>").attr("src", $(img).attr("src")).load(function() {realWidth = this.width;realHeight = this.height;//打印图片真实宽高度//console.log(realWidth,realHeight);//设置 当 (宽大于高) 或者 (宽度减去高度小于100)设置宽高度if( realWidth < realHeight || (realWidth - realHeight) < 100 ){$(img).css({'width':'auto','height':'100%'});}else{$(img).css({'width':'100%','height':'auto'});}});});setTimeout(function(){$(".manual_literature .works_list li img").each(function(i){//获取图片修改后的浏览器宽度高度 设置居中显示var  _width= $(this).height();if( _width < 243 ){var _top  = (243-_width)/2$(this).css({'position':'relative','top':_top});}});},10)
},10)

CSO歌手 奈奈(背景音乐DOM写入、小说分页切换、自定义滚动)

https://csol.tiancity.com/homepage/event/2020/07/cs200723sing/

在这里插入图片描述

(1)背景音乐DOM写入

//背景音乐DOM写入
$("body").append('<div class="audio"><audio loop="loop" id="bgMusic" src="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/video/music.mp3"></audio></div>');
var bgMusic = document.getElementById("bgMusic");
$(".music_btn").on('click', function() {var _this = $(this);var _thisSpan = $(".vd1 .video_content")if (_thisSpan.hasClass("autoRotate")) {bgMusic.pause();$(".vd1 .video_content").removeClass("autoRotate")$(".play_bar").removeClass("playing3");//alert(1);} else {bgMusic.play();$(".vd1 .video_content").addClass("autoRotate")$(".play_bar").addClass("playing3");};
});

(2)小说分页切换

在这里插入图片描述

$('.prev').click(function(){$(".layer1 ul li.on").prev().addClass("on").siblings().removeClass("on");
});
$('.next').click(function(){$(".layer1 ul li.on").next().addClass("on").siblings().removeClass("on");
});

(3)自定义滚动

在这里插入图片描述

<script src="https://img1.tiancitycdn.com/project1/csol/event/2017/07/cs170720map/js/marquee.js"></script>
<style type="text/css">
.original {width: 978px;margin: 0 auto;position: relative;top: 0;left: 0;margin-top: 480px;height: 230px;}
.original .original-box{width:100%;position:relative;}
.original .marquee{width:100%;height:100%;overflow:hidden;margin:0 auto;position:relative;z-index:10}
.original .marquee ul{width:100%;height:100%;}
.original .marquee ul li{float:left;width: 326px;height: 230px;position: relative;left: 0px;overflow:hidden;}
.original .marquee ul li i{display:block;width: 290px;height: 165px;background: url(https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/images/marquee_bg.png) no-repeat;margin:0 auto;}
.original .marquee ul li a { display: block; overflow: hidden; width: 110px; height: 39px; line-height: 33px; text-align: center; background: url(https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/images/yellow_btn_bg.png) no-repeat center top; position: relative; color: #f00; margin: 25px auto; font-size: 16px; }
.original .marquee ul li a:hover{transform: scale(1.1);}
.original .goL, .original .goR {font-size: 0;position: absolute;width: 55px;height: 55px;margin-top: -47px;z-index: 11;top: 98px;background: url(https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/images/marquue_btn.png) no-repeat center top;}
.original .goL{left: -60px;background-position:left top;}
.original .goR{right: -60px;background-position:right top;}</style><div class="original"><div class="original-box"><a href="javascript:void(0);" class="goL">&lt;</a><a href="javascript:void(0);" class="goR">&gt;</a><div class="marquee"><ul></ul></div></div>
</div>
<script type="text/javascript">
$(function(){var queenList = "";var num=11;//添加的滚动元素的个数var bpx=291;//每次滚动一格的距离for (var i = 0; i < num; i++) {queenList += '<li class="'+i+'"><i></i><a href="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/images/bag/'+(i+1)+'.png" target="_blank" class="btn btn1">下载</a></li>'}$(".marquee ul").append(queenList);$('.marquee').kxbdSuperMarquee({distance: 326,btnGo: {left: '.goR',right: '.goL'},direction: 'left'});$('.original .marquee ul li').each(function(i) {var b = i - numif (i < num) {$('.original .marquee ul li').eq(i).find('i').css({'background-position-x': i * -bpx})}if (i > num) {$('.original .marquee ul li').eq(i).find('i').css({'background-position-x': b * -bpx})}});
})
</script>

自定义弹窗

在这里插入图片描述

<a href="javascript:swal('已结束')" class="btn btn1">全新传奇级武器即将上线</a>
<script type="text/javascript" src="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs0709default/js/sweet.js"></script>
<link rel="stylesheet" type="text/css" href="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs0709default/css/sweet.css">

CSO立即预约(鼠标滚动事件)

https://evt05.tiancity.com/csol/51338/home/index.php

在这里插入图片描述

页面base.js代码

<script type="text/javascript" src="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs0710act/js/base.js?v=1"></script>
$(function(){//背景音乐DOM写入$("body").append('<div class="audio"><audio loop="loop" id="bgMusic" src="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs0710act/audio/audio.mp3"></audio></div>');var bgMusic=document.getElementById("bgMusic");$(".main3 .video_btn").on('click',function(){var _this=$(this);var _thisSpan = $(this).find("span");if(_thisSpan.hasClass("zhuan")){bgMusic.pause();$(".main3 .video_btn span").removeClass("zhuan");$(".main3 .video_btn i").removeClass("on");}else{bgMusic.play();_thisSpan.addClass("zhuan");$(".main3 .video_btn i").addClass("on");};})//音乐动画那块function music(){var dTime = window.setInterval(() =>{var _i =  $('.main3 .video_btn i')var imgWidth = _i.width();if( imgWidth < 1045 ){imgWidth = imgWidth+1;_i.css({'width': imgWidth });//console.log(imgWidth);}else if( imgWidth = 1045 ){_i.css({'width': 0 });}else{clearInterval(dTime)}},1)}$('#appointment').after('<div class="layer" id="video_pop" style="width:800px;"><a class="close" href="javascript:showDialog.hide();" style="background: url(https://image.tiancity.com/player/images/close_btn.jpg) no-repeat;width: 48px;height: 48px;right: -48px;display: block;position: absolute;top: 0;"></a><video id="header-video" style="width:100%;" src="https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs0710act/css/vi.mp4" autoplay="autoplay" loop="loop" muted controls="true"></video></div>')$(".container.main1").append("<a href=\'javascript:showDialog.show(video_pop);\' class=\'video_btn1\'></a>");$(".logo").addClass("animated fadeInDown")$(".theme").addClass("animated slideInDown")$(".nav").addClass("animated slideInUp")$(".nav .btn1").addClass("animated slideInLeft")$(".nav .btn2").addClass("animated zoomIn")$(".nav .btn3").addClass("animated slideInRight")$('.nav a').each(function(i){$(this).click(function(){if( i == 0 ){$(".bg .bg2").slideDown().siblings().slideUp()$(".main2").slideDown().siblings().slideUp()animate_text()}if( i == 2 ){$(".bg .bg3").slideDown().siblings().slideUp()$(".main3").slideDown().siblings().slideUp()animate_text()}});});$('.return_btn').click(function(){$(".container .return_btn").removeClass("fadeOutLeft").addClass("animated fadeOutLeft")$(".bg .bg1").slideDown().siblings(".bg2,.bg3").slideUp()$(".main1").slideDown().siblings(".main2,.main3").slideUp()});function animate_text(){$(".container .return_btn").addClass("animated fadeInDown").removeClass("fadeOutLeft")//$(".main3 .video_btn").addClass("animated pulse")$(".theme_text .animate_left").addClass("animated fadeInLeftBig")$(".theme_text .animate_right").addClass("animated fadeInRightBig")}//滚动事件 开始var scrollFunc = function (e) {e = e || window.event;if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件if (e.wheelDelta > 0) { //当滑轮向上滚动时//alert('上滚')$(".container .return_btn").removeClass("fadeOutLeft").addClass("animated fadeOutLeft")$(".bg .bg1").slideDown().siblings(".bg2,.bg3").slideUp()$(".main1").slideDown().siblings(".main2,.main3").slideUp()}if (e.wheelDelta < 0) { //当滑轮向下滚动时
//				alert('下滚')}} else if (e.detail) { //Firefox滑轮事件if (e.detail > 0) { //当滑轮向下滚动时
//				alert('下滚')}if (e.detail < 0) { //当滑轮向上滚动时
//				alert('上滚')}}}/*IE、Opera注册事件*/if (document.attachEvent) {document.attachEvent('onmousewheel', scrollFunc);}//Firefox使用addEventListener添加滚轮事件if (document.addEventListener) { //firefoxdocument.addEventListener('DOMMouseScroll', scrollFunc, false);}//Safari与Chrome属于同一类型window.onmousewheel = document.onmousewheel = scrollFunc;//滚动事件 结束//----- IE7~IE8提示  ---------------------------var lessThenIE8 = function() {var UA = navigator.userAgent,isIE = UA.indexOf('MSIE') > -1,v = isIE ? /\d+/.exec(UA.split(';')[1]) : 'no ie';return v < 9;}();if (lessThenIE8) {alert("请升级浏览器至ie8以上 或 使用火狐,谷歌浏览器!");}//----- IE9提示  ---------------------------if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<=9){alert("您的浏览器版本过低,请升级浏览器至ie9以上 或 使用火狐,谷歌浏览器!");}
})

(1)视频切换效果

在这里插入图片描述

<script src="https://image.tiancity.com/others/Scripts/jquery-1.7.2.min.js"></script>
<style type="text/css">*{box-shadow:0px 0px 0px 1px #fff;}
.video_live{width: 960px;height: 538px;overflow:hidden;}
.video_live .vc{position: absolute;top: 0;left:0;margin-left:0px;width: 960px;height: 538px;overflow:hidden;display:none;}
.video_live .vc.on {z-index: 9999;display:block;}
.video_live .vc embed{width:100%;height:100%;}
.video_btn_23 {position: relative;top: 10px;}
.video_btn_23 a { width: 232px; height: 43px; float: left; background: #03A9F4; margin-right: 10px; font-size: 30px; text-align: center; color: #fff; }
.video_btn_23 a.on { background: #fff; color: #000; }
</style>
<div class="video_live"><div class="vc"  id="video-container1"></div><div class="vc"  id="video-container2"></div><div class="vc"  id="video-container3"></div><div class="vc"  id="video-container4"></div>
</div>
<div class="video_btn_23"><a href="javascript:levia1.Load('video-container1');" class="btn btn1">视频1</a><a href="javascript:levia2.Load('video-container2');" class="btn btn1">视频2</a><a href="javascript:levia3.Load('video-container3');" class="btn btn1">视频3</a><a href="javascript:levia4.Load('video-container4');" class="btn btn1">视频4</a>
</div>
<script type="text/javascript" src="https://img1.tiancitycdn.com/cls/utils/common/Yplayer/Yplayer.js"></script>
<script type="text/javascript">
$(function(){levia1.Load('video-container1')$(".video_btn_23 .btn").each(function(i){$(".video_live .vc").eq(0).addClass("on")$(".video_btn_23 .btn").eq(0).addClass("on")$(this).click(function(){$(".video_live .vc").eq(i).addClass("on").siblings().removeClass("on");$(this).addClass("on").siblings().removeClass("on");});});
})
//手书
var levia1=new Yplayer({"url":"https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/video/shoushu.flv","width":600,"height":328,"auto":1,"showbar":3,"showtime":1,"repeat":1});
//沙话
var levia2=new Yplayer({"url":"https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/video/shahua.flv","width":600,"height":328,"auto":1,"showbar":3,"showtime":1,"repeat":1});
//发布会
var levia3=new Yplayer({"url":"https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/video/fabuhui.flv","width":600,"height":328,"auto":1,"showbar":3,"showtime":1,"repeat":1});
//玩家采访
var levia4=new Yplayer({"url":"https://img1.tiancitycdn.com/project1/csol/event/2020/07/cs200723special/video/chenpin.flv","width":600,"height":328,"auto":1,"showbar":3,"showtime":1,"repeat":1});
</script>

(2)animation 动画延迟

在这里插入图片描述

.return_btn {animation-delay: 0.9s;-moz-animation-delay: 0.9s;-webkit-animation-delay: 0.9s;
}
.nav a.btn1, .nav a.btn3 {animation-delay: 0.9s;-moz-animation-delay: 0.9s;-webkit-animation-delay: 0.9s;
}
.section .container .logo {animation-delay: 1.7s;-moz-animation-delay: 1.7s;-webkit-animation-delay: 1.7s;
}
.theme .theme4 {animation-delay: 1.3s;-moz-animation-delay: 1.3s;-webkit-animation-delay: 1.3s;
}

(3)闪动的心

.btn2 {-webkit-animation:circlebig 0.7s infinite ease-in alternate;-moz-animation:circlebig 0.7s infinite ease-in alternate;-ms-animation:circlebig 0.7s infinite ease-in alternate; -o-animation:circlebig 0.7s infinite ease-in alternate;animation:circlebig 0.7s infinite ease-in alternate;}
@-webkit-keyframes circlebig{0%{-webkit-transform:scale(.93);opacity:.9}
100%{-webkit-transform:scale(1);opacity:1}
}
@-moz-keyframes circlebig{0%{-moz-transform:scale(.93);opacity:.9}
100%{-moz-transform:scale(1);opacity:1}
}
@-ms-keyframes circlebig{0%{-ms-transform:scale(.93);opacity:.9}
100%{-ms-transform:scale(1);opacity:1}
}
@-o-keyframes circlebig{0%{-o-transform:scale(.93);opacity:.9}
100%{-o-transform:scale(1);opacity:1}
}
@keyframes circlebig{0%{transform:scale(.93);opacity:.9}
100%{transform:scale(1);opacity:1}
}

(4)上下闪动

在这里插入图片描述

.video_btn i.on {-webkit-animation:circlebig2 0.7s infinite ease-in alternate;-moz-animation:circlebig2 0.7s infinite ease-in alternate;-ms-animation:circlebig2 0.7s infinite ease-in alternate; -o-animation:circlebig2 0.7s infinite ease-in alternate;animation:circlebig2 0.7s infinite ease-in alternate;}
@-webkit-keyframes circlebig2{0%{-webkit-transform:scale(1,0.85);opacity:.9}
100%{-webkit-transform:scale(1,1);opacity:1}
}
@-moz-keyframes circlebig2{0%{-moz-transform:scale(1,0.85);opacity:.9}
100%{-moz-transform:scale(1,1);opacity:1}
}
@-ms-keyframes circlebig2{0%{-ms-transform:scale(1,0.85);opacity:.9}
100%{-ms-transform:scale(1,1);opacity:1}
}
@-o-keyframes circlebig2{0%{-o-transform:scale(1,0.85);opacity:.9}
100%{-o-transform:scale(1,1);opacity:1}
}
@keyframes circlebig2{0%{transform:scale(1,0.85);opacity:.9}
100%{transform:scale(1,1);opacity:1}
}

CLS职场精英 精致日常

https://cls.tiancity.com/event/2020/0716fashion/

在这里插入图片描述

html

<div class="box1"><div class="btn"><a href="javascript:;" class="bt btn1 on"></a><a href="javascript:;" class="bt btn2"></a><a href="javascript:;" class="bt btn3"></a><a href="javascript:;" class="bt btn4"></a><a href="javascript:;" class="bt btn5"></a><a href="javascript:;" class="bt btn6"></a></div><div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/a1.png" class="img1" width="850" height="1220" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/a2.png" class="img2" width="1048" height="968" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/a3.png" class="img3" width="735" height="935" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/a4.png" class="img4" width="972" height="1014" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/a5.png" class="img5" width="648" height="960" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/a6.png" class="img6" width="1009" height="1030" border="0" alt=""></div>
</div>
<div class="box2"><div class="btn"><a href="javascript:;" class="btn btn1 on"></a><a href="javascript:;" class="btn btn2"></a><a href="javascript:;" class="btn btn3"></a></div><div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/pp1.png" class="img1" width="995" height="605" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/pp2.png" class="img2" width="1059" height="605" border="0" alt=""><img src="https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/pp3.png" class="img3" width="1059" height="605" border="0" alt=""></div>
</div>

css

.box1{height: 1106px;width: 1200px;position: relative;margin: 0 auto;left: -100px;}
.box1 .btn{position: absolute;top: 260px;left: 38px;width: 511px;height: 486px;margin:0 auto;padding-bottom:10px;}
.box1 .btn a{display: block;width: 161px;height: 226px;background:url(https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/btn_bg.png) no-repeat;float: left;position: relative;top:0px;z-index:1;margin: 0 0 20px 8px;}
.box1 .btn a.btn1{background-position:-3px -3px;}
.box1 .btn a.btn2{background-position:-174px 0;}
.box1 .btn a.btn3{background-position:-351px -3px;}
.box1 .btn a.btn4{background-position:0 -256px;}
.box1 .btn a.btn5{background-position:-177px -259px;}
.box1 .btn a.btn6{background-position:-348px -256px;}
.box1 .btn a.btn1.on{background-position:-514px -3px;}
.box1 .btn a.btn2.on{background-position:-685px 0;}
.box1 .btn a.btn3.on{background-position:-862px -3px;}
.box1 .btn a.btn4.on{background-position:-511px -256px;}
.box1 .btn a.btn5.on{background-position:-688px -259px;}
.box1 .btn a.btn6.on{background-position:-859px -256px;}
.box1 .img{width: 100%;height: 100%;position:relative;}
.box1 .img img{display: none;position: relative;}
.box1 .img .img1{display:block;left: 400px;}
.box1 .img .img2{left: 512px;top: 39px;}
.box1 .img .img3{left: 483px;top: 104px;}
.box1 .img .img4{left: 261px;top: 17px;}
.box1 .img .img5{left: 563px;top: 62px;}
.box1 .img .img6{left: 336px;top: 39px;}
/*-------------------------------------*/
.box2{height: 816px;width: 1200px;position: relative;margin: 0 auto;left: -100px;}
.box2 .btn{position: absolute;top: 110px;left: -32px;width: 190px;height:229px;margin:0 auto;}
.box2 .btn a{display: block;width: 139px;height: 57px;background:url(https://img1.tiancitycdn.com/cls/event/2020/0716fashion/images/botton.png) no-repeat;float: left;position: relative;top:0px;z-index:1;margin-bottom: 30px;}
.box2 .btn a.btn1{background-position:-36px -10px;}
.box2 .btn a.btn2{background-position:-10px -96px;left: -70px;}
.box2 .btn a.btn3{background-position:-43px -170px;}
.box2 .btn a.btn1.on{background-position:-226px -10px;}
.box2 .btn a.btn2.on{background-position:-200px -96px;}
.box2 .btn a.btn3.on{background-position:-233px -170px;}
.box2 .img img{display:none;position: absolute;top: 110px; left: 60px;}
.box2 .img .img1{display:block;}
var page = 4;
$(function(){$('.box1 .btn a').each(function(i){$(this).hover(function(){$(this).addClass("on").siblings().removeClass("on")$('.box1 .img img').eq(i).show().siblings().hide()});});$('.box2 .btn a').each(function(i){$(this).hover(function(){$(this).addClass("on").siblings().removeClass("on")$('.box2 .img img').eq(i).show().siblings().hide()});});
})

不规则导航

GIF录制编辑工具【蓝奏云下载】
GIF录制编辑工具(GifCam) v6.0中文绿色版
gif录制软件54个软件
在这里插入图片描述
https://img1.tiancitycdn.com/cls/event/2020/0716StraightUp/js/r_nav.js?v=1595057758742

document.write('<style>.r_nav{position:fixed; z-index:1000; right:10px; top:50%; margin-top:-150px; width:180px;}</style>'
+'<div class="r_nav">'+'<img class="navImg" src="https://img1.tiancitycdn.com/cls/event/2020/0716StraightUp/images/nav_on0.png" alt="" width="180" height="302" usemap="#Map" id="area" />'+'<map name="Map">'+'<area shape="poly" coords="2,5,132,-6,143,48,15,55" href="https://evt05.tiancity.com/cls/51337/home/index.php" id="1" style="outline:none">'+'<area shape="poly" coords="8,61,148,54,153,87,34,134" href="https://cls.tiancity.com/event/2020/0716TowerOfBabel/" id="2" style="outline:none">'+'<area shape="poly" coords="33,141,138,102,166,147,28,172" href="https://cls.tiancity.com/event/2020/0716StraightUp/" id="3" style="outline:none">'+'<area shape="poly" coords="16,180,149,158,147,197,23,224" href="https://cls.tiancity.com/event/2020/0716fashion/" id="4" style="outline:none">'+'<area shape="poly" coords="45,229,160,201,177,241,40,259" href="https://evt05.tiancity.com/cls/51332/home/index.php" id="5" style="outline:none">'+'<area shape="poly" coords="38,267,163,252,146,300,39,298" href="https://evt05.tiancity.com/cls/51334/home/index.php" id="6" style="outline:none">'+'</map>'
+'</div>');$(function(){var $nowId=nullvar onLoadSrc="https://img1.tiancitycdn.com/cls/event/2020/0716StraightUp/images/"var $mapPic = $(".r_nav .navImg");$mapPic.attr("src",onLoadSrc+"nav_on"+page+".png");$('.r_nav area').hover(function(e){$nowId=$(this).attr("id");$mapPic.attr("src",onLoadSrc+"nav_on"+$nowId+".png");},function(){$mapPic.attr("src",onLoadSrc+"nav_on"+page+".png");});
});

调用方法:

<script  src="https://img1.tiancitycdn.com/cls/event/2020/0716StraightUp/js/r_nav.js?v=1"></script>
var page = 4;

短信验证码

在这里插入图片描述

HTML

<div class="layer luck" id="luck"><a href="javascript:showDialog.hide()" class="close merge"></a><h1>生化5预约抽奖</h1><div class="form"><p>手机号:</p><input type="text" /></div><button>提交</button><p class="note">※成功预约的玩家不仅能参与抽奖,还将在开播2小时前收到 <br />C的短信提醒哦!</p><div class="verification"><ul><li><input type="text" value="1" maxlength="1" /></li><li><input type="text" value="1" maxlength="1" /></li><li><input type="text" value="1" maxlength="1" /></li><li><input type="text" value="1" maxlength="1" /></li></ul></div>
</div>

CSS


.luck{width:516px;height: 402px;background: url(../images/layer_bg.jpg) no-repeat;position: relative;}
.luck .close { width: 30px; height: 30px; display: block; background: url(../images/close.png) no-repeat; position: absolute; top: 10px; right: 10px; z-index: 9999; }
.luck h1{font-size: 20px;color:#2B3D4B;padding:46px 0 38px;text-align: center;font-weight: 900;}
.luck .form{width:418px;height: 34px;overflow: hidden;margin: 0 auto;}
.luck .form p{float:left;width: 20%;line-height: 34px;height: 34px;font-size: 20px;}
.luck .form input {width: 70%;line-height: 34px;height: 34px;background: #fff;padding: 0 10px;float: left;border: none;font-size: 20px;text-align: center;font-family: fantasy;letter-spacing: 6px;}
.luck button{width:110px;height:32px;line-height:32px;text-align:center;background: #2D3F53;color: #fff;border:none;margin: 30px auto 0;display: block;font-weight: 900;font-size: 13px;}
.luck .note{padding:30px 0;text-align: left;width: 80%;margin: 0 auto;overflow: hidden;}
.luck .verification{width:420px;height:48px;margin: 0 auto;}
.luck .verification ul{width:100%;overflow:hidden;}
.luck .verification ul li{float:left;margin-right: 2%;width: 23%;height: 48px;background: #fff;}
.luck .verification ul li input{display:block;border:none;text-align:center;font-weight:bold;width: 100%;height: 48px;line-height: 48px;font-size: 25px;font-family: fantasy;}

CLS时装选项卡 梦幻星光

在这里插入图片描述
在这里插入图片描述

CSS

.bt{position: absolute;top: 1000px;width: 1137px;height: 738px;left: 50%;margin-left: -570px;z-index: 2;}
.bt .btn {position: absolute;top: 30px;left: 50%;margin-left: 484px;z-index: 2;overflow: hidden;width: 150px;}
.bt .btn a{display: block;width:134px;height: 70px;background-position-x:-135px;float: left;margin-right: 38px;margin-bottom: 20px;}
.bt .img{position:relative;top: 0px;}
.bt .img img{display: none;margin: 40px 0 0 120px;margin: 40px 0 0 140px;}
/*box1*/
.box1{height: 1556px;width: auto;position: absolute;left: 50%;margin-left: -583px;top: 1460px;}
.box1 .btn { position: absolute; top: 0; left: 138px; width: 858px; height: 113px; }
.box1 .btn a{display: block;width: 113px;height: 113px;background:url(images/btn.png) no-repeat;background-position-y:-145px;float: left;position: relative;top:0px;z-index:1;margin-left: 30px;}
.box1 .btn a.on {background-position-y: -11px !important;}
.box1 .img { width: 1586px; height: auto; position: absolute; left: 234px; margin-top: 212px; top: 0; }
.box1 .img img{display: none;}
.box1 .toggle{width: 1167px;overflow:hidden;position: absolute;top: 630px;left: 0;z-index:9999;}
.box1 .toggle span{width:54px;height:54px;background:url(images/btn_banner.png) no-repeat;display:block;cursor: pointer;}
.box1 .toggle span.prev{background-position:left top;float: left;}
.box1 .toggle span.next{background-position:right top;float: right;}
/*box2*/
.box2{top: 2906px;}
.box2 .btn a {display: block;width: 113px;height: 58px;background: url(images/tab_btn.png);float: left;margin-right: 38px;margin-bottom: 20px;background-position-x: -143px;}
.box2 .btn a.on {background-position-x: -10px;}

THML

<div class="box box1" data-num="6" data-p="x" data-animate="a-fadeinB" data-s="hover" data-imgUrl="images/p"><div class="toggle"><span class="prev"></span><span class="next"></span></div>
</div>
<div class="box box2 bt" data-num="3" data-position-y="-100" data-p="y" data-animate="a-bounceinR" data-s="click" data-imgUrl="images/pp"></div>

JS

<script type="text/javascript">
$(function() {tabbox(".box", ".box1");//选项卡一$('.box1 .btn a').each(function(i){$('.box1 .btn a').eq(i).css("background-position-x", i * -156-10);$(this).hover(function(){$(".box1 .img img").eq(i).addClass("on a-fadeinB").siblings().removeClass("on a-fadeinB")});});$(".box1 .img img").eq(0).addClass("on");$('.prev').click(function(){$(".box1 .img img.on").prev().addClass("on a-fadeinB").show().siblings().removeClass("on a-fadeinB").hide();$(".box1 .btn a.on").prev().addClass("on").siblings().removeClass("on");});$('.next').click(function(){$(".box1 .img img.on").next().addClass("on a-fadeinB").show().siblings().removeClass("on a-fadeinB").hide();$(".box1 .btn a.on").next().addClass("on").siblings().removeClass("on");});//选项卡二$('.box2 .btn a').each(function(i){if( i==0 ){$('.box2 .btn a').eq(0).css("background-position-y", -10)}if( i==1 ){$('.box2 .btn a').eq(1).css("background-position-y", -86)}if( i==2 ){$('.box2 .btn a').eq(2).css("background-position-y", -159)}});})
function tabbox( i , c ){var box1 = $(c),btn = box1.find('.btn a'),img = box1.find('.img img'),num1 = box1.attr('data-num');var box = $(i);box.each(function(index,evet){var num = $(evet).attr('data-num');var box2 = $(evet)console.log("img个数"+num+""+box2+"");name(num,box2);});box.each(function(index,evet){var bt = $(evet).find('a');var positionX = $(evet).attr('data-position-x');var positionY = $(evet).attr('data-position-y');var dp = $(evet).attr('data-p');var dn = $(evet).attr('data-animate');var ds = $(evet).attr('data-s');if( dp == "x" ){ m(bt,positionX,0,dn,ds) } m(bt,positionY,1,dn,ds);if( index == 0 ){m(bt,positionX,0,dn,ds)}if( index == 1 ){m(bt,positionX,0,dn)}});box.each(function(index,evet){var data_imgUrl=box.eq(index).attr('data-imgUrl');var img1 = box.eq(index).find(".img").find("img")addH(img1,data_imgUrl)if( index>0 ){addH(img1,'',data_imgUrl)}});function name(n,name) {var btnArr= '', imgArr= '';for(var i = 1; i <= n ; i ++ ){btnArr += '<a href="javascript:;" class="top'+i+'"></a>'imgArr += '<img src="" />'}name.append('<div class="btn">'+btnArr+'</div><div class="img">'+imgArr+'</div>')}function addH(img,imgUrl,imgUrl2){img.each(function(index){if( index < 9 ){img.eq(index).attr('src',''+imgUrl+''+(index+1)+'.png');}else{img.eq(index).attr('src',''+imgUrl+''+(index+1)+'.png');}if( imgUrl == "" ){img.eq(index).attr('src',''+imgUrl2+''+(index+1)+'.png');}})}function m( b , p , j , c , s ){b.each(function(i){b.eq(0).addClass("on");b.parent().siblings(".img").find('img').eq(0).show()if( j == 0 ){b.eq(i).css( "background-position-x" , i*p );}if( j ==1 ){b.eq(i).css( "background-position-y" , i*p );}$(this).on( s ,function(){b.stop(true).eq(i).addClass('on').siblings().removeClass('on');b.parent().siblings(".img").find('img').stop(true).eq(i).show(0).addClass(c).siblings().hide(0).removeClass(c);})})}
}
</script>

http://www.ppmy.cn/news/284592.html

相关文章

”抽奖“代码

我根据所学的知识写了一个代码出来&#xff0c;保存一下&#xff01; package winter_vacation;import java.awt.Dimension; import java.awt.Font; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;import javax.swing…

转盘抽奖活动

1、页面布局&#xff08;转盘按钮&#xff09; 按钮放在转盘中间的位置 <view class"mian-middle-middle animated fadeInUp"><!-- 转盘 --><view class"rotaryTable" :style"{transform:rotateZ(degdeg)}"><image class…

评论区抽奖程序

文章目录 评论区抽奖程序1. 思路2. 准备3. 实现爬虫爬取数据4. 随机数模块抽取5. main函数6. 大功告成 评论区抽奖程序 这个小程序很简陋&#xff0c;没什么难度 1. 思路 使用爬虫爬取评论区数据随机抽取一名幸运用户 思路很简单&#xff0c;实现也很简单 2. 准备 新建一个…

CSP 复赛爆零指南

目录 写在前面的话爆零原因诊断1.文件夹建立错误2.没有加文件读写3.文件夹命名不规范3.头文件错误4.注释5.空间限制6.测试环境不同 尾声 写在前面的话 感谢Mars-OJ勰码教育提供的数据和图片 CSP爆零大家应该都不陌生 当然啦&#xff0c;没人想爆零 以下是两场CSP模拟的爆零统计…

CSP——收集卡牌

题目描述 小林在玩一个抽卡游戏&#xff0c;其中有 n 种不同的卡牌&#xff0c;编号为 1 到 n。每一次抽卡&#xff0c;她获得第 i 种卡牌的概率为 pi。如果这张卡牌之前已经获得过了&#xff0c;就会转化为一枚硬币。可以用 k 枚硬币交换一张没有获得过的卡。 小林会一直抽卡…

白嫖steam游戏,我是专业的

做自己喜欢的爬虫&#xff1a;steam白嫖 闲的无聊做了一期steam白嫖的文章。 有了它&#xff0c;以后就再也不会担心游戏没有白嫖到了。 steam近期免费&#xff1a;https://steamdb.info/upcoming/free/ 特地做出来个exe可执行文件给大家用&#xff0c;免得电脑没有python的人…

CSOL 2014 搭建 架设教程 阿里云 腾讯轻量云等通用

第一步、下载CSOL 2014 公开端 链接&#xff1a;https://pan.baidu.com/s/1MCMoSAP_8-neSoDfIMrQbg?pwdmmsy 提取码&#xff1a;mmsy 下载完毕后解压资源文件 并安装VC运行库 将所有资源文件 放本地一份 放服务器一份 第二步、服务器开放游戏所需端口 1.TCP 30001 2.UDP…

csol永恒python评测_反恐精英Online情报中心 - CSOL - 官方网站 - 世纪天成游戏 - 火爆战场真实体验!...

2秒自动充能超强神器&#xff1f;“撼宇碎星”闪耀登场&#xff01; 2018年01月24日 分享到&#xff1a; 腾讯微博 新浪微博 qq空间要说独创性与实用性并存&#xff0c;兼具一年仅出一把的稀有性&#xff0c;《反恐精英Online》中的“年度神器”不失为最佳代表。而在1月24日&am…

csol控制台+去黑雾

去黑雾控制台指令&#xff0c;上游戏后呼出控制台&#xff0c;输入brightness 1000&#xff0c;然后敲回车。进入一个房间后点我的信息&#xff0c;点密码箱按呼出控制台&#xff0c;输入brightness 1000敲回车。 在游戏中按“&#xff5e;”打开控制台&#xff0c;输入命令即…

CSOL控制台与FPS优化命令大全

下面的控制台命令会让你游戏FPS达到不可思议的地步! 在CSOL图标找到属性&#xff0c;然后再快捷方式找到目标&#xff0c;在目标后面加“ -CONSOLE”。-的前面必须加一个空格&#xff0c;不然起不到优化效果。 改变CS游戏中的帧数&#xff0c;也就是说游戏里面的“FPS”&…

SpringCloud-Gateway的详细讲解以及完整的示意图和代码-下

目录 二说Gateway 路由配置 创建com/springcloud/config/GateWayRoutesConfig.java 测试 动态路由 示意图 代码实现 测试 注意事项和细节 代码 Predicate/断言 基本介绍 Route Predicate Factories 解读 Route Predicate 实例 After Route Predicate 测试 B…

HDU3440(差分约束+SPFA算法)

题意&#xff1a;两栋房子之间的最大距离为D&#xff0c;也就是A-B<D,现在求出最矮和最高房子之间的最大距离 思路&#xff1a;差分约束SPFA算法&#xff1a; 当问题可以转化为形如一组 xi‑x’i<yi 或一组 xi‑x’i>yi &#xff0c;求任一满足的可行解的问题时&#…

HDU 3440 House Man差分约束

题意&#xff1a;在水平坐标轴上给n座房子&#xff0c;房子与相邻房子距离至少为1&#xff0c;房子的高度各不相同&#xff0c; 从最低的房子开始&#xff0c; 每次跳到更高的房子&#xff0c; 跳n-1次最能跳到最高的房子了&#xff0c;但是每次跳跃的距离不能超过d。将这些房子…

HDU--3440(差分约束)

2015-01-10 15:06:21 思路&#xff1a;很好的一道差分约束题&#xff0c;拥有灵活的建图。 由于题目求的是从起点&#xff08;最矮的房子&#xff09;到终点&#xff08;最高的房子&#xff09;的有向距离最大值&#xff0c;那么在建图以及跑最短路时要特别注意方向。 首先按照…

hdu3440House Man差分约束系统

题意&#xff1a;给个n个不同的高度&#xff0c;一个人从最低点跳跃&#xff0c;每次可以跳到第一个比它高的位置&#xff0c;最后跳到最高点&#xff0c;然后每次最多可以跳的距离为D&#xff0c;而且在跳跃时可以在不改变给定顺序的情况下移动这些高度&#xff0c;使得最后起…

HDU-3440 House Man

本来是一道普通的差分约束题&#xff0c;结果特么的写完连样例都过不了。。。 后来才在差分约束的百度百科中现这段话&#xff1a; 1.如果将源点到各点的距离初始化为0&#xff0c;最终求出的最短路满足 它们之间相互最接近了&#xff1b; 2.如果将源点到各点的距离初始化为INF…

[hdu3440]House Man

House Man 题解 很经典的一道差分约束的题目。 我们现在有两个约束条件&#xff1a; 相邻两点的距离大于1。两个高度紧挨着的点的距离不超过d。(注意&#xff0c;两个高度相邻的点之间如果有一个更高的他会直接跳过这个更高的&#xff0c;一脸懵*) 于是我们就得到了两个约…

bzoj3440:传球游戏

Pre 真的毒瘤题&#xff0c;昨天晚上以为是一道简单的图论题&#xff0c;今天中午没有调出来&#xff0c;晚上我选择看题解发现漏了一种情况。 于是 就花了一晚上调程序。 现在时间\(21:31\) Solution 拆点是很容易想到的。 拓扑(\(Tarjan\)应该也可以,没试过)找环。 之后分类。…

hdu 3440(差分约束系统)

hdu 3440 &#xff08;1&#xff09;题意&#xff1a; 一个人从高度较低的房子跳到高度较高的房子&#xff0c;他可以跳跃的水平最远距离为D&#xff0c; 他只能从左向右跳&#xff0c;房子的编号是从1~n&#xff0c;从左向右编号。 两个房子之间只要水平距离小于D&#xff…

hdu 3440差分约束

http://acm.hdu.edu.cn/showproblem.php?pid3440 Problem Description In Fuzhou, there is a crazy super man. He can’t fly, but he could jump from housetop to housetop. Today he plans to use N houses to hone his house hopping skills. He will start at the sh…