如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.说下需求：点击标题 跳转 预览的pdf 页，下载功能 可选【最好有】。
2.实现结果 ：
3.代码实现：
依赖pdf.js 【需要下载完整 控件】
下载官网：http://mozilla.github.io/pdf.js/
点击 ‘Download ’ 到下载页
git 克隆 或者下载。
下载后文件长这样：
【重点在后面 项目如何部署组装】
1.新建一个空项目 把文件放到项目根目录下：
红色圈里 是官网下载的 就改个文件名字，然后拖进项目里，完全不用动里面任何文件记住，有需要另说。
绿色是我写的【dowwn.html 是测试文件;static 放pdf 文件】 下面贴代码：
list.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">产品说明书</p>
-
<ul>
-
<li dataSrc = 'KD-122LA火灾探测报警器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-212LA可燃气体探测器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-216LA可燃气体探测器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃气体探测器说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'Kd-122LA_KD-601系统遥控器使用说明.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-602LA_SOS一键救助使用说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一键救助使用说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-701LA_溢水探测器使用说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探测器使用说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-702LA红外人体移动探测器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-703LA_门窗探测器使用说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 门窗探测器使用说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-805A_WiFi系统主机使用说明书_V1.00.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系统主机使用说明书_V1.00</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'WIFI智慧家庭安防系统操作说明书_v0.01.pdf'onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
-
-
</ul>
-
<script src="js/jquery.min.js"></script>
-
<script>
-
function fun(e){
-
// console.log(e);
-
var dataSrc = $(e).attr('dataSrc');
-
// console.log(dataSrc);
-
// sessionStorage.setItem('dataSrc',dataSrc);
-
// window.location.href='index.html'
-
var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
-
$.ajax({
-
url: urlSrc,
-
type: "get",
-
success: function(xhr, data){
-
if (navigator.userAgent.indexOf('Android') > -1) {
-
//判断移动端是android 还是ios ，若是android 则要借助pdf插件
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
} else {
-
//ios直接打开pdf
-
//window.location.href = url;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
}
-
},
-
error: function(){
-
//window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
-
}
-
});
-
}
-
</script>
-
</body>
-
-
</html>
完毕！
注释：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html? 直接跳转到 万能的pdf 组件里的html 页，该有的 国际化和下载打印功能 人家都写好了！
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">产品说明书</p>
-
-
<a href="static/1.pdf">00001</a>
-
-
-
</body>
-
-
</html>
-
哈哈，直接a 标签 href 跳转 pdf文件；也是ok的哦！【苹果手机：直接预览；；；安卓:下载 链接 】
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有时一个新功能的上线，新内容的更新，会导致在一个页面中出现层叠式的引导内容，页面上大部分引导的触发时机也比较接近。那么，对于这种多重引导，要如何处理呢？
交互设计流程中，每当有新功能上线或者新的内容优化更新时，对应版本中一定会出现新手引导或者相应形式的提示内容，这在业界似乎已经成为一个约定俗成的东西。
毕竟，酒香也怕巷子深，在这个用户注意力被极度分散的时代，任何一个应用都不敢说，自己可以占据用户每天绝对时长的时间，让用户来“充分”自己挖掘每个版本的更新内容。
所以，“自荐”似的引导出现在了每一次的应用安装或者更新中。
在一次版本验收中出现了这样一个问题：最初的设计过程中，由于功能模块都是单独提出需求的，所以交互设计文档给出的时候也是拆分成不同的模块提交，可是实际验收时，当所有的新功能都在一个页面中呈现的时候，问题就出现了。
由于页面功能改版较大，既有新功能的上线，又有新内容的更新，所以在一个页面中出现了层叠式的引导内容，页面上大部分引导的触发时机也比较接近，因此就会在某些页面出现气泡、蒙层引导堆叠显示效果，让人防不胜防。
在于产品和开发同学沟通后发现，除了需要合理统筹调整触发时机以外，需求提出时并未严格区分每个引导是根据用户ID来判断，还是依据设备ID来判断，实现过程中统一默认以用户ID作为了引导出现的标准。
结果导致页面中出现引导堆积的情况出现，将引导的触发条件增加一条设备ID和用户ID，本质目的是将引导出现的时机更加合理化，在不影响用户操作流程的情况下向用户传递信息，提升用户体验。
如何解决这个问题？
还是需要从本源找起：一是引导的目的，二是触发的判断依据。
（1）新用户操作引导
主要是指用户第一次安装应用后出现的引导，告知用户核心操作方法和流程。
（2）功能更新引导
主要针对产品功能升级后，用来告知用户新功能的入口、操作方式等内容。
（3）与用户权益相关更新或说明
当更新内容与用户权益、身份属性内容相关时，需要出现适当的引导或者气泡形式的提示来告知用户，这种引导与用户的激励体系、产品玩法高度相关。
（4）常规功能操作引导
这种操作引导较为常见，每次更新应用或者新安装时都会出现，几乎成为例行出现的“常识性”引导，例如：页面中的手势操作引导等。
以上4中引导类型，在具体展示形式上主要包括前置引导和过程中引导两类。
前置引导：类似于引导页，在用户开始使用应用前直接告知用户更新的功能、玩法等enrich，一般都是全端出现的。
过程中引导：是指用户在实际使用到，或者进入该功能入口所处界面时出现的引导，这种引导需要用户的触发时机。而且由于出现在操作过程中，对操作本身具有阻碍的副作用，所以也只会出现一次而已。
了解了使用引导的目的，再来看一下触发引导的判断依据——设备ID和用户ID。
（1）设备ID
是指Device ID，是一台设备的识别标识，正常情况下，一款移动设备上的应用，无论切换都少个登录账户，其设备ID是不变的（刷机除外）。
（2）用户ID
即User ID 或者UID，是用户在登录应用后的身份识别码。用户ID产生的条件是需要用户注册生成账户后登录App，这样用户就可以想服务器发送和接收消息，服务器也可以通过UID来进行准确的push消息推送，用户与服务器之间可以进行交互。
除去一些纯工具类型的产品，大部分应用都需要用户注册登录后使用，当然，在这里就不深究是否强制用户登录等逻辑。
明确了以上两方面内容，同时考虑引导使用的形式，其实也就不难判断，应该如何处理页面中多层引导的问题了。
（1）新用户操作引导/功能更新引导
这类引导如果使用前置引导类型，则信息传递是面向全局的。
当功能引导与用户个人信息无关，只是功能操作或者内容更新时，往往可以以设备ID作为推送判断标准，即一个设备，在一次应用安装周期中，出现一次即可。若用户在引导出现后，切换了登录账户，再次打开该界面时，不在出现重复的新手引导。
简单来说，此类引导的出现不需要区分用户信息，甚至不需要用户登录即可使用，所以基本上此类引导均已设备ID为触发判断的基本条件。
若此类引导使用过程中引导，则需要在实际使用过程中抓取适当的触发时机，此时如果出现多重引导时，则需要适当区分使用用户ID或者设备ID作为触发条件，从而将引导出现的时机合理区分。
（2）与用户权益相关更新或说明
此类引导一般需要细分用户身份信息，准确推送用户所需的内容。例如：会员与非会员之前在某个功能上有权益的差别，引导或者提示的内容则需要按身份不同来推送。使用前置形式时，可以根据实际需求调整判断依据；使用过程中中引导，这时则基本上需要使用用户ID作为触发依据，其他引导可使用设备ID用以区分不同引导。
（3）常规功能操作引导
『例行』出现的引导，不受场景限制，与用户权益关联度较低，因此以设备ID作为触发的基本判断依据即可。
当页面功能过多的时候，难免会遇到多重引导的问题出现，除了通过展示形式、页面内的触发时机来区分以外，还可以通过设备ID和用户ID的作为触发依据来细化和区分引导出现的时机和场景。
不过这种判断方式也并不是一成不变的，需要灵活处理，例如：当引导出现时，该场景下用户处于未登录状态，此时服务器根本无法获取用户ID，在此场景下讨论设备ID还是用户ID显然毫无意义，需要重新调整引导出现的时机或者展示形式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
有人问我什么是设计？什么是创意？之前我觉得创意是天马行空，设计是胡思乱想，想象力是造出一些不靠谱的东西，直到五年前，有一天晚上，突然觉得创意，设计像水，因为水无形，无色，无味，到杯子里就是杯子的形态，遇到咖啡就是咖啡的颜色，遇到糖就是糖的味道。水是最具想象力的东西，可以变成雨，变成冰。设计是科技与艺术的产物，是商业社会的产物，在商业社会中需要艺术设计与创作理想的平衡，需要客观与克制，需要借作者之口替委托人说话。设计即要符合审美性又要具有实用性、替人设想、以人为本，服务人类。平面设计则包含很多领域的创造性视觉艺术学科，即用视觉语言进行传递信息和理念。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在工作中，有时会遇到这样的一个现象：自以为是最优的设计方案，用户却并不会按照预期的方式使用。每每发生这样的事情都会让我很困惑，用户为什么不听话呢？
试想这样一个场景：假设有电话打进来，你却没有接，试想一下可能有哪些原因导致了「没接电话」 的这个行为呢？
问题可能出现在三个方面：
通过上述的例子不难发现，用户的行为是受多种因素影响的，我们姑且将这些影响分为三类：动机、能力、触发。
现在试着用这三个要素来分析一个身边的案例：虽然我知道这样不好，但是我依然热衷于打王者荣耀，这是为什么呢？
1. 动机
王者荣耀作为一款游戏，自带着「好玩」 的属性，可以让玩家在其中获取快乐，抵御痛苦；另外，来自朋友的邀请、因为玩游戏游戏而带来的谈资、通过提升段位获得的群体认同感等等都可能成为强有力的游戏动机。
2. 能力
王者荣耀成功的将 DOTA、LOL 等 MOBA 游戏从 PC 端迁到移动端，只要拥有一部智能手机和一个稳定的网络环境，随时随地都可以拿出手机玩上一局王者荣耀，MOBA 类游戏的设备门槛从未被如此降低；另外，游戏的操作、套路等等也被极度简化，没有了 PC 端 MOBA 游戏极高的学习门槛，让更多人可以具备加入这款游戏的能力。
3. 触发
来自朋友的邀请通常无法拒绝，这就是依托于社交的病毒式传播所具有的巨大威力，当茶余饭后，朋友喊你一起开黑时，一次有效的触发就已经达成了。除此之外还有来自官方的 push 消息、微信中的每周战报等等，这些都在不停地触发用户，让玩家不断强化对于游戏的印象。直到有一天，当你闲来无事的时候不由自主的想到拿起手机打一局王者荣耀，这时它就已经达成了来自玩家内部的触发，成为了你的一个习惯。
拥有强烈的游戏动机、具备参与游戏的能力、再加上合理的触发机制，这些因素共同造就了玩家热衷于打王者荣耀的行为。
由上述案例可以看出，动机、能力及触发这三个因素对于用户的行为有着十分重要的影响，而且如果你仔细思考会发现，这三个因素不仅仅适用于上述的案例，而是可以用来解释绝大多数场景下用户行为产生的原因，所以接下来我们展开分析这三个影响用户行为的关键因素。
1. 行为动机的根源
用户的行为动机大致可以分为三种：
追求快乐、逃避痛苦：用户更加喜欢能够快速带来快乐的产品，例如微视等短视频产品，让用户通过快速消费几秒钟的短视频就可以马上获取快乐，这也是越来越多的用户沉迷其中的重要原因之一。
追求希望、逃避恐惧：用户也会为了追求希望/逃避恐惧做出许多下意识的行为。例如我曾经观察到，很多人在点击保存文件时会连续点击多次工具栏中的保存按钮，或者多次在键盘上按下「Ctrl+S」 的快捷键，这样的行为大概是害怕不小心丢掉自己的劳动成果。这种下意识的多次点击保存的行为，就是「追求希望、逃避恐惧」 的一个具体表征。
追求认同、逃避排斥：人是具有社会属性的，我们都会追求他人的认同，避免被他人排斥。因此在社交网站上的点赞、评论、转发等互动往往会给作者提供源源不断的创作动力，其本质上是人类追求他人认同的心理成为了强有力的驱动力。
2. 能力限制
用户的能力限制来自六个方面：时间、金钱、体力、脑力、社会偏差、非常规性。
前四种能力限制比较容易理解，在此不做赘述。
社会偏差，是指他人对该项活动的接受程度。例如曾经在社交平台中随处可见的「不转不是中国人」 、「为了家人转起来」 之类的绑架式传播，现在已经很少见了，因为大家都不喜欢这样的东西，所以当用户遇到类似的内容时，也不太容易选择转发了。
非常规性，是指该项行为与常规活动的匹配程度或者矛盾程度。例如大型超市会在用户的常规的行动路线上放置一些小商品，这样用户就很可能会产生计划外的购买行为，如果放置小商品的位置与用户常规的行动路线不匹配，甚至互相矛盾，显然就达不到引导用户产生额外购买行为的目的。
3. 触发方式
触发大致可以分为外部触发和内部触发两种。
外部触发可以理解为产品为了触达用户而做的事情，又可细分为四种：
付费型触发：通过付费的形式进行推广，最常见的就是广告，商家花钱做广告，使其产品让更多人知道。
回馈型触发：通过正向反馈获取的曝光，例如产品在应用商店的排行榜中位于榜首，自然会获得更多的触达用户的机会。
人际型触发：通过口口相传的方式触达用户。
自主型触发：产品自主产生的触达行为，例如新闻APP 每天在固定时间 PUSH 的新闻给用户，久而久之，即使一个不怎么经常看新闻的用户也会知道有这样的一个 APP 可以查看新闻。
相较于外部触发，内部触发则显得更加有价值。内部触发是指用户的内在情绪/情感等驱动而触发的用户行为，这是所有产品的最终目标。例如用户发现通过玩某款游戏可以治疗「无聊」 的情绪时，一旦其产生无聊的情绪，就会自然而然的想到玩这款游戏。这样产品就与用户建立了一个内在的良性联系。
外部触发往往是昙花一现，而内部触发才能真正让用户产生习惯。
总结起来，用户的行为规律是有迹可循的，总体上符合这样的一个模型：
行为（Behaviour） = 动机（Motivation） + 能力（Ability） + 触发（Trigger）
如果一个产品/功能使用起来比较难，则需要用户有较高的动机，再加上合理的触发，才能让用户的行为触发成功；反之，如果用户的动机较低，则必须让产品/功能非常易于使用，再加上合理的触发，才能让用户的行为触发成功。动机、能力、触发三者共同制约着用户的行为，缺一不可。
因此，如果再遇到「用户不听话」 的情况，不妨用这个模型来检验自己的产品/功能是否存在问题：用户的使用动机是否较低？使用难度是否太大？是否合理的触达了用户？相信这样一轮检视下来，总会有一些收获的！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下
Css代码
查找一些教材中（w3schools等），只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：
1. 样式表的元素选择器选择越，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
所以上例中，#navigator的样式优先级大于.current_block的优先级，及时.current_block是添加的，也不起作用。
2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：
Css代码
而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。
3. 如果要让某个样式的优先级变高，可以使用!important来指定：
Css代码
此时class将使用black，而非red。
对于一开始遇到的问题，有两种解决方案：
1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：
Css代码
需要莫仁为#navigator元素指定class="block"
2. 使用!important:
Css代码
此时无需作任何其他改动即可生效。可见第二种方案更简单一些。
配色一直都是我的弱点，而且会在这方面纠结很久，相信有些朋友也会遇到此类问题；
所以花了点时间整理了关于配色的知识和方案，其中参阅了网站上很多设计师的文章，汲取精华，集中归类，更全面的总结；文章尾处均有参阅设计网站及设计师的备注。
“世界最远的距离不是生与死，而是设计师与甲方。”甲方反反复复地提出改稿的需求，设计师只能无尽头地改改改，这已经是业界的”常态“，今天的原创文章，我们一起来探讨一下，到底要改多少次稿，甲方才肯收货？！
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
获取窗口属性
为了解决兼容性的问题，我们来封装一个函数：
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
为了解决兼容性的问题，我们来封装一个函数:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
查看元素的几何尺寸
让滚动条滚动
练习：
做一个小阅读器，会自动翻页。
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本内容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加锁，防止连续点start产生累加加速 start.onclick = function() { if(key) {
timer = setInterval(function() { window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() { clearInterval(timer);
key = true;
} </script>
蓝蓝设计的小编 http://www.lanlanwork.com