⑴ 怎么用react实现网站页面类似swiper的效果
通过Bootstrap框架的学习，动画制作，BOM和DOM：微信场景应用 项目开发步骤讲解，使用HTML标签对网页进行简单的排版，bower的安装以及常用命令，JSON数据格式，常用API和Touch模块的详解
通过Swiper插件的学习，React开发WebAPP案例，AJAX、属性等知识、调试技巧讲解，React组件的嵌套，新增标签：WebAPP开发
第四阶段 React的入门到精通 通过对React的学习，基于效果图通过html+css完成符合W3C标准的HTML页面
第二阶段 Javascript入门到精通 JavaScript基础课程 JavaScript变量，为web前端的学习打下良好基础，移动端开发，音频和视频的嵌入、3D变换，对象，能够快速高效的微信场景应用 Swiper插件简介，正则表达式和表单数据验证，掌握用H5+CSS3开发移动端应用的方法 CSS3新增属性，按钮常用样式的学习
移动端应用实战 移动端项目实战一，常见功能的新老实现方式对比
常用移动端框架 通过Zepto框架的学习，动画框架的学习，掌握用React快速开发移动端应用的方法 React的背景和原理。 解网站运行的原理及相关概念，ReactJS开发混合APP案例
nodejs&bower&gulp 学习自动化构建前端项目的一些知识 nodejs环境搭建以及常用命令，使用Photoshop完成切图效果，表单新增元素和属性；javascript条件语句，以及事件处理的学习
JavaScript高级课程 使用JavaScript操作Cookie，各种事件和动画方法，数据类型的学习，盒子模型，React组件生命周期，JSONP，能够快速高效的开发移动端应用 Bootstrap框架简介，常用API学习，前端优化学习，DOM操作，栅格系统，关键词，常用插件的学习
第三阶段 HTML5+CSS3新特性 通过HTML5新增特性的学习阶段 HTML的入门到精通 学习HTML的标签，React组件状态。 HTML5与之前html的区别，字符串，2D，Canvas标签，Ajax异步数据传输技术
jQuery入门到精通 jQuery基础课程 jQuery选择器，响应式媒体查询：响应式网站开发
移动端项目实战一，能够快速高效的开发移动端WebAPP Zepto框架简介，React组件属性，表格；
移动端项目实战二，和流行的网页特效制作
jQuery高级课程 jQuery插件的封装，开发中遇到问题收集、答疑。
HTML+CSS网页布局 学习DIV+CSS的基础知识，能够用DIV+CSS完成带交互的企业网站的布局 CSS常用属性和高级技巧，websocket，掌握H5新增特性用法，新增移动端事件
通过CSS3新增特性的学习，表单，掌握网页布局技巧
⑵ wap产品设计跟web产品设计有什么区别
首先，纠正一个常识性错误。我们常把移动网页设计叫做：Wap。其实，Wap全称叫做无线应用协议，是一个使移动用户使用无线设备随时使用互联网的信息和服务的开放的规范。还有人把移动网页叫做WebApp，其实我们大部分的网站都能叫做WebApp，并不仅仅局限于移动网页，还包括PC网站。正确的名字应该是“移动网页”，这样比较能够准确地概括手机端的网页设计。
因为手机自身的一些特性，所以移动网页对比 Native App 和 PC 端网页，有一些固有的特点。概括起来主要有以下几点：
1、使用场景不同；
移动网页的访问大部分是通过搜索引擎和直接输入网址进入的，更多是为了浏览信息，以及满足及时性（比如汇率换算、异地天气、新闻阅读）的需求，所以留存较低。
2、可展示空间小；
除了移动设备本身屏幕较小以外，还因为浏览器大部分具有地址栏和导航栏，进一步占据了屏幕空间。
3、操作不便；
这个特性其实是由于可展示空间小引起的，因为展示空间较小。大部分浏览器将一些“新建标签页”、“前进”、“后退”的操作给隐藏了起来。用户需要更多步骤才能达成一些操作。H5火爆起来以后，这样的现象在微信中更为明显。
4、交互方式不同；
因为手机的性能问题，一些App上的特效并不能在移动网页上复现，即使能复现，特效也不会平滑，用户体验比较差。所以，这就决定了移动网页设计需要不同的交互方式，也有不同的关注点。
根据以上四个特点，我总结出了做移动网页需要注意的四个原则：
1、理清产品主流程；
因为使用场景的不同，用户在移动网页上做的事更为特定。这就需要在做产品设计的时候，理清产品的主流程，删减不必要的功能；让用户顺畅的完成目标。另外，我们要看到因为移动网页本身特点造成留存低，所以需要在明显位置设置
Native App 下载入口，将用户导入 App 中。
2、页面设计以简约为主；
因为用户目标比较明显，以及受屏幕大小限制。所以页面设计以简约为主，配合色彩，突出重点信息。
3、更加注重全局导航；
WebApp 应用场景非常多样，最典型的就是在微信内置浏览器。在这样的情况下，导航的设计就特别重要。每个页面都要能到达 WebApp 上任意一个页面，步骤可以多点，但是一定要有路径。
4、减少特效，考虑页面加载速度;
采用“点击”这种最普通的交互方式，尽量减少不必要的效果及元素，突出主要信息的同时还可以加快页面加载速度。
⑶ 开发内容型WebApp，有哪些H5前端框架可以用
Bootstrap是目前最流行的前端开发框架，最新出来的Bootstrap3提出移动优先，Bootstrap框架主要针对的是桌面端市场，在布局、版式、控件、特效方面都非常让人满意，能极大丰富界面效果，方便前端工程师开发，目前主流的Firefox, Chrome, Opera, Safari, IE8+浏览器都能够很好的兼容，在框架扩展方面，随着 Bootstrap 的广泛使用，扩展插件和组件也非常丰富，涉及显示组件、兼容性、图表库等各个方面。
Vue.js 是一套构建Web界面的渐进式框架，是目前唯一提供支持混合预处理器，对CLl,vdom,JSX等业界认可的理念能够完美的实现。非常受业界移动开发者的喜爱，大型互联网公司都在使用，如阿里巴巴，饿了么等。
AngularJS是一款优秀的前端JS框架，旨在简化前端应用程序的开发。它能快速的构建企业级的web应用。目前比较流行的Bootstrap和ionic都是基于AngularJS。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。
⑷ web app 页面切换特效怎样实现
使用jQuery Mobile开发Web App-页面切换动画 android
jQuery Mobile包含一组基于CSS3的过渡动画（又称转场效果），可以应用在任何页面或page组件切换。jQuery Mobile默认对页面切换和返回按钮设置了滑动（slide）效果。
要设定一个特定过渡效果，只需要在链接上添加一个data-transition属性，可以使用以下属性值：
<a data-transition="pop">I'll pop</a>
jQuery Mobile提供了6种切换动画：slide(滑动)、slideup(向上滑动)、slidedown(向下滑动)、pop(抛出)、fade(淡入淡出)和flip(3D翻转)。动画效果见这里。
注意：flip效果在大多数android浏览器上不能被正确渲染，因为缺少对3d css transform的支持。不幸的是android并没有忽略flip效果，而是使用水平翻转来替代。所以建议在android完美支持之前谨慎使用flip效果。
此外，你可以使用data-direction=”reverse”来设定反向的过渡效果，比如对slide效果（从右往左）使用data-direction=”reverse”则会变成从左往右，对pop效果（从小到大抛出）使用data-direction=”reverse”则会变成从大到小消失。
今天老总跟我们聊天，说了很多技术的东西，有很多关于线程和内存的内容，凭我现在的水平，不理解其说的内容，以后要在这方面多加注意些，注重性能优化。
在软件行业，要实时跟上软件发展的进程。老总有个比喻，是这样的。菜市场每天都有很多新鲜的菜进入，如果你抱着一捆不新鲜的菜来买，即使你人缘再好，老主顾也会离你而去，更别说其他。
⑸ 前端开发中常用到的js特效有哪些
HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567
阻止默认行为
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法 阻止默认行为
event.preventDefault();
} else{ // ie 阻止默认行为
event.returnValue = false;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();
});1234567891011121314151617
阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法 阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();
});1234567891011121314151617
鼠标滚轮事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));
if (delta > 0) {
// 向上滚动
console.log('mousewheel top');
} else if (delta < 0) { // 向下滚动
console.log('mousewheel bottom');
}
});123456789101112
检测浏览器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
// 测试console.log(isSupportSVG());1234567
检测浏览器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910
检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 测试alert(isWeiXinClient());1234567891011
jQuery 获取鼠标在图片上的坐标
$('#myImage').click(function(event){
//获取鼠标在图片上的坐标
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);
//获取元素相对于页面的坐标
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});1234567
验证码倒计时代码
<!-- dom --><input id="send" type="button" value="发送验证码">12
// 原生js版本var times = 60, // 临时设为60秒
timer = null;
document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times--; if (times <= 0) {
send.value = '发送验证码';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + '秒后重试';
send.disabled = true;
}
}, 1000);
}
// jQuery版本var times = 60,
timer = null;
$('#send').on('click', function () {
var $this = $(this); // 计时开始
timer = setInterval(function () {
times--; if (times <= 0) {
$this.val('发送验证码');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times + '秒后重试');
$this.attr('disabled', true);
}
}, 1000);
});2122
常用的一些正则表达式
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]\d{9}$/
//验证URL
/^http:\/\/.+\./
//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配中文字符的正则表达式
/[\u4e00-\u9fa5]/
//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/
js时间戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415
js限定字符数（注意：一个汉字算2个字符）
<input id="txt" type="text">//字符串截取function getByteVal(val, max) {
var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
returnValue += val[i];
} return returnValue;
}
$('#txt').on('keyup', function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819
js判断是否移动端及浏览器内核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移动端');
}21
之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 网络
GItHub仓库地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置
//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;
// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456
HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}
fullscreen(document.documentElement);12345678910111213
⑹ 有没有简单的生成APP的方法
最简单生成app的方法就是使用h5写一个移动端的页面，然后外边放一个webview
这就是最简单的webapp，现在很多的APP都是采用类似的技术制作的
⑺ 网上下载的带特效的jquery插件怎么用
项目的webapp下创建一个目录，比方起名叫jquery，
在jquery下面建立js、css、images三个目录，然后分别把对应的js文件放到js下、css文件放到css下，images/*放到images下。
在你要使用的页面头部追加对三个js的引用。
然后把插件例子中<script text="text/javascript">$(function(){****};</script>这部分放到这个页面的头部，ok。
⑻ jquery特效如何添加到现有网站
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/shopping_trolley.css" type="text/css" />
⑼ web前端开发需要学习什么知识
首先对于Web前端初学者而言，HTML和CSS是需要掌握的内容。
HTML称为超文本标记语言，是一种标识性的语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
(9)webapp特效扩展阅读：
例如，在网上商店中，用户反复观察和选择商品，购买商品，浏览一系列网页，收集所需信息，支付相应费用，最后下订单，也可以是“软件升级向导”，指导用户完成下载和安装新软件的过程，也可以是基于Intranet的报价或销售报告生成工具。
所有这些均不同于“标准”的Web网站。 常规网站使用一系列菜单或导航栏在预定路径中漫游该网站。 但是，成为Web应用程序不仅仅是下级控制的导航器。 在网站上自由漫游时，可以进行无状态和匿名访问，但是通常不接受Web应用程序。
⑽ web前端开发需要学些什么
您好，web前端学习的内容有以下8个阶段：
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和
BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、
JavaScript函数式编程JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
web前端学习内容
这个学习的8个阶段按照顺序学习就是可以的，希望可以帮到你。