前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JQ+CSS实现简单文字重组

JQ+CSS实现简单文字重组

作者头像
WindCoder
发布2018-09-20 10:37:01
6200
发布2018-09-20 10:37:01
举报
文章被收录于专栏:WindCoderWindCoder

这个主要是需要美工把需要重组的笔画切好,目前只能将项目中部分截出分享给大家了。

注:$("#xixi").css()中top、left等属性不可有小数点,不然会出现无法改变属性的效果。

主要代码

主要代码

代码语言:javascript
复制
init.sec02 = function(){
				$('#sec02_baorong').hide();
				$('#sec02_guangkuo').hide();
				$('#sec02_renxing').hide();
				$('#sec02_zhuizhu').hide();
				$('#sec02_yanxu').hide();
				$('#sec02_jiating').hide();
				$('#sec02_jiantou').hide();

				/*
				*进入
				*/
				clearTimeout(init.sec02_baorongInTimeout);
				init.sec02_baorongInTimeout = setTimeout(function(){
					$('#sec02_bao').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
					$('#sec02_rongShang').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec02_rongXia').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec02_baorong').show();
					$('#sec02_bao').show();
					$('#sec02_rongXia').show();
				},1000);
				clearTimeout(init.sec02_zhuizhuInTimeout);
				init.sec02_zhuizhuInTimeout = setTimeout(function(){
					$('#sec02_guangkuo').hide();
					$('#sec02_zhuizhu').show();

					$('#sec02_bao').hide();
					$('#sec02_rongXia').hide();
					$('#sec02_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"0.2"});
					$('#sec02_zhui').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
					$('#sec02_zhuzuo').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec02_zhuyou').css({"top": "47%","left":" 15%","width":"initial","margin":"0 auto"});
					$('#sec02_zhui').show();
					$('#sec02_zhuzuo').show();
					$('#sec02_zhuyou').show();
				},3000);

				clearTimeout(init.sec02_guangkuoInTimeout);
				init.sec02_guangkuoInTimeout = setTimeout(function(){
					$('#sec02_guangkuo').show();
					$('#sec02_zhui').hide();
					$('#sec02_zhuzuo').hide();
					$('#sec02_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"0.2"});
					var sec02_guangall={top:"10%",left:"32.5%",width:"initial"};
					$('#sec02_guang').css(sec02_guangall);
					$('#sec02_guangkuang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec02_kuo').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec02_guang').show();
					$('#sec02_guangkuang').show();
					$('#sec02_kuo').show();
				},5000);
				clearTimeout(init.sec02_yanxuInTimeout);
				init.sec02_yanxuInTimeout = setTimeout(function(){
					$('#sec02_yanxu').show();
					$('#sec02_guangkuang').hide();
					$('#sec02_kuo').hide();
					$('#sec02_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"0.2"});
					$('#sec02_yanzuo').css({"top": "16.5%","left": "7%","width":"initial","margin":"0 auto"});
					$('#sec02_yanyou').css({"top": "10%","left":"6%","width":"19.5%","width":"initial","margin":"0 auto"});
					$('#sec02_xu').css({"top": "45%","left":" 6%","width":" 19.5%","width":"initial","margin":"0 auto"});
					$('#sec02_yanzuo').show();
					$('#sec02_yanyou').show();
					$('#sec02_xu').show();
				},7000);
				clearTimeout(init.sec02_renxingInTimeout);
				init.sec02_renxingInTimeout = setTimeout(function(){
					$('#sec02_renxing').show();
					$('#sec02_yanyou').hide();
					$('#sec02_xu').hide();
					$('#sec02_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"0.2"});

					$('#sec02_renyou').css({"top": "14%","left": "22。5%","width":"initial","margin":"0 auto"});
					$('#sec02_renzuo').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec02_xing').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec02_renzuo').show();
					$('#sec02_renyou').show();
					$('#sec02_xing').show();
				},9000);
				/*
				*变化
				*/

				clearTimeout(init.sec02_chongzuTimeout);
				init.sec02_chongzuTimeout = setTimeout(function(){
					$('#sec02_renzuo').hide();
					$('#sec02_xing').hide();
					$('#sec02_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"1"});
					$('#sec02_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"1"});
					$('#sec02_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"1"});
					$('#sec02_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"1"});
					$('#sec02_renyou').css({"top": "55%","left": "16%","width":"14%","margin":"0 auto","opacity":"1"});
					$('#sec02_jiating').show();
					$('#sec02_jiantou').show();
				},10000);
			}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 主要代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档