码迷,mamicode.com
首页 > 其他好文 > 详细

制作手风琴插件

时间:2019-09-19 17:58:57      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:oct   yellow   宽度   并且   css   参数   填充   enter   lin   

技术图片

1,第一步:先用 jQuery 实现手风琴效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
   *{
         padding:0;
         margin:0;
     }
   . box{
         width:1000px;
         height:300px;
         margin:100px auto;
         border:1px solid black;
overflow:hidden; } ul{ width:1200px; height:300px; list
-style:none; } ul > li{ float:left; width:200px; height:300px; } <style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="jQuery-1.12.4.js"></script> <script> $(function(){ var $li=$(".box li"); //1 , 给每个 li 加背景颜色 var colors=["red" , "orange" ,"yellow" , "green" , "blue"]; $li.each(function(index,element){ $(this).css({"backgroundColor" , colors[index]}); }) //2, 给每个 li 绑定鼠标经过事件 $li.on("mouseenter" , function(){ $(this).stop().animate({width : 600}).siblings().stop().animate({width: 100}); }) //3,给 box 绑定鼠标离开事件 $(".box").on("mouseleave" , function(){ $li.stop().animate({width : 200}); }) }) </script> </body> </html>

2,第二步,把 jQuery代码封装,写成插件,给 jQuery原型添加一个 accordion(手风琴)方法

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $.fn.accordion=function (colors,width) {  //参数 width , 是鼠标移动到某个小 li 的上方时,其他 小 li 的宽度,这里指的是 100px
            colors = colors || [];   //引用这个插件的时候,每个小 li 可能填充的是背景图片,不是颜色,如果不是颜色,colors就是一个空数组
            width = width || 0;

            var $li = this.find("li");  //引用这个插件的时候,调用 accordiong()的对象就是 this, 这里指的是 box 这个盒子
            var boxLength = this.width();  // 获取 box 的宽度
            var maxLength = boxLength - ($li.length - 1) * width;  //鼠标移动到某个小 li 的上方,获取这个 小 li 的宽度
            var avgLength = boxLength / $li.length;  //鼠标离开 box 时,每个小 li 的宽度
            
//1,给每个小 li 填充颜色 $li.each(function (index, element) { $(element).css(
"backgroundColor", colors[index]); })
//2,给每个小 li 绑定鼠标经过事件 $li.on(
"mouseenter", function () { $(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width}); //这里的this,就是执行 mouseenter事件的对象 })
//3,给 box 绑定鼠标离开事件 $(
".box").on("mouseleave", function () { $li.stop().animate({width: avgLength}); }) }

    //4,封装完毕,调用这个方法,传递两个参数 , colors和 width ,注意调用这个方法的对象是 box ,不是 li
var colors=["red","orange","yellow","green","blue"]; $(".box").accordion(colors,100); }) </script>

3,第三步,单独把 封装的 accordion方法放在一个 js 文件,成为一个差价,用的时候,只需要在 jQuery文件之后引入这个 js 文件

 jQuery . accordion . js : 

/**
 * Created by HUCC on 2017/4/12.
 */
$.fn.accordion = function (colors, width) {
  colors = colors || [];
  width = width || 0;


  var $li = this.find("li");

  var boxLength = this.width();
  var maxLength = boxLength - ($li.length - 1) * width;
  var avgLength = boxLength / $li.length;

  //更改li的颜色
  $li.each(function (i, e) {
    $(e).css("backgroundColor", colors[i]);
  });

  //给li注册鼠标经过事件
  $li.on("mouseenter", function () {
    $(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width})
  });

  $li.on("mouseleave", function () {
    $li.stop().animate({width: avgLength});
  });
};

4,注意引用这个 js 文件必须在 引入的 jQuery文件之后,并且应该是这个 js 文件所适应的布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    div {
      width: 1000px;
      height: 300px;
      border: 2px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }

    ul {
      width: 1100px;
    }

    li {
      width: 100px;
      height: 300px;
      float: left;
    }

  </style>
</head>
<body>

<div id="box">

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>

  $(function () {
    var colors = ["red","yellow","green", "cyan", "pink","hotpink", "blue", "yellowgreen","greenyellow", "skyblue"];

    $("#box").accordion(colors, 20);

  });


</script>

</body>
</html>

 

制作手风琴插件

标签:oct   yellow   宽度   并且   css   参数   填充   enter   lin   

原文地址:https://www.cnblogs.com/shanlu0000/p/11551312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!