一切福田，不離方寸，從心而覓，感無不通。

Monthly Archives: October 2017

SignalR

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库，可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能：当所连接的客户端变得可用时服务器代码可以立即向其推送内容，而不是让服务器等待客户端请求新的数据。 ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。 WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。 SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常 方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常 容易实现。 SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用，而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据，现在只要使用SignalR，就可以简单实现了。 最重要的是您无需重新建立项目，使用现有ASP .NET项目即可无缝使用SignalR。

龙生   13 Oct 2017
View Details

Web API 入门指南 – 闲话安全

Web API入门指南有些朋友回复问了些安全方面的问题，安全方面可以写的东西实在太多了，这里尽量围绕着Web API的安全性来展开，介绍一些安全的基本概念，常见安全隐患、相关的防御技巧以及Web API提供的安全机制。 目录 Web API 安全概览 安全隐患 1. 注入(Injection) 2. 无效认证和Session管理方式(Broken Authentication and Session Management) 3. 跨站脚本(Cross-Site Scripting (XSS)) 4. 直接引用非安全对象(Insecure Direct Object References) 5. 错误的安全配置(Security Misconfiguration) 6. 暴露敏感数据(Sensitive Data Exposure) 7. 功能级权限控制缺失(Missing Function Level Access Control) 8. 伪造跨站请求(Cross-Site Request Forgery) 9. 使用已知安全隐患组件(Using Components with Known Vulnerabilities) 10. 未验证跳转(Unvalidated Redirects and Forwards) Web API安全机制 认证与授权(Authentication and Authorization) 伪造跨站请求(Cross-Site Request Forgery Attacks) 安全链接(SSL) 跨域请求(Cross-Origin Requests) Web API 安全概览 先引用下wikipedia信息安全的定义：即保护信息免受未经授权的进入、使用、披露、破坏、修改、检视、记录及销毁，从而保证数据的机密性(Confidentiality)、完整性(Integrity)和可靠性(Availability)。 机密性和完整性都很好理解，可靠性作为信息安全的一个重要原则这里特别解释一下，即访问信息的时候保证可以访问的到，有一种攻击方式叫DOS/DDOS，即拒绝服务攻击，专门破坏网站的可用性。 Information security, sometimes shortened to InfoSec, is the practice of defending information from unauthorized access, use, disclosure, disruption, modification, perusal, […]

龙生   13 Oct 2017
View Details

Web API 强势入门指南

Web API是一个比较宽泛的概念。这里我们提到Web API特指ASP.NET Web API。 这篇文章中我们主要介绍Web API的主要功能以及与其他同类型框架的对比，最后通过一些相对复杂的实例展示如何通过Web API构建http服务，同时也展示了Visual Studio构建.net项目的各种强大。 目录 什么是 Web API 为什么要用 Web API 功能简介 Web API vs MVC Web API vs WCF Web API 实战 （Web API + MongoDB + knockoutjs) 涉及技术 服务URI Pattern 准备工作 代码实现 什么是 Web API 官方定义如下，强调两个关键点，即可以对接各种客户端（浏览器，移动设备），构建http服务的框架。 ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework. Web API在ASP.NET完整框架中地位如下图，与SignalR一起同为构建Service的框架。Web API负责构建http常规服务，而SignalR主要负责的是构建实时服务，例如股票，聊天室，在线游戏等实时性要求比较高的服务。   为什么要用 Web API Web API最重要的是可以构建面向各种客户端的服务。另外与WCF REST […]

龙生   13 Oct 2017
View Details

ASP.NET Web API教程(六) 安全与身份认证

