微信扫一扫打赏支持

bootstrap课程14 透明度逐渐变小的幻灯片怎么实现

bootstrap课程14 透明度逐渐变小的幻灯片怎么实现

一、总结

一句话总结：a：样式：其实是把几张幻灯片用绝对定位放在一起了，注意的就是他们的叠放次序，这一张透明度逐渐为0的过程中，下一张一直在它的下面；b：算法：其实代码都不用变，只用改变图片的堆叠顺序即可实现幻灯片：设置定时器，让最后一张不断的（imgs.eq(2).stop().fadeOut(500,function(){） 做fadeOut动画隐藏起来，并且不断的 （$(this).show().prependTo('.window'); ）prependTo这个图片集合（把最后一张插入到图片的地第一张）。

 

1、回到顶部的话核心代码怎么写？

$(window).scrollTop(0);

 

2、只要一滚动，回到顶部按钮就出现怎么写？

监听滚动即可
$(window).scroll(function(){$('.top').show();});

 

3、插件使用的时候，出现除了插件处的内容，其余内容都是乱的，我们应该怎么解决？

带css样式的改变别的元素样式的插件能不用就不用，所以很多幻灯片插件，你用了之后，幻灯片那好了，其它位置都乱了。网页的难点就在这（工具多用还是好的，就是要找好的解决方案）

 

4、bootstrap中的affix是什么？

就是普普通通的positio:fix; 所以可以自己写，倒是没有必要用里面的

 

5、setInterval(function(){},3000)说明什么？

说明function里面代码的执行时长不能超过3秒钟，否则会出现动画叠加

 

6、透明度逐渐变小的幻灯片如何布局？

其实是把几张幻灯片用绝对定位放在一起了，注意的就是他们的叠放次序，这一张透明度逐渐为0的过程中，下一张一直在它的下面

35         <div class="window">  
36             <img src="3.jpg">
37             <img src="2.jpg"> 
38             <img src="1.jpg">
39         </div>

 

7、透明度逐渐变小的幻灯片的算法是什么？

其实代码都不用变，只用改变图片的堆叠顺序即可实现幻灯片

42 <script>
43 setInterval(function(){
44     imgs=$('.window img');
45 
46     imgs.eq(2).stop().fadeOut(500,function(){
47         $(this).show().prependTo('.window');
48     });
49 },1000);
50 </script>

 

 

二、透明度逐渐变小的幻灯片怎么实现

1、截图

 

 

 

2、代码

 

自定义幻灯片实例(京东)

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10 
11         .container{
12             width:1140px;
13             padding:0px 15px;
14             margin:0 auto;
15         }
16 
17         .window {  
18             height:300px;   
19             overflow: hidden;
20             position: relative;
21         }  
22 
23         .window img{
24             position: absolute;
25             top:0px;
26             left:0px;
27         }
28     </style>
29     <script src="jquery.min.js"></script>
30 </head>
31 <body>
32     <div class="container">
33         <h1 class="page-header">Bootstrap幻灯片</h1>
34 
35         <div class="window">  
36             <img src="3.jpg">
37             <img src="2.jpg"> 
38             <img src="1.jpg">
39         </div>  
40     </div>
41 </body>
42 <script>
43 setInterval(function(){
44     imgs=$('.window img');
45 
46     imgs.eq(2).stop().fadeOut(500,function(){
47         $(this).show().prependTo('.window');
48     });
49 },1000);
50 </script>
51 </html>

 

回到顶部

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10 
11         .top{
12             cursor: pointer;
13             width:100px;
14             height:50px;
15             background: #000;
16             border-radius:10px;
17             color:#fff;
18             text-align: center;
19             line-height: 50px;
20             font-size:30px;
21             position: fixed;
22             right:50px;
23             bottom:100px;
24             display: none;
25         }
26 
27         .top:hover{
28             opacity:0.7;
29         }
30     </style>
31     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
32     <script src="bs/js/jquery.min.js"></script>
33     <script src="bs/js/bootstrap.min.js"></script>
34     <script src="bs/js/docs.min.js"></script>
35 </head>
36 <body>
37     <div class="container">
38         <h1 class="page-header">Bootstrap框架</h1>
39         
40         <div class="row">
41             <div class="col-md-11">
42                 <div class="panel panel-danger">
43                     <div class="panel-heading">
44                         <div class="panel-title">
45                             <h1>技术文档</h1>
46                         </div>
47                     </div>
48                     <div class="panel-body">
49                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
50                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
51                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
52                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
53                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
54                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
55                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
56                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
57                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
58                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
59                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
60                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
61                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
62                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
63                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
64                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
65                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
66                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
67                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
68                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
69                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
70                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
71                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
72                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>    
73                         <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
74                     </div>
75                 </div>
76                     
77             </div>
78 
79             <div class="col-md-1">
80                 <div class='top'>
81                     <span class='glyphicon glyphicon-menu-up'></span>    
82                 </div>
83             </div>
84         </div>    
85     </div>    
86 </body>
87 <script>
88 $(window).scroll(function(){
89     $('.top').show();
90 
91     if($(window).scrollTop()<=100){
92         $('.top').hide();
93     }
94 });
95 $('.top').click(function(){
96     $(window).scrollTop(0);
97 });
98 </script>
99 </html>

 

 

 

 

 
posted @ 2018-07-24 15:15  范仁义  阅读(322)  评论(0)  编辑  收藏  举报