两只凤梨 发布的文章
-
滚动视差效果的实现及优化方案
前言 相信大家对页面滚动视差效果都有一定的了解，滚动视差就是利用多层背景加上利用鼠标拖动滚动条来形成一些像动画一样的视觉效果。 项目地址：http://nostos.163.com/ 使用background-attachment:fixed及改变background-position去实现视差效果 接到要做一个视差滚动的效果需求时，脑海中立刻浮现了一个解决方案，通过background-attachment:fixed把背景固定，然后计算滚动条的拖动位置去改变不同背景图的background-position来实现。 然而，事情往往没那么简单，由于这次项目要兼容到2560px宽度......
-
CORS跨域资源共享
前言：最近在后期优化梦幻西游手游图库项目的时候，遇到一个H5跨域请求接口的需求。 CORS-Orign Resource Sharing（CORS）既跨域资源共享，众所周知，浏览器有个同源策略，为了处理跨域请求，一般用JSONP，设置documet.domain降域，CORS等方式。 跨域资源共享协议标准通过声明一系列http标准头，让服务器能声明哪些来源可以通过浏览器范围服务器的资源。特别那些会对服务器数据造成影响的方法，标准要求浏览器要先以OPTION方法去发送一个预请求去获知服务器对跨源请求所支持的HTTP方法。以下就会分两种请求进行讨论。 1.简单请求 简单来说，就是一些请......
-
判断iframe是否加载完成小结
在做大话西游经典版新闻内页，有个功能是滚动条下拉到一定位置，自动加载下一篇新闻，由于编码问题，采用了不同的加载下一篇新闻的方式。 页面效果：http://xy2.163.com/news/news/20161129/15205_658163.html 关于编码引起的问题 页面最终显示的编码是有一下四个因素共同决定的： 1）HTTP Header中的"Content-Type"项，服务器端返回编码设置 2）html代码中的meta标签 3）页面文件的保存编码 4）请求服务器设置的编码 HTTP Header中的"Content-Type"......
-
负margin小结
关于负margin 对负边距使用恰当的话，其实它是具有非常强大的属性的，以下是几条关于负margin需要注意的地方： 负边距是绝对标准的css，并不是一种hack的方法 当没有使用浮动时，负边距不会破坏页面的文档流 浮动会影响负边距的使用，因此使用负边距的时候要小心 使用负边距，做了几个小demo 1.两个设置了固定高宽的div，分别是A,B 2.A设置margin-left为负值,如图A元素向左移了10像素 3.A设置margin-top为负值,如图A元素向上移了10像素,其父元素也向上移了10px 4.A设置margin-bottom为负值时，A并不会像你想的那样往下......
-
初探sessionStorage的使用
本文主要讲述使用sessionStorage缓存接口数据 实例请戳这 点我 关于sessionStorage sessionStorage是针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除，刷新页面数据也还是存在。使用sessionStorage可以避免频繁调取数据接口，把数据储存到客户端。 sessionStorage的常用方法 window.sessionStorage.name = 'zuiniu'; // 赋值 window.sessionStorage.setItem('name','zuiniu'); /......
-
浅尝模拟下拉框select
前言 本文主要模拟下拉框select控件 详情请戳参考页面：梦幻西游手游武神坛 模拟select主要实现目标 1.点击下拉框区域，下拉列表没显示则显示，有显示则收起来，下拉箭头样式有所改变； 2.鼠标hover下拉列表上面有对应的交互； 3.点击选择下拉列表的值，收起下拉列表，并且在下拉框区域显示选中的值； 4.有多个下拉框的时候，点击其它下拉框区域，其它兄弟下拉框没收起的先收起，同时展开当前下拉菜单； 5.点击窗口空白处，有下拉菜单没收起来的也收起来。 实现步骤 以下是实现的html代码 <div class="select-wrap j-select......
