Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

web前端项目:Traveller旅行家网站首页,包括PC端和Mobile端。本项目作为YP技术展示,不作为任何商业用途。

Notifications You must be signed in to change notification settings

ypFish/ypFish.github.io

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Traveller 项目介绍 内容介绍: 以 VR旅行体验 为主要内容的网站。 (VR旅行体验以视频方式为主,图文结合为辅助,联合达人旅游,增加视频的故事性、知识性、趣味性。)
技术介绍: PC端: 1.HTML、CSS、Javascript 2.JQuery 3.React 4.Less 5.Gulp 前端自动化工具 压缩CSS和图片 6.多种css3,特殊样式、伪元素、动画效果。 7.引入Web font字体集,采用矢量文字小图标,减少碎图片请求,文字库为:阿里巴巴图标库(MIT开源) 8.前端SEO 9.动态读取JSON数据,并使用React动态渲染,虚拟DOM渲染效率高,不影响之前已渲染未变化的DOM元素。 10.Html5:Web存储功能,利用sessionStorage存储一个会话期间内的用户信息 11.三重缓冲加载机制: 1.加载封面,遮蔽封面后内容,在封面加载完成后,通过给<script>标签设置src的方法加载后续内容。 2.后续JSX文件内容加载时,通过$.getJSON的方式,逐步加载内容区内容,先加载轮播图内容,再加载侧边栏内容,再加载显示卡片内容。(为了突出逐步加载的过程,已经添加延时效果) 3.图片资源延迟加载,通过jquery.lazyload插件延迟请求图片数据。

移动端: 1.分辨率适配,试用meta标签、flex流式布局、百分比布局解决屏幕适配问题,本页面从IPhone4(320480)至IPad(7261024)进行适配测试。 2.移动端特殊样式处理:媒体查询、弹性图片、rem相对单位、单行与多行文本溢出 3.使用fastclick.js解决300ms点击延迟及点透问题。 4.使用JSON动态加载数据,图片资源延迟加载 5.按钮点击态的设计 6.使用iSlider插件设计循环滚动轮播图 7.使用Chrome进行模拟测试,使用DebugGap配合手机进行真机测试 8.利用navigator.userAgent判断浏览器类型,自动跳转到相应网页 9.使用window.name的跨域能力解决PC页面默认自动跳转到手机端的问题 10.针对浏览器版本进行兼容:PC端最近的两个版本,Android>=4.0 IOS>=7

About

web前端项目:Traveller旅行家网站首页,包括PC端和Mobile端。本项目作为YP技术展示,不作为任何商业用途。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
Morty Proxy This is a proxified and sanitized view of the page, visit original site.