zoukankan      html  css  js  c++  java

  • 手风琴特效效果

      1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>手风琴demo</title>
  6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7     <meta name="description" content="Fengqin_Demo">
  8     <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
  9     <style>
 10         *{
 11     margin: 0;
 12     padding:0;
 13     -webkit-box-sizing:border-box;
 14     -moz-box-sizing:border-box;
 15     box-sizing:border-box;
 16 }
 17 body{
 18     background: #191970;
 19     font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;;
 20 }
 21 ul{
 22     list-style: none;
 23 }
 24 a{
 25     color:#FF4500;
 26     text-decoration: none;
 27 }
 28 
 29 
 30  .container{
 31      100%;
 32      max- 300px;
 33      margin: 20px auto 30px;
 34     border-radius: 4px;
 35     -webkit-border-radius: 4px;
 36     -moz-border-radius: 4px;
 37     background: #fff;
 38  }
 39  .container .link{
 40      cursor: pointer;
 41      color: #292421;
 42      padding: 15px 15px 15px 50px;
 43      font-size:14px;
 44      font-weight: 700;
 45      border-bottom: 1px solid #ccc;
 46      -webkit-transition: all 0.4s ease;
 47     -o-transition: all 0.4s ease;
 48     transition: all 0.4s ease;
 49  }
 50  .container li.open .link{
 51      color:#ED9121;
 52  }
 53  .container li:last-child .link{
 54      border-bottom: 0;
 55  }
 56 
 57 
 58  .desc{
 59      background: #3D59AB;
 60      font-size: 14px;
 61      display: none;
 62  }
 63  .desc li{
 64      border-bottom: 1px solid #ccc;
 65  }
 66  .desc li:last-child{
 67      border-bottom: 0;
 68  }
 69  .desc a{
 70      display: block;
 71      padding:12px;
 72      padding-left: 50px;
 73      color: #808A87;
 74      -webkit-transition: all 0.25s ease;
 75      -o-transition: all 0.25s ease;
 76      transition: all 0.25s ease;
 77 
 78  }
 79  .desc a:hover{
 80      background: #1E90FF;
 81      color: #fff;
 82  }
 83     </style>
 84 </head>
 85 <body>
 86     <ul class = "container">
 87             <li>
 88                 <div class = "link">Html</div>
 89                 <ul class = "desc">
 90                     <li><a href="#">Html</a></li>
 91                     <li><a href="#">Css</a></li>
 92                 </ul>
 93             </li>
 94             <li>
 95                 <div class = "link">Javascript</div>
 96                 <ul class = "desc">
 97                     <li><a href="#">Javascript</a></li>
 98                     <li><a href="#">JQuery</a></li>
 99                     <li><a href="#">Zepto</a></li>