在实际的项目应用中，很多时候都需要保证数据的安全和可靠，如何来保证数据的安全呢？做法有很多，最常见的就是进行身份验证。验证通过，根据验证过的身份给与对应访问权限。同在Web Api中如何实现身份认证呢？接下来的内容就详细的分享 Web API身份认证。   首先扩展自定义身份验证 添加类 CustomAuthorizeAttribute.cs 该类继承自System.Web.Http.AuthorizeAttribute（身份认证类）通过重写其身份认证核心方法来达到 web API 身份认证的效果。 完整代码： public class CustomAuthorizeAttribute : System.Web.Http.AuthorizeAttribute { public override void OnAuthorization(System.Web.Http.Controllers.HttpActionContext actionContext) { //判断用户是否登录 if(!HttpContext.Current.User.Identity.IsAuthenticated) HandleUnauthorizedRequest(actionContext); } protected override void HandleUnauthorizedRequest(System.Web.Http.Controllers.HttpActionContext actionContext) { var challengeMessage = new System.Net.Http.HttpResponseMessage(System.Net.HttpStatusCode.Unauthorized); challengeMessage.Headers.Add("WWW-Authenticate", "Basic"); throw new System.Web.Http.HttpResponseException(challengeMessage); } } 增加身份认证(必须登录后才能进行查询等操作)在Controller上加上属性，可以直接通过VS快捷键感应出来 完整代码 PS:写在controller类上是表示这个controller的每个action都受身份认证，如果想为某一个action制定 可以直接写在action上，就不要写在类上了。 接下来编写登录方法 public ActionResult Login() { return View(); } [HttpPost] public ActionResult Login(FormCollection fol) { ///此处为了演示简化登录过程 ///可以在此处扩展验证用户名或者密码是否正确 System.Web.Security.FormsAuthentication.SetAuthCookie(fol["username"], false); return Redirect("/HTMLPage5.htm"); } 有了后台的方法，就剩下最后的前段页面了 通过在Login的方法中右键可以快速生成页面(vs给我们带来的提高效率的工具，就不多做介绍了)   在生成的Login.cshtml中编写以下登录代码 @using (Html.BeginForm()) { <fieldset> <label>账号:</label><input type="text" name="username" /><br /> <label>密码:</label><input type="text" name="password" /><br /> <input type="submit" value="登录" /> </fieldset> } 这个时候还需要有两个小地方做配置. 第一个就是web.config 配置form认证 <authentication mode="Forms"> <forms loginUrl="~/home/Login" timeout="2880" /> </authentication> 第二个就是修改HTMLPage5.html的js(HTMLPage5.html可以直接复制HTMLPage4.html) 将这段获取数据的代码修改为带验证身份进行跳转的 原JS $.get('/api/userInfo', function (data) { // 从API中 // 得到返回的数据，更新 Knockout 模型并且绑定到页面UI模板中 viewModel.userinfos(data); }); 修改后的js $.ajax({ url: '/api/userinfo', type: 'GET', contentType: 'application/json; charset=utf-8', statusCode: { 200 /*Created*/: function (data) { viewModel.userinfos(data) }, 401: function (jqXHR, textStatus, errorThrown) { window.location.href = '/home/login'; } } }); Ok 到此，代码就已近编写完成了，来进行测试 测试第一步直接访问 /api/userinfo […]

龙生   13 Oct 2017
View Details

Modernizr

Modernizr 是一个利用 JS 和 CSS 来检测浏览器所支持功能的小工具。

龙生   12 Oct 2017
View Details

Respond.js

Respond.js 是一个小脚本，支持在浏览器中使用CSS3媒体查询功能。

龙生   12 Oct 2017
View Details

less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。 LESS 原理及使用方式 本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 客户端 我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码： <link rel="stylesheet/less" type="text/css" href="styles.less"> LESS 源文件的引入方式与标准 CSS 文件引入方式一样： <link rel="stylesheet/less" type="text/css" href="styles.less"> 需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。 服务器端 LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 […]

龙生   12 Oct 2017
View Details

[MYSQL]时间毫秒数转换

[MYSQL]时间毫秒数转换 java中常用bigint字段保存时间，通常将时间保存为一大串数字，每次取出需要在程序里转换，有时候程序里不方便，可以使用MYSQL自带的函数FROM_UNIXTIME(unix_timestamp,format)。 举例： 1 select FROM_UNIXTIME(1364176514656/1000,’%Y-%m-%d %h:%i:%s') as date ; 结果为： 2013-03-25 09:55:15   FROM_UNIXTIME(unix_timestamp,format) 其中unix_timestamp为字段值/1000. format可以使用的值为： %M 月名字(January……December) %W 星期名字(Sunday……Saturday) %D 有英语前缀的月份的日期(1st, 2nd, 3rd, 等等。） %Y 年, 数字, 4 位 %y 年, 数字, 2 位 %a 缩写的星期名字(Sun……Sat) %d 月份中的天数, 数字(00……31) %e 月份中的天数, 数字(0……31) %m 月, 数字(01……12) %c 月, 数字(1……12) %b 缩写的月份名字(Jan……Dec) %j 一年中的天数(001……366) %H 小时(00……23) %k 小时(0……23) %h 小时(01……12) %I 小时(01……12) %l 小时(1……12) %i 分钟, 数字(00……59) %r 时间,12 小时(hh:mm:ss [AP]M) %T 时间,24 小时(hh:mm:ss) %S 秒(00……59) %s 秒(00……59) %p AM或PM %w 一个星期中的天数(0=Sunday ……6=Saturday ） %U 星期(0……52), 这里星期天是星期的第一天 %u […]

龙生   08 Oct 2017
View Details

人类分裂了16种人格，测测你是哪一种？

“世间没有两片完全相同的树叶。”每个人都独一无二，与众不同。比方说，你可能是个社交恐惧症患者，每天像马男波杰克和长腿咸鱼一样丧气满满，而你的室友却活力值爆表，勾搭技能120分。不过，就像你总可以找到和自己相似的朋友抱团取暖，人类的性格也能按照某些指标划分成各种类别。戳链接测测自己的人格类型： https://www.16personalities.com/ch/%E4%BA%BA%E6%A0%BC%E6%B5%8B%E8%AF%95 （打不开链接的读者请用手机自带浏览器搜索16personalities.com，选择中文语言进行测试） 1921年，分析心理学之父、瑞士心理学家卡尔·古斯塔夫·荣格出版著作《心理类型》，详细阐释了人格分类的观点。后来，美国的凯瑟琳·库克·布里格斯及其女儿伊莎贝尔·布里格斯·迈尔斯在此基础上加以发展，创立了迈尔斯-布里格斯类型指标（MBTI）。该指标从精力流向、获取信息、心理活动规律和行为倾向四个维度评估人格类型。具体可划分为： （1）外倾和内倾（E/I）：外倾型的人多关注外部世界，从与他人的互动中获得动力，社交活跃，善于表达，有广泛的兴趣；内倾型的人专注于内在体验，喜欢独处，善于克制，喜欢书面沟通的方式。 （2）感觉和直觉（S/N）：感觉型的人倾向于通过感官获取具体的信息，观察敏锐细致、注重事实和细节；直觉型的人善于通过观察大局和事物之间的关联来获取信息，关注现实背后的可能，富有想象力和创造性。 （3）思维和情感（T/F）：思维型的人在作决策时，注重事实和逻辑，客观分析，理性公平；情感型的人会更多考虑人的因素，容易站在对方的角度考虑问题，追求和谐与互动，具有同情心和理解力。 （4）判断和感知（J/P）：判断型的人倾向于用判断的方式应对外部世界，喜欢有计划、有条理的生活，做事有目的、有规划；感知型的人喜欢灵活和即兴的生活方式，喜欢保持开放、接受新的信息。 将以上四个维度组合起来，总计可以形成16种人格类型。每种人格类型在人群中所占的的比例有多有少，但都有大佬产生。 苹果教的乔帮主大胆且充满想象力，拥有ENTJ（指挥官）人格类型；世界首富比尔·盖茨富有创造力，是INTP（逻辑学家）人格类型中的佼佼者；股神巴菲特来自才思敏捷的ISTJ（物流师）阵营；而史诗级巨鳄洛克菲勒则是精益求精的ESTJ（总经理）人格。除此之外，无论是众多光芒四射的影星，还是在政坛呼风唤雨的政治家，你都可以在这16种人格类型中找到他们的影子。 人格类型在职业选择方面有着广泛的应用。80%的世界500强企业使用心理人格测试来给申请者安排工作岗位。各人格类型的家庭收入、最佳工作、平均失业率和最佳专业也不一样。在不同国家和地区，不同的人格类型适配的工作也千差万别。 例如，研究显示，中美企业管理者的人格类型存在显著差异：中国管理者主要为ESTJ（总经理）人格，非管理者以ISFJ（守护者）人格为主，而美国管理者的类型主要为INFP（调停者）人格。IT从业人员中的典型为ISTJ（物流师）人格，高校图书馆员以ISFJ（守护者）人格和ISTJ（物流师）人格居多。具有ST、TJ、NT的人更适合做软件工程师，科研领域更吸引NT的人，具有NF或者SF的人倾向于从事心理学或者当老师。 总而言之，具有ST特征的人在经济、法律、外科、商业、会计及涉及机器和物质的领域更容易获得满足和成功；具有SF特征的人在社会服务、健康护理、教育（特别是小学教育）、商品销售以及服务领域更得心应手；具有NF特征的人适合从事心理学、人力资源、教育（特别是中学和大学教育）、写作和研究工作；具有NT特征的人在科学研究、电脑、数学、法律、技术领域更为擅长。 不管是生肖还是星座，在分析完人物性格后，还有一个重要环节便是寻找最佳配偶。人格类型也可以用来寻找你心仪的对象：由图中可以看出，最佳配偶之间并不是相互的，如ENFP（表演者）的最佳配偶包括INFJ（提倡者）和INTJ（建筑师），但INFJ的最佳配偶中却并不包括ENFP。而彼此能够构成神仙眷侣，互为最佳配偶的，大致有如下几组：ENFP-INTJ，ISFJ-ESFP，ISTP-ESFJ，ISTJ-ESTP，以及ENFJ/ENTJ-INFP/INTP。可见，在茫茫人海中两情相悦何其艰难。 不过，与其用算法匹配，不如听从内心。正所谓：“金风玉露一相逢，便胜却人间无数。”

龙生   07 Oct 2017
View Details

常见JS动画效果

在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。 一、轮播图： 轮播图在网页中运用较广，经常使用于头部banner，使用于电商网站中，例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型，这次就和大家说说其中的两款。轮播图的原理：点击上一张或下一张时，图片移动的距离为图片本身的宽度；点击图片下的原点导航时跳转到相应的图片位置。 1、一般的轮播图。这一类型的轮播图，在切换图片的过程中，图片会缓慢的滑动到达相应的位置，即可以看到图片到达相应位置的全过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 520px;
            }
            div.box{
                width: 520px;
                height: 280px;
                overflow: hidden;
                margin: 100px auto;
                position: relative;
            }
            ul.img{
                top: 0px;
                left: 0px;
                width: 1000%;
                position: absolute;
            }
            ul.img li{
                float: left;
                list-style: none;
            }
            ul.circle{
                left: 50%;
                bottom: 10px;
                margin-left: -75px;
                position: absolute;
            }
            ul.circle li{
                width: 20px;
                height: 20px;
                float: left;
                color: #666;
                cursor: pointer;
                margin: 0px 5px;
                list-style: none;
                text-align: center;
                border-radius: 10px;
                background: #e4e4e4;
                font: normal 12px/20px "conslas";
            }
 
            ul.arrow{
                top: 50%;
                width: 100%;
                position: absolute;
                margin-bottom: -25px;
            }
            ul.arrow li{
                width: 35px;
                height: 50px;
                color: #666;
                cursor: pointer;
                list-style: none;
                text-align: center;
                background: #ccc;
                font: 800 30px/50px "conslas";
            }
            ul.arrow li.left{
                float:left;
            }
            ul.arrow li.right{
                float: right;
            }
            ul.circle li.current{
                color:#fff;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul class="img">
                <li><img src="img/p1.jpg" alt="" /></li>
                <li><img src="img/p2.jpg" alt="" /></li>
                <li><img src="img/p3.jpg" alt="" /></li>
                <li><img src="img/p4.jpg" alt="" /></li>
                <li><img src="img/p5.jpg" alt="" /></li>
            </ul>
            <ul class="circle">
 
            </ul>
            <ul class="arrow">
                <li class="left"><</li>
                <li class="right">></li>
            </ul>
        </div>
 
        <script>
            var box=document.getElementsByTagName("div")[0];//轮播图容器
            var img=box.children[0];//图片容器
            var circle=box.children[1];//小圆点容器
            var arrow=box.children[2];//箭头容器
            var left=arrow.children[0];//左箭头
            var right=arrow.children[1];//右箭头
            var index=0;//当前显示的图片的索引
 
            //需求分析：
            //1、在最后一幅图后面添加第一幅图
            var addImg=img.children[0].cloneNode(true);
            img.appendChild(addImg);
 
            //2、动态添加小圆点，同时点亮第一个
            var circles=img.children;//小圆点的个数即所有图片的个数集合
            for(var i=1;i<circles.length;i++){
                var circleLi=document.createElement("li");
                circleLi.innerHTML=i;
                circle.appendChild(circleLi);
            }
 
            var points=circle.children;
            light();
 
            function light(){
                for(var i=0;i<points.length;i++){
                    points[i].className="";
                    if(index>4){
                        points[0].className="current";
                    }else{
                        points[index].className="current";
                    }
                }
            }
            //3、点击小圆点，ul移动到相应的图片,同时点亮小圆点
            for(var j=0;j<points.length;j++){
                points[j].index=j;
                points[j].onclick=function(){
                    index=this.index;
                    animate(img,-index*box.offsetWidth);
                    light();
                }
            }
 
            //4、左右箭头切换图片
          right.onclick=autoplay;
 
          function autoplay(){
            index++;
            if(index>circles.length-1){
                img.style.left=0;
                index=1;
            }
            animate(img,-index*box.offsetWidth);
            light();
          }
          left.onclick=function(){
             index--;
             if(index<0){
                img.style.left=-(circles.length-1)*box.offsetWidth+"px";
                index=circles.length-2;
             }
             animate(img,-index*box.offsetWidth);
             light();
          }
            //5、添加自动轮播功能
           box.timer=setInterval(autoplay,2000);
           box.onmouseover=function(){
            clearInterval(box.timer);
           }
           box.onmouseout=function(){
            clearInterval(box.timer);
            box.timer=setInterval(autoplay,2000);
           }
 
 
            function animate(obj,target){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var speed=(obj.offsetLeft>target?-20:20);
                    if(Math.abs(obj.offsetLeft-target)>20){
                        obj.style.left=obj.offsetLeft+speed+"px";
                    }else{
                        obj.style.left=target+"px";
                    }
                },20)
            }
        </script>
    </body>
</html>

  2、无缝轮播图。此类轮播图不会显示图片移动的全过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                border: none;
                list-style: none;
            }
 
            img {
                width: 310px;
                height: 220px;
            }
 
            .slider {
                width: 310px;
                height: 265px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
                cursor: pointer;
            }
 
            .slider-img {
                width: 310px;
                height: 220px;
            }
 
            ul {
                list-style: none;
            }
 
            li {
                position: absolute;
                top: 0;
                left: 0;
            }
 
            .slider-ctrl {
                text-align: center;
                padding-top: 10px;
            }
 
            .slider-ctrl-con {
                display: inline-block;
                width: 24px;
                height: 24px;
                background: url("img/icon.png") no-repeat -24px -780px;
                text-indent: -99999px;
                margin: 0 5px;
                cursor: pointer;
            }
 
            .slider-ctrl-con.current {
                background-position: -24px -760px;
            }
 
            .prev,
            .next {
                position: absolute;
                top: 40%;
                width: 30px;
                height: 35px;
                background: url("img/icon.png") no-repeat;
            }
 
            .prev {
                left: 10px;
            }
 
            .next {
                right: 10px;
                background-position: 0 -44px;
            }
        </style>
    </head>
 
    <body>
        <div class="slider" id="slider" style="overflow: hidden;">
            <div class="slider-img">
                <ul>
                    <li>
                        <a href="#"><img src="img/p1.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p2.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p3.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p4.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p5.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p6.jpg" alt="" /></a>
                    </li>
                </ul>
            </div>
            <div class="slider-ctrl">
                <span class="prev" id="prev"></span>
                <span class="next" id="next"></span>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var slider = document.getElementById("slider"); //获取元素
                var ul = document.getElementsByTagName('ul')[0];
                var lis = ul.children;
                var per = document.getElementById('prev');
                var next = document.getElementById('next');
                var imgWidth = slider.offsetWidth; //获取图片的宽度作为缓动的距离
 
                for (var i = 0; i < lis.length; i++) { //添加span，用于点击跳转到指定图片
                    var span = document.createElement('span');
                    span.innerHTML = i;
                    span.className = "slider-ctrl-con "; //添加未选中状态
                    per.parentNode.insertBefore(span, per);
                    lis[i].style.left = imgWidth + "px";
                }
 
                var num = 0; //标记索引值
                var span = document.getElementsByTagName('span'); //获取span元素
                span[0].className += " current"; //为第一个span标签状态设置为选中状态
                lis[0].style.left = 0 + "px"; //为第一张图片设置显示位置
                for (var k = 0; k < span.length; k++) {
                    span[k].onclick = function() { //为所有span标签添加点击事件（包括左右按钮）
                        if (this.className == "prev") { //当点击的是向前播放按钮时
                            //要看上一张
                            animation(lis[num], imgWidth); //当前图片缓动到右边位置
                            num = --num < 0 ? lis.length - 1 : num; //索引值设置为前一张图片的索引，当索引值小于0时则等于最后一张的索引
                            lis[num].style.left = -imgWidth + "px"; //将前一张图片瞬间移动到左侧
                            animation(lis[num], 0); //将移动到左侧的图片，缓动到显示位置
                            light(); //点亮底部相应的span标签
                        } else if (this.className == 'next') { //当点击的是向后播放按钮时
                            //要看下一张
                            autoplay(); //按自动播放顺序播放
                        } else {
                            //获取当前被点击的盒子的索引值
                            var index = this.innerHTML;
                            //中间：left = 0；左边：left = -imgWidth+“px";右边：left = +imgWidth+”px“
                            //判断点击的span和当前的图片的索引，谁大谁小
                            if (index > num) { //当点击索引值大于当前播放图片的索引值时
                                lis[index].style.left = imgWidth + "px"; //该索引值对应的图片瞬间移动到右侧
                                animation(lis[num], -imgWidth); //当前播放图片缓动到左侧
                                animation(lis[index], 0); //再缓动至当前播放位置
                                num = index; //改变索引值
                                light(); //点亮底部相应的span标签
                            }
                            if (index < num) {
                                lis[index].style.left = -imgWidth + "px";
                                animation(lis[num], imgWidth);
                                animation(lis[index], 0);
                                num = index;
                                light();
                            }
                        }
 
                    }
                }
 
                function animation(obj, target) { //缓动
                    clearInterval(obj.timer); //为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器
                    obj.timer = setInterval(function() {
                        var speed = (target - obj.offsetLeft) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为确保能搞达到最终目标值，给speed取整
                        obj.style.left = obj.offsetLeft + speed + "px"; //赋值给当前元素
                        if (target == obj.offsetLeft) { //属性达到目标值时，清理定时器
                            clearInterval(obj.timer);
                        }
                    }, 20);
                }
 
                slider.timer = setInterval(function() { //当前无操作时自动播放
                    autoplay();
                }, 2000);
 
                slider.onmouseover = function() { //鼠标进入图片区域停止自动播放
                    clearInterval(slider.timer);
                }
 
                slider.onmouseout = function() { //鼠标离开图片区域恢复自动播放
                    clearInterval(slider.timer);
                    slider.timer = setInterval(function() {
                        autoplay();
                    }, 2000);
                }
 
                function light() {
                    for (var j = 0; j < span.length - 2; j++) {
                        span[j].className = "slider-ctrl-con ";
                    }
                    span[num].className += " current";
                }
 
                function autoplay() { //封装自动播放函数
                    animation(lis[num], -imgWidth);
                    num = ++num > lis.length - 1 ? 0 : num;
                    lis[num].style.left = imgWidth + "px";
                    animation(lis[num], 0);
                    light();
                }
            }
        </script>
    </body>
 
