页面营造和js前端不得不说的那一点事情,动画总括

页面打造和js前端不得不说的那一点事儿

2012/10/30 · CSS,
JavaScript · 1
评论 ·
CSS,
Javascript

来源:微博UDC –
张传亮

用作和讯的页面打造工程师,主要任务就是接纳html&css,高质量的落成静态页面的创制,保险项目标如期落成。而页面须求的js效果则交由下游的js前端工程师去做。在知乎,那七个职位是分其他。但在豪门的想想定势里只怕以为这多少个岗位应由1人来形成最好,毕竟,页面营造工程师写的html结构不必然是js工程师想要的那种,js工程师或然有更敏捷的措施。所以,在页面营造以前最好能与js工程师沟通一下,把已毕方案规定好。

澳门葡京 1

但在骨子里项目流程中,当进行到页面创设的时候,产品老板大概还没布置到js能源,那时咱们不得不根据产品的要求和调谐的想法去写html结构,不仅要考虑到设计稿的还原度、浏览器的包容性、未来或者要丰硕的新作用的预知位置,还要考虑怎么样写html结构能让js最方便的落成产品的相互效能。作为一名有义务感的页面创设工程师,表示Alerander!所以,大家平常翻看页面源码时,会发现那样的注释,用来报告js工程师怎么去操作dom结构。

澳门葡京 2

突发性为了做到最简,大家要考虑长久,前一阵子的London奥林匹克-运动会(Olympic-Games),网易首页左边要添加2个奥运金牌榜的模块,须要有收起和进展的按钮,用来突显不相同的内容。

澳门葡京 3

对网站的话那是很松散平日的竞相功用。具体html完毕只怕有同学会想到,做多少个div,各自包涵展开的始末和收受的内容。在点击展开按钮时出现七个,另一个逃匿;而在点击收起的时候做反而的处理。那种事小编也绝非对与错,能落实效益就好。但作为出现在乐乎首页的模块,并且出现在率先屏的职责,对品质的优化肯定是要做足的。能尽大概在我们css这一层做的,决不放到js那边去做。作者的处理方式是把收起开展的体制都写好,放在一块儿,让js在默许展开或点击展开的时候显示turn_olym_on,在点击收起的时候更换为turn_olym_off,那样js就只是更换三个class名的代码量,而对于举办收起的五个按钮,我也经过转移的class名来显示和隐身。

具体html代码:
澳门葡京 4

在那里把具有应用的代码全体坐落一块儿,把某种情状时毫无展现的隐藏掉,比如展开状态时,class=”show_less
W_linecolor”的div和举行的按钮class=”W_moredown”不用呈现,就可以在最外层的div上写:
澳门葡京 5

css目前隐没掉这两成分:
澳门葡京 6

而当收起的时候,最外层的div就改成:
澳门葡京 7

css则把以前隐藏的三个要素突显出来,并把须要隐藏的排名榜四五名class=”no_45″的tr标签、赛事重点的class=”show_more”及接受的按钮class=”W_moreup”隐藏:
澳门葡京 8

那样,就只须求js在点击收起的时候把turn_olym_on换成turn_olym_off,而点击展开的时候把turn_olym_off换成turn_olym_on就足以了,其余的潜伏浮现全体有css来解决。

总结:

打听部分上下游工作的知识,让上下游关系更顺畅,进步工作功效,是大家一道的目标。
页面打造的办事,面临着很多的挑衅,眼前html5的新标签、高级浏览器原生辅助的各类api,还有css3非同平日好玩的新属性等等。。。都急需大家去上学,不求完全了然,但求能领会了解,能清楚是怎么回事。把学到的新知识应用到骨子里项目中,对合营社对集体对友好都方便~

元芳,你怎么看?

赞 收藏 1
评论

澳门葡京 9

澳门葡京 10

css样式接纳器

标签上设置style属性:

<body>
    <div style="background-color: #2459a2;height: 48px;">第一层</div>
    <div style="background-color: #2459a2;height: 48px;">第二层</div>
    <div style="background-color: #2459a2;height: 48px;">第三层</div>
