CLS封印者选项卡

最新推荐文章于 2022-09-28 19:00:27 发布

@阿猫阿狗~

最新推荐文章于 2022-09-28 19:00:27 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/qq_25741071/article/details/106739729

版权

文章目录

在这里插入图片描述

HTML部分


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="robots" content="all" />
<meta name="author" content="CLSteam" />
<meta charset="utf-8"/>
<link rel="shortcut icon" href="https://cls.tiancity.com/favicon.ico" />
<meta name="keywords" content="封印者，动漫游戏，动作游戏，二次元，刀剑神域，异 次元世界，超能力，DNF，艾尔之光，疾风之刃，closers，人气新游，新游，热门游戏，幻想神域，ACG，正太，御姐，宅文化，动画，漫画" />
<meta name="description" content='《封印者》是一款集动漫画风、轻小说剧情、极速战斗于一体的二次元ACG向游戏。绝赞暴走流战斗体验，画面绚丽炸裂显卡！还想prprpr粉毛萝莉和可爱正太？即刻穿越二次元！' />
<title>《封印者》官方网站</title>
<link rel="dns-prefetch" href="https://img1.tiancitycdn.com/cls" />
<link rel="dns-prefetch" href="https://cls.tiancity.com/" />
<link rel="dns-prefetch" href="http://evt.tiancity.com" />
<link rel="stylesheet" type="text/css" href="https://img1.tiancitycdn.com/cls/event/2019/1017Fashion/css/animation.css">
<style>
body{background:#000;}
/*bt*/
.bt{position: absolute;top: 1000px;width: 1157px;height: 548px;left: 50%;margin-left: -570px;z-index: 2;}
.bt .btn {position: absolute;top: -30px;left: 50%;margin-left: -606px;z-index: 2;overflow: hidden;width: 150px;}
.bt .btn a{display: block;width:134px;height: 70px;background:url(https://img1.tiancitycdn.com/cls/event/2020/0424fkittyfashion/images/tab_btn.png);background-position-x:-135px;float: left;margin-right: 38px;margin-bottom: 20px;}
.bt .img{position:relative;top: 0px;}
.bt .img img{display: none;}
/*box1*/
.box1{height: 1556px;width: 1586px;position: absolute;left: 50%;margin-left: -583px;}
.box1 .btn{position: absolute;top: 540px;left:-2px;width: 1320px;margin:0 auto;padding-bottom:10px;}
.box1 .btn a{display: block;width: 165px;height:243px;background:url(https://img1.tiancitycdn.com/cls/event/2020/0424fkittyfashion/images/nav_bg.png) no-repeat;background-position-y:0px;float: left;position: relative;top:0px;z-index:1;margin-left: -54px;}
.box1 .btn a.on {top: -50px;left: 10px;background-position-y: -243px !important;}
.box1 .img{width: 1586px;height:1556px;position:relative;left:50%;margin-left:-806px;margin-top: 0;}
.box1 .img img{display: none;width: 1000px;}
/*box2*/
.box2 .btn a.on{background-position-x:0px !important;}
/*box3*/
.box3{top: 1700px;}
.box3 .btn a {display: block;width: 70px;height: 82px;background: url(https://img1.tiancitycdn.com/cls/event/2020/0527fashion/images/nav0.png);float: left;margin-right: 38px;margin-bottom: 20px;background-position-x: -82px;}
.box3 .btn a.on {background-position-x: 0px !important;width: 82px;}
/*box4*/
.box4{top: 2500px;}
.box4 .btn {position: absolute;top: 30px;left: 50%;margin-left: -136px;z-index: 2;overflow: hidden;width: 280px;}
.box4 .btn a {display: block;width: 92px;height: 80px;background: url(https://img1.tiancitycdn.com/cls/event/2020/0527fashion/images/nav2.png);background-position-y: -85px !important;float: left;margin-right: 38px;}
.box4 .btn a.on {background-position-y: 0 !important;height: 82px;}
/*box5*/
.box5{top: 3000px;}
.box5{position:absolute;  left:0%; margin-left:0px; width:1350px; height:1300px;}
.box5 .btn{position:absolute;margin-top:504px; left:50%; margin-left:-476px; width:600px; z-index:1;}
.box5 .btn a{display: block; width:185px; height:185px; background:url(https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/b_btn.png) no-repeat 2px 0px; float: left; margin:0px 7px 16px 7px;}
.box5 .btn a.on{background-position:-192px 0px;}
.box5 .btn a i{ display: block; width:185px; height:185px; background:url(https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/b_img.png) no-repeat; position:relative; top:0px; left:0px;}
.box5 .btn a.top1 i{background-position:2px 0px;}
.box5 .btn a.top2 i{background-position:-193px 0px;}
.box5 .btn a.top3 i{background-position:-386px 0px;}
.box5 .btn a.top4 i{background-position:2px -198px;}
.box5 .btn a.top5 i{background-position:-193px -198px;}
.box5 .btn a.top6 i{background-position:-386px -198px;}
.box5 .img{position:relative; left:50%; margin-left:10px; width:848px; height:1305px;}
.box5 .img img{display: none;}
/*box6*/
.box6{top:4200px;}
.box6{width:1139px; height:697px; position:absolute; left:50%; margin-left:-566px; margin-top:0px;}
.box6 .btn{position:absolute; top:328px; left:-190px; width:130px; z-index:2;}
.box6 .btn a{display: block; width:130px; height:50px; background:url(https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/m_btn.png)no-repeat;position:relative; text-indent:-999em; margin-bottom:30px;}
.box6 .btn a{background-position-y:0px;}
.box6 .btn .top1{ left:0px;}
.box6 .btn .top2{ left:-18px;}
.box6 .btn .top3{ left:-35px;}
.box6 .btn a.on{background-position-x:-133px !important;}
.box6 .img{position:relative; top:0px; height:697px; overflow: hidden;}
.box6 .img img{display: none;}

.box7{top:4930px;}
.box7{width:1139px; height:697px; position:absolute; left:50%; margin-left:-566px; margin-top:0px;}
.box7 .btn{position:absolute; top:328px; left:-190px; width:130px; z-index:2;}
.box7 .btn a{display: block; width:130px; height:50px; background:url(https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/m_btn.png)no-repeat;position:relative; text-indent:-999em; margin-bottom:30px;}
.box7 .btn a{background-position-y:0px;}
.box7 .btn .top1{ left:0px;}
.box7 .btn .top2{ left:-18px;}
.box7 .btn .top3{ left:-35px;}
.box7 .btn a.on{background-position-x:-133px !important;}
.box7 .img{position:relative; top:0px; height:697px; overflow: hidden;}
.box7 .img img{display: none;}
</style>
</head>
<body>
<div class="wrapper">
    <div class="section">
        <div class="container">
		<div class="box box1" data-num="11" data-position-x="-167" data-p="x" data-animate="a-fadeinB" data-s="hover" data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0424fkittyfashion/images/pople_"></div>
		<div class="box box2 bt" data-num="3" data-position-y="-80" data-p="y" data-animate="a-fadein" data-s="hover" data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0424fkittyfashion/images/pic"></div>
		<div class="box box3 bt" data-num="3" data-position-y="-100" data-p="y" data-animate="a-bounceinR" data-s="click" data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0527fashion/images/a"></div>
		<div class="box box4 bt" data-num="2" data-position-x="-100" data-p="x" data-animate="a-bounceinL" data-s="hover"data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0527fashion/images/c"></div>
		<div class="box box5 bt" data-num="6" data-animate="a-bounce" data-s="hover" data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/img_"></div>
		<div class="box box6" data-num="3" data-position-y="-87" data-p="y" data-animate="a-bounceinL" data-s="hover" data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/m_img"></div>
		<div class="box box7" data-num="3" data-position-y="-87" data-p="y" data-animate="a-bounceinL" data-s="click" data-imgUrl="https://img1.tiancitycdn.com/cls/event/2020/0611fashion/images/m_img"></div>
	  </div>
    </div>
</div>
<script type="text/javascript" src="https://image.tiancity.com/common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	//设置第一个 box 的 class
	tabbox(".box",".box1");
	$('.box5 .btn a').each(function(w,f){
	    $(this).append('<i></i>')
	});
})
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 中切换的个数
	box.each(function(index,evet){
		var num = $(evet).attr('data-num');
		var box2 = $(evet)
		console.log("img个数"+num+""+box2+"");
		name(num,box2);
	});
	//设置图片的 background-position
	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)
		}
	});
	//添加 box 中 .btn 按钮容器 和 .img图片容器
	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>')
	}
	//addH 设置图片地址 当图片后缀大于09时，第10个个位补0
	//遍历【box img】中的图片，
	function addH(img,imgUrl,imgUrl2){
		img.each(function(index){
			//设置图片后缀大于10的处理
			if( index < 9 ){
				img.eq(index).attr('src',''+imgUrl+'0'+(index+1)+'.png');
			}else{
				img.eq(index).attr('src',''+imgUrl+''+(index+1)+'.png');
			}
			//imgUrl 图片后缀是 01.png，imgUrl2 图片后缀是 1.png
			if( imgUrl == "" ){
				img.eq(index).attr('src',''+imgUrl2+''+(index+1)+'.png');
			}
		})
	}
	//设置切换按钮的高亮 on ，设置按钮背景图【雪碧图】background-position  的数值
	//b【box】 , p【background-position的值】 , j【当前元素的下标】 ,
	//c【boxfrist】 , s【设置 click 事件或者 hover 事件】
	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>
</body>
</html>

JS部分【去除注释】

<script type="text/javascript">
$(function() {
	tabbox(".box", ".box1");
	$('.box5 .btn a').each(function(w, f) {
		$(this).append('<i></i>')
	})
})
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 + '0' + (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>

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;}

HTML

<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>

<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>

@阿猫阿狗~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CLS封印者选项卡

<!DOCTYPE html><html lang="en"><head><meta name="robots" content="all" /><meta name="author" content="CLSteam" /><meta charset="utf-8"/><link rel="shortcut icon" href="https://cls.tiancity.com/favicon.ico" />
复制链接

扫一扫