</html>

  二、旋转木马。顾名思义，旋转木马的动画效果和游乐园中旋转木马类似，因此而得名。旋转木马的原理和轮播图其实差不多，只是旋转木马需要设置每一张图片的z-index属性，且每一张的z-index的设置精准、满意需要一定的经验。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
 
            .wrap {
                width: 1200px;
                margin: 10px auto;
            }
 
            .slider {
                height: 500px;
                position: relative;
            }
 
            .slider li {
                list-style: none;
                position: absolute;
                left: 200px;
                top: 0;
            }
 
            .slider li img {
                width: 100%;
                display: block;
            }
 
            .arrow {
                opacity: 1;
            }
 
            .prev,
            .next {
                width: 76px;
                height: 112px;
                position: absolute;
                top: 50%;
                margin-top: -56px;
                background: url(img/prev.png) no-repeat;
                z-index: 99;
            }
 
            .next {
                right: 0;
                background: url("img/next.png") no-repeat;
            }
 
            .prev {
                left: 0;
            }
        </style>
    </head>
 
    <body>
        <div class="wrap">
            <div class="slider">
                <ul>
                    <li><img src="img/1.jpg" /></li>
                    <li><img src="img/2.png" /></li>
                    <li><img src="img/3.jpg" /></li>
                    <li><img src="img/4.jpg" /></li>
                    <li><img src="img/5.jpg" /></li>
                </ul>
                <div class="arrow">
                    <div class="prev" id="prev"></div>
                    <div class="next" id='next'></div>
                </div>
            </div>
        </div>
        <script>
            var json = [{ //  0
                width: 400,
                top: 70,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            }, { // 1
                width: 600,
                top: 120,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            }, { // 2
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            }, { // 3
                width: 600,
                top: 120,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            }, { //4
                width: 400,
                top: 70,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }];
            //根据json的内容把图片缓动到相应位置，同时缓动
            var liArr = document.getElementsByTagName('li');
            var next = document.getElementById('next');
            var prev = document.getElementById('prev');
 
            function move() {
                for (var i = 0; i < liArr.length; i++) {
                    animation(liArr[i], json[i]);
                }
            }
            move()
            next.onclick = function() {
                var last = json.pop();
                json.unshift(last);
                move()
            }
            prev.onclick = function() {
                var first = json.shift();
                json.push(first);
                move();
            }
 
            function animation(obj, json, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    var flag = true;
                    //json里面有几个属性就要执行几次
                    var target = 0; //记录目标位置
                    var leader = 0; //记录当前位置
                    var speed = 0; //记录速度
                    for (var key in json) {
                        if (key == 'opacity') {
                            target = Math.round(json['opacity'] * 100) //0-100
                            leader = getStyle(obj, 'opacity') * 100 //0-100
                        } else {
                            target = parseInt(json[key]);
                            leader = parseInt(getStyle(obj, key));
                        }
                        speed = (target - leader) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        leader = leader + speed; //0-100
                        if (key == 'opacity') {
                            obj.style.opacity = leader / 100;
                            obj.style.filter = "alpha(opacity=" + leader + ")";
                        } else if (key == "zIndex") {
                            obj.style.zIndex = json['zIndex'];
                        } else {
                            obj.style[key] = leader + "px";
                        }
 
                        if (leader != target) {
                            flag = false
                        }
                    }
                    if (flag) {
                        clearInterval(obj.timer);
                        if (fn) {
                            fn();
                        }
                    }
 
                }, 20)
            }
 
            function getStyle(obj, attr) {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(obj, null)[attr]
                } else {
                    return obj.currentStyle[attr];
                }
            }
        </script>
    </body>
 