</body>

直白在div里写相对应的体裁

id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">第一层</div>
</body>

把体制写到head里面,以#页面营造和js前端不得不说的那一点事情,动画总括。开班命名,调用对应样式在div里用id属性指定相应的id名

class选择器(最常用)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div class="c1">第一层</div>
     <div class="c1">第二层</div>
     <div class="c1">第三层</div>
</body>

把体制写到head里面,以.起首命名,调用对应样式在div里用class属性指定相应的类名,可以五个div调用

标签采取器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>
     <div >第二层</div>
     <div >第三层</div>
</body>

标签选用器,设置div样式,则body里有所的div标签内的始末都会动用此内容

事关采取器(层级选用器)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>

        <div >span里的div</div>

     <div >第三层</div>
</body>

只让span里面的div标签应用样式,可多层嵌

整合拔取器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div id="i1">第一层</div>
     <div id="i2">第一层</div>
     <div id="i3">第一层</div>
</body>

结合拔取器,加,号,相同样式多命名

天性采取器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name="James"]{width: 20px;height: 20px;}
    </style>
</head>
<body>
    <input type="text" name="James">
    <input type="text">
    <input type="password">
</body>

据悉属性举行筛选匹配,唯有首先个input标签匹配上对应的体裁

 

 

(1)首先是页面的布局局地

css样式引用

css样式优先级

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            background-color:black;
        }
    </style>
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>

设若体制不争执,则样式都接纳,要是体制有争持,style样式优先级最大,其次其余的安装编写的顺序,越靠近越优先

文件情势引用样式

概念样式并保留到commons.css文件

.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}

引用commons.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>

  

对读过的几篇文章的下结论,尽量保障逻辑性,不断填补、精简、修正。
背后会列出参考文章地址,方便将来取用。感激各位笔者以及翻译者。

对于本人那种左右切换式

css样式边框

大旨边框

<body>
    <div style="border: 1px dotted red;">
        第一层边框
    </div>
<!--border:边框宽度  solid:边框样式实线(dotted虚线)颜色:red-->
</body>

边框其余样式

<body>
    <div style="height: 48px;
    width: 80%;
    border: 1px solid brown;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    ">第二层边框</div>

    <!--height: 48px 边框高度-->
    <!--width: 80% 宽度页面的80%-->
    <!--border: 1px solid brown 边框宽度、样式、颜色-->
    <!--font-size: 16px;  字体大小-->
    <!--text-align: center; 水平居中-->
    <!--line-height: 48px; 垂直居中-->
</body>

-》》点击显示效果 

 

  • AngularJS
    动画思考

    • 一、怎样采取

        • 1)大家须求打造什么
        • 2)怎样让它工作
        • 3)开端大家的次序
          • (1)
            文件结构,如下
          • (2) index.html
            :
          • (3) Angular 程序
            app.js:
          • (4) 视图 page-home.html, page-about.html,
            page-contact.html:
          • (5) 为App添加动画成效style.css:
            • CSS动画
            • 进入和离开动画效果
            • 具体页面的卡通效果
          • (6)预览地址:
    • 二、进阶

        • 1)其他类
          class
        • 2)注意事项
    • 参考文档

1.率先是个外围部分(其实相当于最外边的一体化wrapper)

CSS样式浮动

初识float

<body>
    <div style="width: 20%;background-color: red;float: left;">左边</div>
    <div style="width: 80%;background-color: black;float: right;">右边</div>
</body>

-》》点击突显效果

float测试页

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="pg-header">
        <div style="float: left;">*收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="clear: both"></div>
    </div>
</body>

-》》点击突显效果

注:<body
style=”margin: 0 auto;”>化解与浏览器顶部之间的裂缝;<div style=”clear:
both”></div>子边框浮动后,显示父边框的边框线

 

一、怎么着利用

在angular中大家选拔 ngAnimate 添加过渡和动画片效果。

透过三个为 ng-view 添加动画成效的例证来演示使用格局

2.接着就是你设置图片轮播的地点(也等于五个banner吧)

