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

Category Archives: JavaScript

bootstrap 模态框动态加载数据

1.页面中添加modal <!-- 模态框（Modal） --> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="width:900px;"> <div class="modal-content"> //内容动态填充 </div><!-- /.modal-content --> </div><!-- /.modal --> </div> 2.数据格式。页面动态生成a 标签 <a data-toggle=’modal' data-target=’#showModal' onclick=targetto('" + row.id + "')>"+ row.title+"</a>"; 3.单击事件 function targetto(id){ $("#showModal").modal({ remote: "showAction.action?id="+id }); } 4.每次隐藏时，清除数据。确保点击时，重新加载 $("#showModal").on("hidden.bs.modal", function() { $(this).removeData("bs.modal"); }); 5.基于bootstrap3.其他版本，请自己Google，如有雷同,纯属巧合，如有需要，欢迎分享。   from:https://www.cnblogs.com/youmingkuang/p/6214610.html

龙生   06 May 2018
View Details

JS倒计时两种种实现方式

最近做浏览器界面倒计时，用js就实现，两种方式： 一：设置时长，进行倒计时。比如考试时间等等 代码如下：

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
<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">        
            var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!  
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("还剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
                    alert("时间到，结束!");
                }
            }
            timer = setInterval("CountDown()", 1000);                
        </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</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
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>js简单时分秒倒计时</title>  
    <script type="text/javascript">  
        function countTime() {  
            //获取当前时间  
            var date = new Date();  
            var now = date.getTime();  
            //设置截止时间  
            var str="2017/5/17 00:00:00";
            var endDate = new Date(str);
            var end = endDate.getTime();  
            
            //时间差  
            var leftTime = end-now;
            //定义变量 d,h,m,s保存倒计时的时间  
            var d,h,m,s;  
            if (leftTime>=0) {  
                d = Math.floor(leftTime/1000/60/60/24);  
                h = Math.floor(leftTime/1000/60/60%24);  
                m = Math.floor(leftTime/1000/60%60);  
                s = Math.floor(leftTime/1000%60);                    
            }  
            //将倒计时赋值到div中  
            document.getElementById("_d").innerHTML = d+"天";  
            document.getElementById("_h").innerHTML = h+"时";  
            document.getElementById("_m").innerHTML = m+"分";  
            document.getElementById("_s").innerHTML = s+"秒";  
            //递归每秒调用countTime方法，显示动态时间效果  
            setTimeout(countTime,1000);  
  
        }  
    </script>  
</head >  
<body onload="countTime()" >  
    <div>  
        <span id="_d">00</span>  
        <span id="_h">00</span>  
        <span id="_m">00</span>  
        <span id="_s">00</span>  
    </div>  
</body>  
</html>

运行结果： from:https://www.cnblogs.com/heizai002/p/6862418.html

龙生   08 Jan 2018
View Details

React Native 开发之 IDE 选型和配置

React Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。 React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 Android Studio（不要告诉我你还在使用 Eclipse），iOS 平台只能使用 XCode，而开发 Javascript 的 IDE 选择就多了，从 FaceBook 官方推荐的 Atom＋Nuclide，到与 Android Studio 同系列的 Javascript IDE WebStorm，再到功能强大的 Sublime Text 3，以及微软推出的 Visual Studio Code 和 decosoftware 专门为 React Native 打造的开源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用来开发 React Native，唯一的前提能够支持识别 Javascript 语法，识别 JSX 和 React Native API 的智能提醒。接下来我们就来介绍最常用的五款 IDE 的配置和选型。 Atom＋Nuclide   Atom 是由 Github 打造的下一代编程开发利器，支持 Windows、Mac OS X、Linux 三大桌面平台，免费且开源。Atom 支持各种编程语言的代码高亮，同时具备强大的代码补全功能，能够极大的提高编程效率，Atom 本质上是一个文本编辑器，而不是一个 IDE，因此在用来开发 React Native 时需要配合 Nuclide 一起使用。 Nuclide 是 Facebook 基于 Atom 的基础上开发的一个插件 IDE，可以用来开发 React Native，iOS […]

