JQuery小案例

最新推荐文章于 2024-05-08 02:39:14 发布

落花新月

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量2.4k

点赞数 5

分类专栏： Web前端文章标签： JQuery案例 JQuery 突出显示 JQuery淡入淡出图片轮播

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50917935

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.鼠标移动到数字按钮上后，图片从有向左切入：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery案例练习</title>
    <style type="text/css">

        /*清空所有的样式*/
        *{
            margin:0;
            padding: 0;
            border:0;
            list-style:none;       /*去掉ul和ol中的样式*/
        }
        .all{
            width: 800px;
            height: 535px;
            margin: 100px auto;
            position: relative;     /*子绝父相*/
            overflow: hidden;
        }
        .all ul{
            position: relative;      /*子绝父相，它的子类通过绝对定位的方式让图片的原点和盒子的原点保持一致*/
            z-index: 1;
        }
        /*通过定位的方式让图片的左上角位于盒子的左上角*/
        .all ul li{
            position: absolute;
            left: 0;         /*用来确定图片的位置*/
            top:0;
        }
        /*Z-index 仅能在定位元素上奏效(例如 position:absolute;)!说明该属性设置一个定位元素沿 z 轴的位置，
         * z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
        */
        .all ol{
            position: absolute;   /*标准流中同级的ol和ul只能按顺序显示，不能让ol显示在ul之上，所以采用定位的方式*/
            z-index: 2;           /*2>1,让ol显示在ul之上*/
            right: 20px;
            bottom: 10px;
        }
        .all ol li{
            width: 20px;
            height: 20px;
            background-color: #333;
            border: 1px solid #cccccc;
            font-weight: bold;
            text-align: center;       /*水平居中*/
            line-height: 20px;           /*垂直居中*/
            float: left;          /*让所有ol里面的li水平显示*/
            margin-left: 10px;       /*li与li之间有一定的间距*/
            color: #cccccc;        /*字体的颜色*/
            margin-top: 10px;    /*解决current的方块变大后，其他的色块位置相对上移的问题*/
            cursor: pointer;          /*鼠标移动到上面显示小手*/
        }
        .all ol .current{
            width: 30px;
            height: 30px;
            color: #f60;      /* 字体的颜色*/
            border: 1px solid #ff6600;
            line-height: 30px;
            margin-top: 0;         /*当前的色块的margin-top为0，之前的为10，因为当前的色块比之前的大了10px*/

        }

    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var num2=6;
            //第一步，通过$符代码分离
            $('ol li').mouseover(function(e){      //当鼠标移动到ol里面的li的时候，执行操作
                $(this).attr('class','current');       //当前的li它的类变为current,也就是样式发生变化
                $(this).siblings().attr('class','');       //当前li的兄弟li的类置空

                var num=$(this).index()      //获取到当前的ol li的index值
                //因为让图片从右边过来，所以一开始先让它位于当前图片的右侧，也就是left值=图片的width
                $('ul li').eq(num).css('left','800px');
                num2++
                $('ul li').eq(num).css('z-index',num2);   //注意此处的num2是参数，不需要加''
                $('ul li').eq(num).animate({left:'0'},500);
            });
        })
    </script>
</head>
<body>
<div class="all">
<ul >
    <li><img src="images/04.png"></li>
    <li><img src="images/05.png"></li>
    <li><img src="images/06.png"></li>
    <li><img src="images/01.png"></li>
    <li><img src="images/02.png"></li>
</ul>
<ol>
    <!--里面记得写数字，不然就只有空的方块了-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="current">5</li>
</ol>
</div>
</body>
</html>

运行效果：（如下图所示，第5张图片正在进入）

2.案例2（突出显示某一部分内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>突出显示某一部分</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;   /*清空ul li 的样式*/
        }
        div{
            margin:100px auto;
            width: 1204px;
            height: 580px;
            border: 2px solid #e3e3e3;
        }

        img{
            width: 400px;
            height: 288px;
            float: left;
            /*margin-right: 20px;*/
            /*margin-bottom: 20px;*/
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('li').mouseover(function(e){
                //当鼠标移到某一个li的时候，该li的兄弟li的透明度降低
                $(this).siblings().stop().fadeTo(500,0.3);  //透明度在500m内淡入到0.3
            });
//            当鼠标移后，该li(this)的兄弟li的透明度恢复默认
            $('li').mouseout(function(e){
                //用stop()解决JQuery的排队问题，也就是鼠标快速的乱滑之后移开，状态不会持续的进行
                $(this).siblings().stop().fadeTo(500,1);   //透明度恢复到默认值1
            });
        })
    </script>
</head>
<body>
  <div>
      <ul>
          <li><a href="#"><img  src="images/daiyu.png"></a></li>
          <li><a href="#"><img  src="images/baochai.jpg"></a></li>
          <li><a href="#"><img  src="images/xiangyun.jpg"></a></li>
          <li><a href="#"><img  src="images/tanchun.jpg"></a></li>
          <li><a href="#"><img  src="images/wangxifeng.jpg"></a></li>
          <li><a href="#"><img  src="images/liwan.jpg"></a></li>
      </ul>
  </div>
</body>
</html>