CSS样式display

块级标签和行内标签相互转换

<body>
    <div style="background-color: red;display: inline">块级</div>
    行内
</body>

-》》点击突显效果

注:display:inline
转换为行内标签;display:block转换为块级标签;另还有display:none不显得

行内标签:不可以设置中度,宽度,padding margin

块级标签:设置高度,宽度,padding margin

<body>
    行内
    <div style="background-color: red;display: inline">块级</div>
</body>

-》》点击突显效果

注:display:inline-block
既有inline的性质(暗中认同本身有些许占多少)又有block的本性(可以设置高度、宽度、padding、margin)

 

1)大家必要创设什么

  • 使用 ngRoute 来为我们的页面路由

  • 使用 ngAnimate 来为页面创造动画效果

  • 对页面使用 CSS Animations

  • 当大家距离或进入试图时,我们的每二个页面会有例外的动画片效果

3.然后是多个图片组(可以用新的div 也可以直接使用 ul–>li方式)

CSS样式边距

外边距margin

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        margin-top: 25px;"></div>
    </div>
</body>

-》》点击展现效果

注:margin-top:25px意味外边距,子边框与父边框top之间的偏离为25px

内边距padding

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        padding-top: 25px;"></div>
    </div>
</body>

-》》点击突显效果

注:padding-top:25px表示内边距,子边框内自身与top之间的距离为25px

 

2)如何让它工作

ngAnimate 会依据是进入依旧距离视图来为差距的Angular
指令(directive)添加和移除不一致的CSS类名。例如,当大家加载网站时,无论ng-view中填充了何等都会得到一个.ng-enter的类名。

大家所必要做的就是给.ng-enter
类名添加CSS动画效果,该动画在进入的时候会自动生效。

ngAnimate 可以利用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow,
ngHide, ngView 以及 ngClass

澳门葡京 11澳门葡京 12

4.然后是图形两端的左箭头和右箭头
5.然后是3个透明背景层,放在图片尾部

CSS样式position

**fixed一定到浏览器有个别地方(也就是float)**

重回顶部按钮

有个须求,好多页面都有再次回到顶部的按钮,随着你页面的下拉,按钮永远在页面的右下角,下边就来完成:

<body>
    <div style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd";>
    </div>
</body>

贯彻动态效果,点击再次回到

<body style="margin: 0 auto">
    <div onclick="GoTop();"  style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;margin: 0;">ddddddddddddd
    </div>

    <script>
        function GoTop() {
            document.body.scrollTop=0;
        }
    </script>
</body>

稳定菜单栏:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body style="margin: 0">
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>

relative+absolute(相对与relative固定路径)

<body>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
</body>

多层模态

用了position样式完成三层页面;当页面整个浮动在上头的时候,如若想让页面全部覆盖底层页面,要用到top,right,left,bottom属性,而非margin-top、margin-left….

<body
    <div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;
    background-color: white;height: 500px;width: 500px"></div>

    <div style="z-index:9;position: fixed;background-color: black;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.5"></div>

    <div style="height: 5000px;background-color: green"></div>
</body>

当页面出现多层时,用z-index:10数值来分明浮动层的内外关系;opacity:0.5安装页面光滑度(1表示完全覆盖);fixed;top: 一半;left:
十分之五;margin-left:-250px;margin-top:-250
px最顶层的div举办居中处理;

 

3)开头我们的次第

6.然后是一个图形描述info层,放在透明背景层的左下角(div 或 ul–>li)

CSS样式overflow

偶然会有这种状态现身,看示例

<body>
    <div style="height: 200px;width:140px;overflow: hidden ">
        <img src="i.png" />
    </div>
</body>

外层定义div中度和增幅后,最终彰显的效劳如故以图纸的尺寸为准的,图片把外围div给撑开了,那时候可以用到上面俩个属性

overflow:auto 图片出现滚动条

<body>
    <div style="height: 200px;width:140px;overflow: auto">
        <img src="i.png" />
    </div>
</body>

overflow:auto
图片只突显div设置的尺寸,其余一些隐藏

