-
移动端项目，采用Html5作为项目的结构层 分析网页呈现形式，直接采用Css3完成网页的表现层 特效分析：采用Css3完成主要特效，采用JAVAScript控制交互 背景音乐直接采取JAVAScript控制Audio的API进行控制 直接采用原生态的JAVAScripr控制Css实现翻页效果，放弃前端框架和类库查看全部
-
手机端打开方法：本地配置好WampServer服务器后，（cmd）ipconfig查询无线网卡的Ipv4的IP地址，可以使用连接同一无线网的设备(相当于处于同一局域网内)连接本地的服务器，达到测试的效果。在手机输入IP后面加文件地址，就可以访问； 例如到脑端地址为http://localhost/heka/则手机输入192.168.123.52/heka/查看全部
-
<!-- 如果IE浏览器安装了GCF(chrome插件)，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 格式化探索，防止iphone6将数字2016解析为电话号码 --> <meta name="format-detection" content="telephone=false"> <!-- 视口，设置视口宽度等于设备宽度；设置初始缩放、最小缩放、最大缩放都为1；设置用户不能控制页面缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">查看全部
-
console.log("网页可见区域宽：" + document.body.clientWidth); console.log("网页可见区域高：" + document.body.clientHeight); console.log("网页可见区域宽：" + document.body.offsetWidth );（包括边线的宽） console.log("网页可见区域高：" + document.body.offsetHeight);（包括边线的宽） console.log("网页正文全文宽：" + document.body.scrollWidth); console.log("网页正文全文高：" + document.body.scrollHeight); console.log("网页被卷去的高：" + document.body.scrollTop); console.log("网页被卷去的左：" + document.body.scrollLeft); console.log("网页正文部分上：" + window.screenTop); console.log("网页正文部分左：" + window.screenLeft); console.log("屏幕分辨率的高：" + window.screen.height); console.log("屏幕分辨率的宽：" + window.screen.width); console.log("屏幕可用工作区高度：" + window.screen.availHeight); console.log("屏幕可用工作区宽度：" + window.screen.availWidth);查看全部
-
如果两个页面之间需要切换，可以加入具有p2_bg_loading bg两个类的div ，使第二页出现淡入的效果，代码如下 #page2 > .p2_bg_loading { z-index: 4; background: #ef1639; -webkit-animation: p2_bg_loading 1s linear forwards; animation: p2_bg_loading 1s linear forwards; } @keyframes p2_bg_loading { 0% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes p2_bg_loading { 0% {opacity: 1;} 100% {opacity: 0;} }查看全部
-
在body属性中设置overflow:hidden; 防止溢出有滚动条出现。 js函数在上一节已经做过笔记，此处只记录fadeIn和fadeOut两个类 #page2 { display: block; -webkit-transition: .5s; transition: .5s; } #page2.fadeOut { opacity: .3; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #page3 { display: none; -webkit-transition: .5s; transition: .5s; } #page3.fadeIn{ -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }查看全部
-
click事件 有300毫秒的延迟，最好用touchstart代替。昨天在慕课网学到的知识，今天用到了啊，哈哈 music.addEventListener("toucherstart",function(event)){ if(audio.paused){ audio.play(); this.setAttribute("class","play"); }else{ audio.pause(); this.setAtribute("class",""); }; },false);查看全部
-
语法element.addEventListener(event, function, useCapture) event必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 function必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 useCapture可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值:true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行查看全部
-
window.onload=function(){ var music=document.getElementById("music"); var audio=document.getElementsByTagName("audio")[0]; music.onclick=function(){ if(audio.paused){ audio.play(); music.setAttribute('class',"play"); // music.style.animationPlayState="running"; // music.style.webkitanimationPlayState="running"; }else{ audio.pause(); music.setAttribute("class",""); // music.style.animationPlayState="paused"; // music.style.webkitanimationPlayState="paused"; } }; }; 备注上面的代码是播放暂停回归最开始位置； 而备注代码是播放暂停在原位置；但是兼容很有问题，只有安卓4.0和ios6才会实现，当把animation换成webkitAnimation时，苹果才可以全部兼容，但是安卓还是无能为力查看全部
-
<audio autoplay="true"> <soure src="audio/happynewyear.mp3" type="audio/mpeg"> </audio> 插入背景音乐注意： Internet Explorer 8 及更早IE版本不支持 <video> 元素。查看全部
-
美化css代码 建议装插件CSS Format，然后右键点compact查看全部
-
div相对设备居中：{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:; width:; }查看全部
-
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。查看全部
-
DIV所占区域大小（宽度举例）= 宽（width）+内边距(pading)+边框(border大小)+外边距(margin) box-sizing：取值 1.content-box： padding和border不被包含在定义的width和height之内 2.border-box： padding和border被包含在定义的width和height之内查看全部
-
性能优化分析 1项目为移动端，尽可能简化结构层标签 2尽可能少用图片，尽量直接使用css3控制标签完成图片效果 3尽可能减少文件大小，压缩图片至损最小化。 4减少服务器请求次数，用原生态j代替zepto等前端框架查看全部
举报
0/150
提交
取消