Category: Javascript /Jquery / React / Bootstrap / Web
——–Facebook、Twitter 及Quora 用户增长团队的产品大牛Andy Johns倾情奉献纯干货———
（接上篇）
7. 图片使用
增加图片可能会降低转化率。我做过几次A/B测试，发现主页的可点击图片会降低总注册量（甚至计算30天内回访也是如此，已排除先前访问数据）。我觉得Pinterest知道这个道理，所以不会让用户在诸如“申请邀请码”页面（http://pinterest.com/landing/）跳过关键动作。
注意页面底部的轮播图插件。它们是不可点击的，所以用户不会从注册启动页跳转走。从我的经验来看，如果这些图片可点击，该页面的邮件地址提交率估计会下跌5%。我过去测试过登出页面的…
Read More
Facebook、Twitter 及Quora 用户增长团队的产品大牛Andy Johns倾情奉献纯干货
电子邮件营销
定义：向订阅用户发送业务邮件，或群发邮件。
转化指标：从邮件营销的角度来说，转化指标通常由邮件里指向（含有最终转化动作的）目标页的点击来定义的。在这里我们讲讲为了获取尽可能优化点击的转化漏斗的可取办法。换句话说，邮件的转化优化就是增加点击跳转到你的网站或移动应用的收件人比例。
14. 标题行与发送人地址
想优化邮件转化率，首先建议你针对这两项进行测试。在标题行里，你可以试试使用不同的标题长度（长标题或短标题），以及像“独一无二”这样的描述词语。在这个案例里，这个客户使用的长标题包含了详…
Read More
这是一款可用于展示历史和计划的时间轴插件，尤其比较适合一些网站展示发展历程、大事件等场景。该插件基于jQuery，可以滑动切换、水平和垂直滚动、支持键盘方向键。经过扩展后可以支持鼠标滚轮事件。
查看演示DEMO 下载源码
HTML
我们在body中建立一个div#timeline作为展示区，#dates为时间轴，示例中我们用年份作为主轴，#issues作为内容展示区，即展示对应主轴点年份的内容，注意id对应上。
<div id="timeline">
<ul id="dates">
<li><a href="#2011">2011</a>…
Read More
我们在一些WEB项目中需要应用简单的地图，而且最好是可以自定义标注地点，最好是可以从本地数据库中读取并在地图上展示地点，那么谷歌地图插件Mapsed.js是比较好的选择，使用起来简单，无需注册地图接口之类的复杂过程，就能轻松的在网页上展示地图效果。
查看演示DEMO
Mappy.js 是一款基于jQuery的地图插件，我们来看下如何使用它。
准备工作
首先需要将必要的js和css文件加载到html页面，当然这些文件在我们提供的下载包里已经打包好，请放心下载使用。
<script src="http://maps.googleapis.com/maps/api/js?libraries=pl…
Read More
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。随着用户对视觉体验的要求不断提高，WEB开发者开始 在网页中加入各种特效元素以满足用户的需求。今天这篇文章给大家推荐一个优秀的视差动画Javascript库——Skrollr.js
Skrollr是一个使用了HTML5和CSS3的轻量级JavaScript视差滚动类库。它是不依赖于其它框架的独立类库，可以让你快速打造出 视差滚动效果。它可以让我们给任意元素设置关键帧的CSS属性，然后它会自动形成动画效果。更重要的一点是，使用此类库时不用写复杂的JS代码以及兼容主 流浏览器…
Read More
当前已经有许多jQuery表单校验插件，并且有些也很不错，但这些插件功能太强大，使用比较复杂。如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择。
这个插件是轻量级的，所以只支持一些输入校验默认包括：必填、日期、数字、电子邮件、最大/最小限制，电话号码。但还可以通过正则表达式扩展校验规则。
要求: jQuery or Zepto 支持
项目网站: http://happyjs.com/
下载地址: https://github.com/andyet/Happy.js
转自：http://www.open-open.com/lib/view/open1346835863100.ht…
Read More
D is a jQuery plugin that allows you to drag and drop rows within a table for reordering the table data.
Basic Usage:
1. Include jQuery library and TableDnD.js
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.0.7.min.js"></script>
2. Call t…
Read More
可能你发现了本站顶部的进度条，它是如何实现的呢？下面一起来看。
页面进度条展示的是资源下载的进度，通常在页面上加上进度条，可以缓解用户的等待焦虑，也提升了网站的逼格。
前端进度条实现
在前端，实现网页的进度条目前还没有一个比较精确的方案，都是一些模拟进度。即页面打开的时候是 1%，然后定时器增加进度到 99%，然后 window.onload 之后，进度跑到 100%。
在前端，ajax 资源的上传和下载，html5 中都可以获取进度的，此文不谈。
实现准备
html 文件
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UT…
Read More
<marquee> 曾是 IE 下独有的一个走马灯效果的标签，其他浏览器并不兼容，于是出现了使用 JavaScript 来模拟该效果的插件。
版本：
jQuery v1.3.2+
查看 Demo
jQuery kxbdmarquee
文档目录
使用方法
参数说明
相关信息
使用方法
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.kxbdmarquee.js"></script>
CSS 样式
/**
* 父容器需要设置溢出隐藏
* 如果是水平滚动，项目需要设置浮动
*/
#element_id…
Read More
利用jQuery可以制作出很好的树型结构。这里介绍一款最近才找到使用的Nestable
可以拖动。 网页中的效果 http://dbushell.github.com/Nestable/
具体详细介绍的地址下载https://github.com/dbushell/Nestable
精简后的实例：
<?php
if($_POST['tree_data'])
{
echo '==>'.$_POST['tree_data'].'<pre>';
print_r(json_decode($_POST['tree_data']));
echo '</pre>'; die…
Read More
Circliful is a jQuery chart plugin that animates the presentation of your information with good looking circular design, a little similar to the ring chart. Also can be used as a circular timer, progress/loading indicator, pie chart and so on.
Basic Usage:
1. Create an DIV container for the plugin. You can pass options to the chart by using
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能，用jQuery非常方便的，只要知道什么时候滚动到了底部就好办了。
$(document).scrollTop() //获取垂直滚动条到顶部的距离
$(document).height()//整个网页的高度
$(window).height()//浏览器窗口的高度
文档的高度减去窗口的高度就是滚动条可滚动的范围了。那么
$(window).scrollTop() + $(window).height() >= $(document).height()
滚动条就到底部了，我们只要在$(window).scroll()中判断和加载内容就可以了：
$(functi…
Read More
1、插件介绍
支持无限无缝循环滚动。
最小的限度的操作DOM，只在初始化的时候复制一次DOM，后续不会再操作DOM，最大化性能。
默认的DOM结构为：#demo>ul>li*n。
丰富配置、简单接口。
注意：无缝滚动不支持prev、next操作，不支持onbeforechange、onafterchange回调。
2、插件参数
// 默认参数
$.fn.scrollable = {
// 内容区域选择器
contentSelector: "ul",
// 宽度，超过隐藏
width: "auto",
// 高度，超过隐藏
height: "auto",
// 滚动方向
direction: "top",
// 每次滚动的项目数量
// 如果为…
Read More
为什么要使用bxSslider jquery插件呢
完美响应式设计，适应任何设备。
可以包含图像，视频或HTML内容。
先进的触摸响应设计，极好的交互体验。
使用CSS动画，更流畅便省资源，加硬件加速
丰富的API和公共方法，方便使用
小文件，多主题，简单易用
兼容主流浏览器：火狐，Chrome，Safari浏览器，IOS，Android的，IE7 +
丰定罪的配置选项
How to install
Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download – link direct…
Read More