<body>
    <div style="height: 200px;width:140px;overflow: hidden">
        <img src="i.png" />
    </div>
</body>

  

(1) 文件结构,如下
- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html

7.然后是1个按钮层,用来恒定图片组的index吧,放在透明背景层的右下角(div
或 ul–>li)

CSS样式hover

可以看一下抽屉网的顶部条栏,当鼠标移动到选项栏时,背景颜色相会世变化;上边就来试试搞一下以此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
            color: white;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display:inline-block;
            padding: 0 10px 0 10px;
        }
        .pg-header .menu:hover{
            background-color: #BF1919;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a >LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
            <a class="menu">爆文</a>
        </div>
    </div>
    <div class="pg-body">
    </div>
</body>
</html>

其中.pg-header
.menu:hover{background-color:
#BF1917}指定当鼠标滑过引用.menu字段时,字段样式变成新定义的体制

 

(2) index.html :

加载 AngularJS, ngRoute 以及 ngAnimate。用 bootstrap.css 来定义样式。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

    <!-- CSS -->
    <!-- load bootstrap (bootswatch version) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS -->
    <!-- load angular, ngRoute, ngAnimate -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
    <script src="app.js"></script>

</head>

<!-- apply our angular app -->
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>

</body>
</html>

透过,可以先构造出html结构

CSS样式background

以前平昔在用backgroud样式基本上都以设置背景颜色什么,其实background还是能安装背景为图片

background-image

<body>
    <div style="background-image: url('i.png');height: 700px;width: 700px">
    </div>
</body>

默许div框架有多大,图片重复放置占的岗位就有多大

background-repeat

<body>
    <div style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">
    </div>
</body>

background-repeat有八个属性repeat(默许,重复占满)、no-repeat(不另行)、repeat-x(只横器重新放)、repeat-y(只竖着再度放)

background-position-x、background-position-y

展现图片中一定的职责图标

<body>
    <div style="background-image: url('icon.png');height: 20px;width: 20px;
    border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
</body>

background-position-x表示看背景图片的窗口水平方向想右移动,background-position-y代表看背景图片的窗口垂直向下移动;两者可以简写成:

<body>
    <div style="background-image: url('icon.png');height: 20px;width: 20px;
    border: 1px solid red;background-position:20px 40px"></div>
</body>

本着background全部还有特别简约的写法:

element.style {
    background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;
    background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);
    background-position-x: -105px;
    background-position-y: -212px;
    background-size: initial;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(248, 248, 248);

background: #f8f8f8
url(image/5.png) -105px -212px no-repeat;
同时设定了颜色,图片,地点,是或不是repeat

 

 

Python开发【前端】:HTML-》》http://www.cnblogs.com/lianzhilei/p/6038646.html

Python开发【前端】:JavaScript–》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python开发【前端】:DOM–》》http://www.cnblogs.com/lianzhilei/p/6072367.html

 

(3) Angular 程序 app.js:

成立程序、路由以及控制器。

// app.js

// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'mainController'
        })

        // about page
        .when('/about', {
            templateUrl: 'page-about.html',
            controller: 'aboutController'
        })

        // contact page
        .when('/contact', {
            templateUrl: 'page-contact.html',
            controller: 'contactController'
        });

});


// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});

// about page controller
animateApp.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

// contact page controller
animateApp.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});
<div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
      <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
(4) 视图 page-home.html, page-about.html, page-contact.html:

为每种页面准备一些文字以及链到其余页面的链接地址。

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-contact.html -->
<h1>Tons of Animations</h1> 
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

相对于事先,知识充实了五个箭头img标签

(5) 为App添加动画成效 style.css:

ngAnimate为大家的ng-view添加的多个类分别是.ng-enter和.ng-leave

(2)CSS样式部分(图片组的处理)跟淡入淡出式就不雷同了