</html>

  三、楼层跳跃。该动画效果也大多使用在电商网站，当点击到相应的标签时就会跳到该位置的内容。例如：当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            ul.nav{
                position: fixed;
                top: 80px;
                left: 20px;
            }
            ul.nav li{
                width: 70px;
                height: 40px;
                color: #fff;
                cursor: pointer;
                background: #ccc;
                text-align: center;
                line-height: 40px;
                list-style: none;
                margin-top: 10px;
            }
            ul.nav .current{
                background: red;
            }
            ul.content{
                height: 500%;
            }
            ul.content li{
                height: 20%;
                text-align: center;
                font: 100px/200px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li>享品质</li>
            <li>服饰美妆</li>
            <li>家电手机</li>
            <li>电脑数码</li>
            <li>3C运动</li>
        </ul>
        <ul class="content">
            <li>享品质</li>
            <li>服饰美妆</li>
            <li>家电手机</li>
            <li>电脑数码</li>
            <li>3C运动</li>
        </ul>
 
        <script type="text/javascript">
            var color=['skyblue','yellowgreen','pink','cornflowerblue',' #87CEEB'];
            var navlis=document.getElementsByTagName("ul")[0].children;
            var contentlis=document.getElementsByTagName("ul")[1].children;
            for(var i=0;i<color.length;i++){
                contentlis[i].style.background=color[i];
            }
 
            for(var i=0;i<navlis.length;i++){
                navlis[i].index=i;
                navlis[i].onclick=function(){
                    for(var j=0;j<navlis.length;j++){
                        navlis[j].className="";
                    }
                    this.className="current";
 
                    var yPos=this.index*document.body.offsetHeight;
                    clearInterval(window.timer);
                    window.timer=setInterval(function(){
                        var speed=(yPos-scroll().top)/10;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        window.scrollTo(0,scroll().top+speed);
                        if(scroll().top==yPos){
                            clearInterval(Window.timer);
                        }
                    },30)
                }
            }
 
            window.onscroll=function(){
                var num=scroll().top/document.body.offsetHeight;
                num=Math.ceil(num*2)/2;
                if(parseInt(num)!=num){
                    num=num-0.5;
                }
                for(var j=0;j<navlis.length;j++){
                    navlis[j].className="";
                }
                navlis[num].className="current";
            }
 
            function scroll(){
                return{
                    "top":document.body.scrollTop+document.documentElement.scrollTop,
                    "left":document.body.scrollLeft+document.documentElement.scrollLeft
                }
            }
        </script>
    </body>
</html>

  四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果，通过锚点就可以实现返回顶部的效果，但此返回顶部效果是滚动条缓慢的回到顶部，这个动画效果几乎在每个网页都可以看到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html{
                height:100%;
            }
            body{
                height: 600%;
            }
            div{
                position: fixed;
                right: 30px;
                bottom: 20px;
                display: none;
 
            }
        </style>
    </head>
    <body>
        <div>
            <img src="Top.jpg" />
        </div>
 
        <script type="text/javascript">
            var div=document.getElementsByTagName("div")[0];
            var img=div.children[0];
            window.onscroll=function(){
                if(scroll().top>100){
                div.style.display="block";
            }else{
                div.style.display="none";
                }
            }
 
            img.onclick=function(){
                clearInterval(img.timer);
                img.timer=setInterval(function(){
                    var speed=(0-scroll().top)/10;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    window.scrollTo(0,scroll().top+speed);
                    if(scroll().top==0){
                        clearInterval(img.timer);
                    }
                },30)
            }
 
 
            function scroll(){
                return{
                   "top":document.documentElement.scrollTop+document.body.scrollTop,
                   "left":document.documentElement.scrollLeft+document.body.scrollLeft
                }
            }
        </script>
    </body>
</html>

  常见的JS动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。   from:https://my.oschina.net/sichunchen/blog/1544549

龙生   01 Oct 2017
View Details
1 2 3 4

Copyright © 2025 Longsheng All rights reserved