-
从建站到发布网站
如何编辑网站我就不说了，大家都会的，我主要是讲下如何将网站发布到线上这一系列的步骤(PS：数据库什么的都不考虑，上传最简单的静态页面，其他的留给大家探索)。 第一步：申请空间 我为了给大家演示，我就找了一个免费的空间--主机屋（PS:申请怎样空间看个人需求，平常练练玩玩就申请一个免费的就好，免费的有一个不好的缺点，就是每个月要来网站申请延期，这个比较麻烦的。），其他的知道过程就能举一反三了，进入主机屋：http://www.zhujiwu.com/ 下拉就能看下图信息，按箭头指的方向点击，我就选择了第一个演示，如下图。 点击查看详情看到的页面，点击立即开通，如下图。 之后点击初......
-
最快的Web开发IDE——HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。 从Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web编程的IDE已经更换了几批。HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提......
-
css3滤镜总结
css3有一些滤镜挺有意思的，也很简单，遂学习一下，但一般会用得比较少，我们都直接切图了。 这些滤镜主要都是都图片效果的处理，样式属性值中一般使用一个数值或数值百分比作为参数。我们用两张照片做对比看滤镜的效果。 1、grayscale(灰度滤镜) 彩色图像转为灰度图像 <img src="1.jpg"> <img src="1.jpg" class="grayscale"> .grayscale{ filter:grayscale(100%); -webkit-filter......
-
一个简单的卡片效果
具体效果点这里：http://xyq.test.nie.163.com/test/pics/index.html 一个简单的卡片切换效果，主要有以下功能 有4个切换的方向 动态加载数据 CSS3控制动画效果 动画的考虑 一开始是打算通过js动态地计算每个卡片的切换坐标以及动画移动的距离，无奈其计算量的复杂和繁琐，最终放弃了这一方案。 细细观察，你会发现其实每个卡片的位移以及切换出去的效果是一样的，所以完全可以固定写好每个卡片的初始样式，然后再通过js去动态地改变样式名。 所以，很愉快地就这样开始了样式的编写。 //通用 .poker-item { ......
-
chrome工具优化的学习小结
前言 这个月一直不知道写什么，说明没认真学习啊~但是之前花了不少时间去维护chrome检查工具，没点总结，总感觉很浪费那段时间。这里把过程中遇到的问题做个小结吧。 先交代下chrome检查工具的背景：是一个内部使用，用来检测页面信息的chrome插件工具，检测的功能包括：页面的基本信息（比如一些seo信息、meta标签、加载时间）、检测某些特殊代码进行分析，检测图片的大小、检测页面发起的某些请求进行分析等等。通过插件工具来达到快速检测页面的某些规范信息，方便前端、编辑和qa直观快速的校验页面的一些信息。工具截图如下： chrome插件相关 因为本人只是负责对已有的插件进行优化升级......
-
重温css的选择器
本文主要和大家重温一下css选择器中的一些常用符号的使用，例如“+、~、^、$、>、*”等的使用！ css选择器之特殊符号 1、>(大于号) 大于号代表选择子元素，这个我们经常用，值得注意的是 div>span 和div span 的区别 这2个都是选择子元素，但是 div>span 只选择某个元素的子元素。例如如下： <div>This is <span class="aa">very</span > <span>very</span> important.</div&......
-
深入了解DOM对象
DOM是文档对象模型(Document Object Model)是基于浏览器编程的一套API接口，W3C出台的标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器与标准最接近。 通过 DOM，您可访问 HTML 文档中的每个节点。 查找元素 1、直接查找 getElementById(id) //获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) //获取带有指定标签名的对象的集合 getElementsByClassName //获取所有指定类名的元素 getA......
-
ES6实战——字符串
在 ES6 中，标准库升级了很多，在这些变化中有许多新的对于字符串的函数，比如 .includes() 和 .repeat()。 .includes( ) var string = 'food'; var substring = 'foo'; console.log(string.indexOf(substring) > -1); // true 之前我们使用 indexOf() 函数的返回值是否 >-1 来判断字符串是否包含某些字符串，现在我们更简单地使用 .includes() 来返回一个布尔值来判断： const string = 'food'; const ......
-
HTML5的history API和浏览器历史记录管理
之前的天下手游移动官网还有一个功能就是左右切换页面内容时 功能介绍 history的HTML5 API可以更改当前页面的url但是不刷新页面，同时将路径记录到历史页面中，可通过浏览器后退按钮来返回到上一状态。这样可以轻松帮我们实现在ajax动态局部刷新页面后，通过后退按钮来回来前一状态，而保证页面不跳转。 API 1、存储当前历史记录点 window.history.pushState(stateObj, title, url) 三个参数： stateObj——一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null......
-
#ThreeJS学习笔记( 二)——导入外部模型
外部模型格式 Threejs支持了许多格式的3D模型导入，包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。 这里主要讲解一下obj模型的导入，及将obj文件转成文件更小的json格式导入。 导入obj模型 3Dmax格式转换成obj格式 美术提供的一般为3Dmax项目文件夹，里面包含了.max文件以及贴图图片等资源，用3DMAX打开.max文件可以看到3D模型 如图： 点击菜单里的导出,选择obj格式,点击保存后出现选项 导出比例：几何体选项里的输出比例，默认是1.0，我们根据模型的分辨率，以及需要在网页上呈现的分辨率设置一......
-
图册组件优化之路（一）
根据六马系统需要，写了一个图册组件，方便给编辑器添加图册显示使用。 效果可以参考这里：http://game.163.com/2016/chinajoy/2016/07/29/22769_632281.html 匆忙发布了第一个版本出去，发现编辑们流行图册都发一两百张图上去的，由于没有做加载优化，导致问题很明显，一开始需要请求双倍的图片总数请求，页面存在多个图册，打开就会加载得很慢才出来，好多菊花满屏转 一、代码按需加载 图册兼容PC和移动两个web端，一般情况下，都是代码写一块，根据参数或者终端类型判断，来运行对应的代码 这样方式存在以下问题： 一个页面基本是不会存......
-
学习笔记：编写高效的javascript（老司机请绕道）
偶尔写得很挫的代码会被鄙视，甚至会影响到用户的每一次操作，所以开始思考如何让自己码下的代码能在所有浏览器中最高效地执行。 下面是我最近在读的一本名叫《高性能网站建设进阶指南》的书的一些笔记，做下简单的分享。 一、学会管理作用域 当执行JavaScript代码时，JavaScript引擎会创建一个执行上下文，每个执行上下文都有一个与之关联的作用域链。JavaScript引擎会在页面加载后创建一个全局的执行上下文，然后每执行一个函数都会创建一个对应的执行上下文，同时会创建一个活动对象，并在初始化时给this、arguments、命名参数和该函数的所有局部变量赋值。 JavaScri......
-
关于ajax异步获取服务器信息乱码情况
1、当客户端页面编码必须为gb2312时，ajax获取的信息显示为乱码 有时候有些项目需要include新闻发布系统某站点数据时，新闻发布系统该站点配置为gb2312编码的站点，此时，页面设置的编码必须为gb2312。但ajax异步获取的utf-8信息需要写入页面，与页面编码不一致，显示为乱码。（比如xy2某项目，同时需要include新闻数据，与接口返回的直播信息） 解决方法：添加ajax参数：scriptCharset:'utf-8'，使返回值以scriptCharset指定编码显示而不是默认以页面编码显示 js 代码： $.ajax({ url :......
-
浅尝模拟下拉框select
前言 本文主要模拟下拉框select控件 详情请戳参考页面：梦幻西游手游武神坛 模拟select主要实现目标 1.点击下拉框区域，下拉列表没显示则显示，有显示则收起来，下拉箭头样式有所改变； 2.鼠标hover下拉列表上面有对应的交互； 3.点击选择下拉列表的值，收起下拉列表，并且在下拉框区域显示选中的值； 4.有多个下拉框的时候，点击其它下拉框区域，其它兄弟下拉框没收起的先收起，同时展开当前下拉菜单； 5.点击窗口空白处，有下拉菜单没收起来的也收起来。 实现步骤 以下是实现的html代码 <div class="select-wrap j-select......
-
模仿网易新闻首页的滑屏切换
网易新闻移动版,试试左右滑动来切换新闻栏目，是不是如丝般顺滑？ 天下手游首页，也是模仿这种效果来做的，是不是也还可以（捂脸） 我们需要绑定touchstart,touchmove,touchend三个事件。支持H5的浏览器（移动端当然是都可以的）都支持以下绑定事件的方式——用handleEvent方法去区分不同的事件。 注：我们是在touchend事件触发的时候才会有左右滑屏。 //滑屏切换内容页 $("#main_container")[0].addEventListener('touchstart', touchHandle, f......
做有态度的前端团队
网易FEG前端团队
© 2024 FEG-做最好的前端_网易游戏网站服务部前端团队_有态度的互联网前端团队. 由 NetEase 倾情推出.