龙生   29 Nov 2017
View Details

JS离开页面执行函数 onbeforeunload与onunload事件

阅读目录 onbeforeunload定义和用法 onunload定义和用法 在最近的项目中，需要做到一个时间，就是用户离开页面的时候，我需要缓存页面其中一部分的内容，但是我不需要用户刷新的时候也缓存，我只希望在我用户离开的时候 执行这个函数。百度之，有onbeforeunload与onunload这两个事件，但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的，所以想在这里做一个小小的总结   onbeforeunload与onunload事件 onbeforeunload定义和用法 onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。 对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。 但你可以自定义一些消息提示与标准信息一起显示在对话框。 注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。 注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。 使用方法： 1、 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>test</title> </head> <body onbeforeunload="return test()">      </body> <script type="text/javascript">     function test(){         return "你确定要离开吗";     } </script> </html> 或者： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8"> […]

龙生   28 Nov 2017
View Details

jQuery:checked Selector

Description: Matches all elements that are checked or selected. version added: 1.0jQuery( ":checked" ) The :checked selector works for checkboxes, radio buttons, and options of select elements. To retrieve only the selected options of select elements, use the :selected selector. Examples: Determine how many input elements are checked. 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 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> div […]

龙生   16 Nov 2017
View Details

jquery操作复选框(checkbox)的12个小技巧总结

1、获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type=’checkbox']:checked").val(); 或者 $("input:[name=’ck']:checked").val(); 2、 获取多个checkbox选中项 $('input:checkbox').each(function() { if ($(this).attr('checked') ==true) { alert($(this).val()); } }); 3、设置第一个checkbox 为选中值 $('input:checkbox:first').attr("checked",’checked'); 或者 $('input:checkbox').eq(0).attr("checked",’true'); 4、设置最后一个checkbox为选中值 $('input:radio:last').attr('checked', 'checked'); 或者 $('input:radio:last').attr('checked', 'true'); 5、根据索引值设置任意一个checkbox为选中值 $('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2…. 或者 $('input:radio').slice(1,2).attr('checked', 'true'); 6、选中多个checkbox同时选中第1个和第2个的checkbox $('input:radio').slice(0,2).attr('checked',’true'); 7、根据Value值设置checkbox为选中值 $("input:checkbox[value=’1′]").attr('checked',’true'); 8、删除Value=1的checkbox $("input:checkbox[value=’1′]").remove(); 9、删除第几个checkbox $("input:checkbox").eq(索引值).remove();索引值=0,1,2…. 如删除第3个checkbox: $("input:checkbox").eq(2).remove(); 10、遍历checkbox $('input:checkbox').each(function (index, domEle) { //写入代码 }); 11、全部选中 $('input:checkbox').each(function() { $(this).attr('checked', true); }); 12、全部取消选择 $('input:checkbox').each(function () { $(this).attr('checked',false); }); from:http://www.jb51.net/article/46469.htm

龙生   16 Nov 2017
View Details

jQuery判断checkbox是否选中的3种方法

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
方法一：
if ($("#checkbox-id").get(0).checked) {
    // do something
}
 
方法二：
if($('#checkbox-id').is(':checked')) {
    // do something
}
 
方法三：
if ($('#checkbox-id').attr('checked')) {
    // do something
}
在jQuery1.6版本之后，取复选框有没有被选中，要用prop
if($('#checkbox-id').prop('checked'))
{
　　//do something
}
 
function checkInfo(){
  $("input[name='org3.otherValues']").each(
   function(){
   if($(this).get(0).checked){
   return true;
    }
   });
  var org3_ids=$("#org3_ids").val();
  if(org3_ids!=''){
   return true;
  }
  
  alertMsg.warn("请选择接收人！");
  return false;
}

from:https://www.cnblogs.com/youmingkuang/p/5864190.html