CSS动画
/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
    0%         { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%     { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to         { transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to         { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from     { opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
    from     { transform:translateX(100%); }
    to         { transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from     { transform:translateY(100%); }
    to         { transform: translateY(0); }
}

淡入淡出只需求体现或然隐藏对应序号的图样就行了,间接通过display来设定

进入和离开动画效果

大家只须要将这个动画片效果应用给.ng-enter 或
.ng-leave就足以为大家的页面添加不用的动画片效果。

/* style.css */
...

    .ng-enter             { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
    .ng-leave             { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

...

左右切换式则是选用图片li 浮动,父层元素ul
总宽为总图片宽,并设定为有限banner宽度下埋伏超出宽度的有些

切实页面的卡通片效果
...

    .ng-enter         { z-index: 8888; }
    .ng-leave         { z-index: 9999; }

    /* page specific animations ------------------------ */

    /* home -------------------------- */
    .page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
    .page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

    /* about ------------------------ */
    .page-about.ng-enter         { animation:slideInRight 0.5s both ease-in; }
    .page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

    /* contact ---------------------- */
    .page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
    .page-contact.ng-enter         { animation:slideInUp 0.5s both ease-in; }

...

下一场当想切换成某序号的图纸时,则使用其ul 定位 left样式设定相应属性值完结

(6)预览地址:

例如显示第3、张图纸初叶定位left为0px, 要想体现第3张图片则须要left:-400px
处理

二、进阶

<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>

1)其他类 class

  • ng-enter-activeng-leave-active

    对于 ng-repeat
    紧借使对二个list的来得,这几个因素是是被创制出来参加到DOM结构中去的,那么,它的动画片进程为

    创建元素 -> .ng-enter -> .ng-enter-active -> 完成,呈默认状态
    默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
    

    可以通过设置.ng-enter(.ng-leave) 和
    .ng-enter-active(.ng-leave-active)
    的体裁,加上css3的卡通来体现出动画,如:

    <!-- HTML片段 -->
    <div ng-init="users = [1,2,3,4,5]"></div>
    <input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
    <ul>
    <li class="item" ng-repeat="user in users | filter: u as result">
      {{user}}
    </li>
    </ul>
    
    /* css片断 */
    /*ng-repeat的元素*/
    
    .item{
      -webkit-transition: all linear 1s;
      -o-transition: all linear 1s;
      transition: all linear 1s;
    }
    /*动画开始前*/
    .item.ng-enter{
      opacity:0;
    }
    /*动画过程*/
    .item-ng-enter-active{
      opacity:1;
    }
    
  • ng-enter-stagger

    地点的功效是对全体因素同时拔取,或许实际使用中必要有1个主次的渐变出现的功力,那时候可以安装ng-enter-stagger来实现.

    /*不同时出现*/
    .item.ng-enter-stagger {
        transition-delay:0.5s;
        transition-duration:0;
    }
    
  • ng-enter-prepare

    那是2个破例的类,可以在其实的动画片开端之前预防不要求的闪亮的情节。

    <div ng-class="{red: myProp}">
     <div ng-class="{blue: myProp}">
      <div class="message" ng-if="myProp"></div>
     </div>
    </div>
    

    恐怕在输入动画时期,.message div将在起始动画化此前被急促地来看。
    在那种情景下,可以向CSS添加底下的体裁,以担保在动画运行前成分保持隐身

    .message.ng-enter-prepare {
      opacity: 0;
    }
    
  • ng-animate-ref

    通过使用名为ng-animate-ref的性质配对元素,来跨应用程序的结构区域(如视图)之间穿插动画成分的意义。
    tips:自个儿知道为,跨页面的配对成分之间的交接效果
    法定例子:

(3)页面基本已经创设好久得以开展js的拍卖了

2)注意事项

  • 使用 ng-hide 时需加上

    .ng-hide-add,.ng-hide-remove{ 
    display: block!important; 
    }
    

    严防瞬间隐身

  • 关于ng-showng-hideng-if的区别(有时机单独写一篇总括)。

    简言之地说:
    ng-if:成分存在不设有。
    ng-showng-hide:成分展现不出示(本人是存在的)。

    诸如:列表最后一行元素的底下框隐藏,ng-showng-hide会出标题。

    li:last-child{
    border-bottom:none;
    }
    

    又比如:ionic的header里按钮的存在或然展现对标题字数的震慑。

一、jQuery方式

参考文档

  • [原]

    [译]

照常先说jq处理

1.全局变量等

 var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数

2.自行切换定时器处理

   // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

3.为左右箭头添加事件处理

左箭头

  //左箭头滑入滑出事件处理
  $("#prev").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //左箭头点击处理
  $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });

右箭头

 //右箭头滑入滑出事件处理
  $("#next").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });

中间autoChangeAgain()就是一个重置定时器函数

//清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

里面changeTo()就是多个图片切换的处理函数

function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }

每传入贰个图片序号,则按理举行goLeft

4.为右下角的那个li 按钮绑定事件处理

//对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });

jq就是这么,简便,原生代码量就有个别多了

总体代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播 jq(左右切换)</title>
<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}
  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
  <div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript">
  var curIndex = 0, //当前index
      imgLen = $(".imgList li").length; //图片总数
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);
   //左箭头滑入滑出事件处理
  $("#prev").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //左箭头点击处理
  $("#prev").click(function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  });
  //右箭头滑入滑出事件处理
  $("#next").hover(function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  },function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  });
  //右箭头点击处理
  $("#next").click(function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  });
  //对右下角按钮index进行事件绑定处理等
  $(".indexList").find("li").each(function(item){ 
    $(this).hover(function(){ 
      clearInterval(autoChange);
      changeTo(item);
      curIndex = item;
    },function(){ 
      autoChangeAgain();
    });
  });
  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen-1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }
  function changeTo(num){ 
    var goLeft = num * 400;
    $(".imgList").animate({left: "-" + goLeft + "px"},500);
    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
  }
  </script>
</body>
</html>

二、js 原生完毕

js原生大约相当于模拟jq的完成思路

1.全局变量等

var curIndex = 0, //当前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组

2.机动切换定时器处理

    // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

一致的,有壹个重置定时器的函数

 //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

3.因为有局地class呀,所以来多少个class函数的效仿也是亟需的

 //通过class获取节点
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判断obj是否有此class
  function hasClass(obj,cls){  //class位于单词边界
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
   }
   //给 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className += cls;
    }
  }
  //移除obj对应的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }

4.要左右切换,就得模拟jq的animate–>left .

本人的笔触就是动态地设置element.style.left
举行固化。因为要有1个安份守己的进程,所以加上的一点点品级处理。

定位的时候left的设置也是有点复杂的..要考虑方向等境况

 //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动,10阶每阶40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }

地点也旁观了,小编初阶了left的值为0px

小编试过了,假设不起来可能把起先的left值写在行内css样式表里边,就总会报错取不到

故此直接在js中开首化或许在html中内嵌初步化也可。

5.接下来就是切换的函数已毕了,比如要切换来序号为num的图样