100                     <li><a href="#">Require</a></li>
101                 </ul>
102             </li>
103             <li>
104                 <div class = "link">Browser</div>
105                 <ul class = "desc">
106                     <li><a href="#">Firefox</a></li>
107                     <li><a href="#">Chrome</a></li>
108                     <li><a href="#">Safari</a></li>
109                 </ul>
110             </li>
111             <li>
112                 <div class = "link">Author</div>
113                 <ul class = "desc">
114                     <li><a href="#">Walk Monkey</a></li>
115                     <li><a href="#">Marlboro</a></li>
116                 </ul>
117             </li>
118         </ul>
119     
120 </body>
121 <script>
122    $(document).ready(function(){
123        
124       $('.container li').click(function(){
125           $(this).children(".desc").slideToggle();
126            })
127 
128  /* $('.link:eq(0)').click(function(){
129            var index=$('.desc:eq(0)');
130               index.slideToggle();
131            })
132           $('.link:eq(1)').click(function(){
133            var index=$('.desc:eq(1)');
134               index.slideToggle();
135            }) 
136            $('.link:eq(2)').click(function(){
137            var index=$('.desc:eq(2)');
138               index.slideToggle();
139            }) 
140             $('.link:eq(3)').click(function(){
141            var index=$('.desc:eq(3)');
142               index.slideToggle();
143            }) */
144        
145        })
146 
147 
148 
149 
150 
151 
152     
153     
154     
155 </script>
156         
157 </html>

     焦点图轮播

      1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <title>焦点图轮播特效</title>
  6     <meta charset="utf-8">
  7     <style>
  8     * {
  9         margin: 0;
 10         padding: 0;
 11     }
 12 
 13     body {
 14     }
 15     a{
 16         outline: none;
 17         hidefocus:true;
 18     }
 19 
 20     .wrap {
 21         margin: 0 auto;
 22          696px;
 23         margin-bottom: 50px;
 24         position: relative;
 25     }
 26 
 27     .wrap {}
 28 
 29     .wrap_pic {
 30          696px;
 31         height: 400px;
 32         overflow: hidden;
 33         /*position: relative;*/
 34     }
 35 
 36     .wrap_pic div {
 37          100%;
 38         height: 400px;
 39     }
 40 
 41     .wrap_pic div {
 42         position: absolute;
 43     }
 44 
 45     .wrap_pic img {
 46          100%;
 47         height: 100%;
 48     }
 49 
 50     .wrap ul {
 51         list-style: none;
 52     }
 53 
 54     .wrap ul li {
 55          80px;
 56         height: 40px;
 57         background-color: #ddd;
 58         text-align: center;
 59         line-height: 30px;
 60         opacity: .3;
 61         filter: alpha(opacity=30);
 62         zoom:1;
 63         /*margin-right: 10px;*/
 64     }
 65 
 66     /*.wrap ul li {
 67         display: inline-block;
 68     }*/
 69     #wrap_ul li{
 70         float: left;
 71         margin-right: 8px;
 72     }
 73     #wrap_ul li:last-child{
 74         margin-right: 0px;
 75     }
 76     .wrap ul li img {
 77          100%;
 78         height: 100%;
 79     }
 80 
 81     .next,
 82     .pre {
 83         position: absolute;
 84         top: 160px;
 85         z-index: 1;
 86          80px;
 87         height: 80px;
 88         text-align: center;
 89         line-height: 80px;
 90         cursor: pointer;
 91     }
 92 
 93     .next p,
 94     .pre p {
 95         font-size: 40px;
 96         font-weight: bold;
 97     }
 98 
 99     .pre {
100         left: 0px;
101     }
102 
103     .next {
104         right: 0px;
105     }
106 
107 
108     .jq_wrap {
109         margin: 0 auto;
110          696px;
111         margin-bottom: 50px;
112         position: relative;
113     }
114     .big_wrap{
115          696px;
116         height: 400px;
117         overflow: hidden;
118         position: relative;
119     }
120     .slide_pic {
121         height: 400px;
122          6264px;
123         position: absolute;
124 
125     }
126 
127 
128 
129     .slide_pic li {
130          696px;
131         height: 400px;
132         list-style:none;
133         overflow: hidden;
134         position: relative;
135         left: 0px;
136         float: left;
137     }
138     .slide_item li:last-child,
139     .slide_pic li:last-child{
140         margin-right: 0px;
141     }
142     .slide_pic li img,
143     .slide_item li img{
144          100%;
145         height: 100%;
146     }
147 
148     .slide_item li {
149          80px;
150         height: 40px;
151         overflow: hidden;
152         background-color: #ddd;
153         text-align: center;
154         line-height: 30px;
155         opacity: .3;
156         filter: alpha(opacity=30);
157         zoom:1;
158         float: left;
159         margin-right: 8px;
160     }
161 
162     </style>
163 </head>
164 
165 <body>
166     <div class="jq_wrap">
167         <div class="big_wrap">
168             <ul id="slide_pic" class="slide_pic">
169                 <li><img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"></li>
170                 <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li>
171                 <li><img src="http://image37.360doc.com/DownloadImg/2011/09/2500/18000218_41.jpg"></li>
172                 <li><img src="http://www.xmnn.cn/pic/pktp/201112/W020111227547869935351.jpg"></li>
173                 <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li>
174                 <li><img src="http://pic27.nipic.com/20130219/10840239_143710447100_2.jpg"></li>
175                 <li><img src="http://4493bz.1985t.com/uploads/allimg/150126/4-150126153144.jpg"></li>
176                 <li><img src="http://picture.youth.cn/xwjx/201112/W020111230498507247126.jpg"></li>
177             </ul>
178         </div>
179         <div class="pre" id="preBtn">
180             <p><</p>
181         </div>
182         <div class="next" id="nextBtn">
183             <p>></p>
184         </div>
185         <ul id="slide_item" class="slide_item">
186             <li><img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"></li>
187             <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li>
188             <li><img src="http://image37.360doc.com/DownloadImg/2011/09/2500/18000218_41.jpg"></li>
189             <li><img src="http://www.xmnn.cn/pic/pktp/201112/W020111227547869935351.jpg"></li>
190             <li><img src="http://pic25.nipic.com/20121112/10810261_134603501000_2.jpg"></li>
191             <li><img src="http://pic27.nipic.com/20130219/10840239_143710447100_2.jpg"></li>
192             <li><img src="http://4493bz.1985t.com/uploads/allimg/150126/4-150126153144.jpg"></li>
193             <li><img src="http://picture.youth.cn/xwjx/201112/W020111230498507247126.jpg"></li>
194         </ul>
195     </div>
196     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
197     </script>
198     <script>
199         (function($) {
200             // slidePic:为大图片的外层ul
201             // slideItem:底部小图片的外层ul
202             // preBtn,nextBtn分别为向前向后按钮
203             var slidePictures = function(slidePic, slideItem, preBtn, nextBtn) {
204                 var self = this;
205                 this.slidePic = $("#" + slidePic); //内容区域大图片的外层ul
206                 this.slideItem = $("#" + slideItem); //底部小图片的外层ul
207                 this.slidePic_li = $("#" + slidePic + " li"); //内容区域大图片
208                 this.slideItem_li = $("#" + slideItem + " li"); //底部小图片
209                 this.prevBtn = $("#" + preBtn); //前进按钮
210                 this.nextBtn = $("#" + nextBtn); //后退按钮
211                 this.length = this.slidePic_li.length; //ul中图片的个数，因为大图和小图是一一对应的，所以个数相同
212                 this.speed = 500; //speed为图片滑动速度，数值越大速度越慢
213                 this.index = 0; //第一次显示的是第一张图片，所以索引为0；表明当前正在显示的图片索引
214                 this.timer; //定义一个定时器参数
215                 // 初始化各项参数和属性
216                 self.init();
217                 // 首先克隆一份第一张图片,并将其添加到外层ul中
218                 var clone = this.slidePic_li.first().clone();
219                 this.slidePic.append(clone);
220                 // 这里需要重新获取一下li,因为之前的this.slidePic_li保存的是克隆前的数据
221                 this.length = $("#slide_pic li").length;
222 
223                 this.prevBtn.click(function() {
224                     self.moveByClick(1);
225                 });
226                 this.nextBtn.click(function() {
227                     self.moveByClick(-1);
228                 });
229             }
230             slidePictures.prototype = {
231                 // 初始化函数，当页面刚加载完给页面一些默认的样式，或者执行相关函数
232                 init: function() {
233                     // 首先给外层ul一个left属性为0；
234                     this.slidePic.css("left", 0);
235                     // 获取每一个图片的宽度
236                     this.width = this.slidePic_li.width();
237                     // 将第一个小图片透明度默认设为1
238                     this.slideItem_li.first().css("opacity", "1");
239                     // 给每一个小图片添加一个id属性，用于标识
240                     this.giveItemAttrId();
241                     this.autoChange();
242                     this.cancleTimer();
243                     this.mouseoverShowBigPic();
244                 },
245                 // 突出显示底部小图片，用于标识当前大图位置，id为0即显示第一个
246                 showItem: function(id) {
247                     // 判断id值
248                     var item = id;
249                     if (item == this.length - 1) {
250                         item = 0;
251                     }
252                     // 将所有的小图片透明度设为.3
253                     this.slideItem_li.css("opacity", ".3");
254                     // 将当前id的小图片透明度设为1
255                     this.slideItem_li.eq(item).css("opacity", "1");
256                 },
257                 // 得到当前透明度为needOpc的图片序号
258                 getCurrentShowPic: function(needOpc) {
259                     var item = 0;
260                     this.slideItem_li.each(function(index, el) {
261                         var opc = $(this).css("opacity");
262                         if (opc == needOpc) {
263                             item = index;
264                         }
265                     });
266                     return item;
267                 },
268                 mouseoverShowBigPic: function() {
269                     var self = this;
270                     this.slideItem_li.on('mouseover', function() {
271                         var id = $(this).attr("id");
272                         self.showNow(id); //显示大图片
273                         self.showItem(id); //显示对应小图片
274                     })
275                 },
276                 // 鼠标划过小图片时显示对应的大图
277                 showNow: function(id) {
278 
279                     // 找到当前显示的图片的序号，item为当前序号
280                     var item = this.getCurrentShowPic();
281                     // 计算需要移动的距离
282                     var needMove = id * this.width;
283                     // 如果当前显示的图片在鼠标划过的图片的左方，则向左滑动，否则向右滑动
284                     if (id > item) {
285                         this.slidePic.stop().animate({
286                             left: "-" + needMove + "px"
287                         }, this.speed);
288                     } else {
289                         this.slidePic.stop().animate({
290                             left: "-" + needMove + "px"
291                         }, this.speed);
292                     }
293                     // 更新this.index;
294                     this.index = id;
295                 },
296                 // 每次鼠标点击左右按钮时滑动一张图片
297                 moveByClick: function(flag) {
298             var self = this;
299             //如果没有传入参数则默认为1；
300             var flag = flag||-1;
301             // flag用于标记点击的是左键还是右键,flag > 0为左键，反之为右键
302             // length为图片的个数
303             var length = this.length;
304             var width = this.width;
305             var speed = this.speed;
306             // 当点击的是左键时
307             if (flag > 0) {
308                 this.index--;
309                 if (this.index == -1) {
310                     this.slidePic.css("left", "-" + (length - 1) * width + "px");
311                     // 突出显示对应的底部小图片
312                     this.index = length - 2;
313                 }
314                 this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed);
315                 this.showItem(this.index);
316 
317             } else { //点击右键时
318                 this.index++;
319                 /*当index为最后一张图片时，先将外层ul的left值设为0
320                 此时最后一张图片为后来克隆添加上的，将left值改为0后实际上显示的是第一张图片了
321                 但是由于最后一张和第一张相同，人眼看不出差别，所以以为还没有改变
322                 然后再将index设为1，让其切换到下一张图片，从而实现无缝轮播
323                 点击左键时原理相同
324                 */
325                 if(this.index == length-1){
326                     this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed,function(){
327                         self.slidePic.css("left", "0px");
328                     });
329                     this.showItem(this.index);
330 
331                 }else if(this.index == length){
332                     this.index = 1;
333                     this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed);
334                     this.showItem(this.index);
335                 }else{
336                     this.slidePic.stop().animate({ left: "-" + this.index * width + "px" }, speed);
337                     this.showItem(this.index);
338                 }
339             }
340         },
341                 // 将所有的小图片透明度设为需要的值
342                 hideAllitem: function(opc) {
343                     this.slideItem_li.each(function(index, el) {
344                         $(this).css("opacity", opc);
345                     });
346                 },
347 
348                 // 自动切换
349                 autoChange: function() {
350                     var self = this;
351                     this.timer = setInterval(function() {
352                         self.moveByClick();
353                     }, 1500);
354                 },
355                 //当鼠标划过相关区域时，停止自动播放
356                 cancleTimer: function() {
357                     var self = this;
358                     $(".jq_wrap").on("mouseover", function() {
359                         clearInterval(self.timer);
360                     });
361                     $(".jq_wrap").on("mouseout", function() {
362                         self.autoChange();
363                     })
364                 },
365                 // 给底部小图片一个id属性，用于标识
366                 giveItemAttrId: function() {
367                     var self = this;
368                     this.slideItem_li.each(function(index, el) {
369                         $(this).attr("id", index);
370                     });
371                 }
372             };
373             window["slidePictures"] = slidePictures;
374         })(jQuery);
375     </script>
376     <script>
377         var slidePictures = new slidePictures("slide_pic", "slide_item", "preBtn", "nextBtn");
378     </script>
379 
380 </body>
381 
382 </html>
  • 相关阅读:
    mysql非安装包安装教程
    HTML和CSS <h1> --3-- <h1>
    HTML和CSS <h1> --2-- <h1>
    HTML和CSS <h1> --1-- <h1>
    软件工程之四则运算总结
    图论算法 有图有代码 万字总结 向前辈致敬
    【万里征程——Windows App开发】使用Toast通知
    【万里征程——Windows App开发】设置共享（共享源和共享目标）
    【万里征程——Windows App开发】如何使用粘贴板
    【万里征程——Windows App开发】在应用中集成搜索
  • 原文地址：https://www.cnblogs.com/1030351096zzz/p/6071633.html
Copyright © 2011-2022 走看看