龙生   16 Nov 2017
View Details

jQuery 判断页面元素是否存在的代码

例如： 代码如下: document.getElementById("someID").innerText("hi"); 如果ID为"someID"的元素不存在，我们将得到Javascript运行错误：document.getElementById("someID") is null 正确的写法应该是： 代码如下: obj = document.getElementById("someID"); if (obj){ obj.innerText("hi"); } 那么在jQuery，我们如何判断页面元素存在与否呢？如果参照上面的传统Javascript的写法，我们第一个想到的办法一定是： 代码如下: if ($("#someID")){ $("#someID").text("hi"); } 可是这么写是不对的！因为jQuery对象永远都有返回值，所以$("someID") 总是TRUE ，IF语句没有起到任何判断作用。正确的写法应该是： 代码如下: if ( $("#someID").length > 0 ) { $("#someID").text("hi"); } 注意 ：判断某个页面元素存在与否在jQuery实际上是没有必要的，jQuery本身会忽略 对一个不存在的元素进行操作，并且不会报错。 代码如下: $(document).ready(function(){ var value=$('#btn_delXml').length; if(value>0) { alert('Extsts'); } else { alert('not Extsts'); } }) 下面是其它说明虽然类似，但有些文字说明 有的时候，要根据页面加载的内容不同而作不同的操作，这个时候，判断页面上是否存在这个元素（或对象）变得尤为重要。如果写JavaScript来实现，较为麻烦，而jQuery却能很容易的实现这个功能。 我们知道，jQuery选择器获取页面的element时，无论element是否存在，都会返回一个对象。例如： var my_element = $("#element_Id" ) 此时的变量my_element就是一个对象，既然是一个对象，这个对象就具有length的属性，因此，用以下代码可以判断元素（对象）是否存在： 代码如下: if(my_element.length>0){ alert("element is exist."); }else{ alert("element not be found"); } from:http://www.jb51.net/article/19646.htm

龙生   16 Nov 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

bootstrap中的焦点图实例

使用html属性标记,代码如下: <div id="myCarousel" class="carousel">   <!-- 要切换的内容-->   <div class="carousel-inner">     <div class="active item">…</div>     <div class="item">…</div>     <div class="item">…</div>   </div>   <!-- 切换导航 -->   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 也可以在使用了.carousel类的元素内部添加切换内容指示工具   <!-- 焦点图指示器--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> 方法 .carousel(options) 初始化轮播组件,接受一个对象做为可选参数并开始循环播放. 例如: $(".carousel").carousel({    interval:2000 }) .carousel('cycle') 从左向右循环播放 .carousel('pause')中止播放 .carousel(number)播放到某个特定的帧(与数组类似,从0开始计数). .carousel('prev') 回到上一帧 .carousel('next') 回到下一帧 轮播类提供了两个事件 slide 该事件在调用slide实例方法时立刻触发 slid 该事件在轮播项切换效果完成之后触发 本实例代码如下: <style>/*metro风格样式*/         div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li         {             border–radius: 0 0 0 0 !important;         }                                                               [class^="m-icon-"]         {             display: inline–block;             width: 14px;             height: 14px;             margin–top: 4px;             line–height: 14px;             vertical–align: top;   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);             background–position: 0 0;             background–repeat: no–repeat;         }                                                               [class^="m-icon-big-"]         {             display: inline–block;             width: 30px;             height: 30px;             margin: 6px;             vertical–align: top;   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);             background–position: 0 0px;             background–repeat: no–repeat;         }                                                               .m–icon–white         {             background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons-twhite.png);         }                                                               /*  Misc */         .btn.icn–only         {             min–width: 14px;         }         .btn.bigicn–only         {             min–width: 34px;         }         .m–icon–swapright         {             background–position: –27px –10px; […]

龙生   20 Sep 2017
View Details
1 … 18 19 20 … 37

Copyright © 2025 Longsheng All rights reserved