//左右切换处理函数
  function changeTo(num){ 
    //设置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*400); //左移一定距离
    //设置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //设置image的控制下标 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }

6.然后再给左右箭头还有右下角那堆index绑定事件处理

 //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器,并作变换处理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠标滑出则重置定时器处理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  };

   //给右箭头next添加下一个事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

7.最终的尾声,没啥了. 噢好像还要调用一下下特别 add伊芙nt() ..

总体代码  代码量有个别冗杂..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播 js原生(左右切换)</title>
<style type="text/css">
  body,div,ul,li,a,img{margin: 0;padding: 0;}
  ul,li{list-style: none;}
  a{text-decoration: none;}

  #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
  #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
  .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
  .imgList li{float:left;display: inline;}
  #prev,
  #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
  #prev{left: 10px;}
  #next{right: 10px;}
  #prev:hover,
  #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
  .infoList li{display: none;}
  .infoList .infoOn{display: inline;color: white;}
  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
  .indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
  <div id="wrapper"><!-- 最外层部分 -->
    <div id="banner"><!-- 轮播部分 -->
      <ul class="imgList"><!-- 图片部分 -->
        <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
      <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
      <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
      <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
      <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
      </ul>
      <img src="./img/prev.png" width="20px" height="40px" id="prev">
      <img src="./img/next.png" width="20px" height="40px" id="next">
      <div class="bg"></div> <!-- 图片底部背景层部分-->
      <ul class="infoList"><!-- 图片左下角文字信息部分 -->
        <li class="infoOn">puss in boots1</li>
        <li>puss in boots2</li>
        <li>puss in boots3</li>
        <li>puss in boots4</li>
        <li>puss in boots5</li>
      </ul>
      <ul class="indexList"><!-- 图片右下角序号部分 -->
        <li class="indexOn">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
  var curIndex = 0, //当前index
      imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgArr.length,
      infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //获取图片info组
      indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //获取控制index组
     // 定时器自动变换2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen -1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //调用变换处理函数
    changeTo(curIndex); 
  },2500);

  //清除定时器时候的重置定时器--封装
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //调用变换处理函数
      changeTo(curIndex); 
    },2500);
    }

  //调用添加事件处理
  addEvent();

  //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器,并作变换处理
    indexArr[_i].onmouseover = function(){ 
      clearTimeout(autoChange);
      changeTo(_i);
      curIndex = _i;
    };
    //鼠标滑出则重置定时器处理
    indexArr[_i].onmouseout = function(){ 
      autoChangeAgain();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var prev = document.getElementById("prev");
  prev.onmouseover = function(){ 
    //滑入清除定时器
    clearInterval(autoChange);
  };
  prev.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
    changeTo(curIndex);
  };
  prev.onmouseout = function(){ 
    //滑出则重置定时器
    autoChangeAgain();
  };

   //给右箭头next添加下一个事件
  var next = document.getElementById("next");
  next.onmouseover = function(){ 
    clearInterval(autoChange);
  };
  next.onclick = function(){ 
    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
    changeTo(curIndex);
  };
  next.onmouseout = function(){ 
    autoChangeAgain();
  };
}

  //左右切换处理函数
  function changeTo(num){ 
    //设置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*400); //左移一定距离
    //设置image 的 info
    var curInfo = getElementsByClassName("infoOn")[0];
    removeClass(curInfo,"infoOn");
    addClass(infoArr[num],"infoOn");
    //设置image的控制下标 index
    var _curIndex = getElementsByClassName("indexOn")[0];
    removeClass(_curIndex,"indexOn");
    addClass(indexArr[num],"indexOn");
  }


  //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 400){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动,10阶每阶40px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }

  //通过class获取节点
  function getElementsByClassName(className){ 
    var classArr = [];
    var tags = document.getElementsByTagName('*');
    for(var item in tags){ 
      if(tags[item].nodeType == 1){ 
        if(tags[item].getAttribute('class') == className){ 
          classArr.push(tags[item]);
        }
      }
    }
    return classArr; //返回
  }

  // 判断obj是否有此class
  function hasClass(obj,cls){  //class位于单词边界
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
   }
   //给 obj添加class
  function addClass(obj,cls){ 
    if(!this.hasClass(obj,cls)){ 
       obj.className += cls;
    }
  }
  //移除obj对应的class
  function removeClass(obj,cls){ 
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
         obj.className = obj.className.replace(reg,'');
    }
  }

  </script>
</body>
</html>

上述所述就是本文的全部内容了,希望大家可以喜欢。

你只怕感兴趣的篇章:

  • js已毕下一页页码效果
  • javascript分页代码(当前页码居中)
  • 某页码突显的helper
    少量调动,另附js版
  • javascript
    协助页码格式的分页类
  • javascript结合CSS落成苹果开关按钮特效
  • js完结图片无缝滚动特效
  • 五个大概的JS鼠标悬停特效具体方法
  • js文字横向滚动特效
  • js达成文字闪烁特效的措施
  • 二十几个Javascript弹出窗口特效整理
  • 匹配多浏览器的字幕特效Marquee的通用js类
  • 澳门葡京 ,纯JS已毕可用于页码更换的飞页特效示例

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website