Web笔记 ·

JQ+CSS实现简单文字重组

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

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

主要代码

主要代码

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

参与评论

  • 笑笑笑

    演示,滑不动。。触屏用的吧?

    5年前 (2015-04-21)
    回复
    回复笑笑笑
  • 汐枫

    可以滑动啊,不过确实主要是在手机上用的

    5年前 (2015-04-21)
    回复
    回复汐枫
  • wys.me

    我也想着做个宣传动画,挂在head

    5年前 (2015-04-21)
    回复
    回复wys.me
  • 汐枫

    那就去玩呗,感觉有些没美编有时还真不太容易实现。我发的这些主要都是用在微信那边的

    5年前 (2015-04-21)
    回复
    回复汐枫