发展到石山淘金这种技术真的不容易
时间：2023-03-28 14:38:34
HTML
当一个人开始回首往事的时候，说明他的日子不好过……不排除是在钓鱼。束手无策的我（代码），竟然做出这么精美的H5（纯属自我推销），点我评论扫一扫，言归正传。项目简介：某地产公司拟引流，策划为门票引流活动开发的有趣H5技术简介：css、jq、html（我小时候才知道jq，真是惭愧），虽然是jq开发的，也是单页（真的不是）应用，因为我只用一个页面控制各种点击显示和隐藏，真的很容易让自己发呆Configuration，介绍在head(function()){varphoneWidth=parseInt(window.screen.width);varphoneScale=phoneWidth/640;varua=navigator.userAgent;if(/Android(\d+.\d+)/.test(ua)){varversion=parseFloat(RegExp.$1);if(version>2.3){document.write('');}else{document.write('');}}else{document.write('');}})()整体布局绝对定位，左右居中，上下根据手机适配。相比js适配，我推荐【另一种方式ofwriting]forsmallprojects](https://juejin.cn/post/7132314291281068040)html{font-size:13.3333vw;}/*媒体查询考虑了电脑状态下的预览*/@mediascreenand(min-width:750px){html{font-size:100px;}}/*使用*/div{width:1rem;/*1rem=100px,相应地转换*/}2.当第一屏加载时，项目根据图片资源数量统一封装一个load首屏进度动画，这里压缩js//importjs
//加载动画
...body //调用统一的加载样式和项目的样式不匹配，所以加#loaderdiv，写个加载动画满意的，这里就不秀丑了，因为我用了gif（一定要设计的牛逼，给你想要的哈哈）3.致命点击开关选1选2选3选择4选择5选择...，返回。..再选择，然后return...,display:none,block,hide,show...谁告诉我当时只知道jq，哈哈哈哈知识点来了，重温几个jq方法1.siblings()返回被选元素的所有兄弟元素$('.Sex').on('click',function(){$(this).addClass('N_choose').siblings('.Sex').removeClass('N_choose')$(this).css('opacity','1').siblings('.Sex').css('opacity','0.4')})选择性别时，两个div都有classNamed性，点击将选中的类名添加到当前元素，同时让其兄弟元素移除选中的类，一个特别有用的方法2.attr()设置或返回选中元素的属性和值varbgimg=$('.canvas_wrap.bg').attr('data-url')在这里获取元素携带的url3。hasClass()检查选中的元素是否包含指定的类名$(".b_rqq").hasClass("show")这个用来判断元素是否已经存在4.合成图像1.声明两个全局变量，一个是用于存储生成图像前选择的图像数组，另一个用于存储合成后的图像数组vardata=[],base64=[];2.选择自动编辑$('.zdBtn').on('点击',function(){varzdperson=$('.p_four.canvas_wrap.person').attr('data-url')varbgimg=$('.p_four.canvas_wrap.bg').attr('data-url')url')数据=[bgimg,zdperson]$('#Img').siblings().hide()$('.p_two').hide()$('.p_four').show()hecheng()})3.选择DIY后台全局变量whichBg获取点击的图片，用于显示chooseBg()，控制页面显示相应图片$('.zd_bg').on('click',function(){whichBg=$(this).attr('bg-id')chooseBg(function(){varzdperson=$('.canvas_wrap.person').attr('data-url')varbgimg=$('.canvas_wrap.bg').attr('data-url')data=[bgimg,zdperson]hecheng()})})functionchooseBg(fn){$('.p_four.canvas_wrap.bg').css({'background':'url('images/bgimg/zdbg'+whichBg+'.png','background-size':'100%100%'})$('.p_four.canvas_wrap.bg').attr('data-url','images/bgimg/zdbg'+whichBg+'.png')fn()}4.调用draw()方法合成图片赋值给#Img元素，然后使用#Img保存图片函数hecheng(){绘制(函数(){$('#Img').attr('src',''+base64[0]+'');})}5.canvas合成图片，if判断多张图片合成函数draw(fn){v??arc=document.createElement('canvas'),ctx=c.getContext('2d'),len=data.length;c.width=640;c.height=1080;ctx.rect(0,0,c.width,c.height);functiondrawing(n){if(n
