jquery实现百叶窗效果(利用li的定位)

本文实例为大家分享了jquery实现百叶窗效果的具体代码,供大家参考,具体内容如下

大概思路:

一个div(宽度为800px),里面包含ul和li,li的宽高分别设置为560px,300px(li里的图片也是这个宽高)。li设置绝对定位,div设置相对定位。
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
不动画的时候,每个li宽高为160px。(800/5=160 div的宽度/图片个数)
动画的时候,被鼠标进入的li宽高为560px,300px,把图片完全显示出来。其他未被鼠标进入的图片,宽度为(800-560)/4=160px
当鼠标出去box框的话,各个图片回复最初的位置。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    .box{
        width:800px;
        height:300px;
        border:5px solid gray;
        margin:100px auto;
        position: relative;
    }
    li{
        list-style: none;
        float: left;
        position:absolute;
        /*width:160px;*/
        height:300px;
        width:560px;
    }
    .no0{  left:0;  }
    .no1{  left:160px;  }
    .no2{  left:320px;  }
    .no3{  left:480px;  }
    .no4{  left: 640px;  }

    img{
        width:560px;
        height:300px;
    }

</style>
<body>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li  class="no1">  <img src="img/1.jpg" alt=""> </li>
        <li  class="no2">  <img src="img/2.jpg" alt=""> </li>
        <li  class="no3">  <img src="img/3.jpg" alt=""> </li>
        <li  class="no4">  <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>

<script src="js/jquery-1.12.3.min.js"> </script>
<script>

//    最初的位置 0 160 320 480 640
//    最左边的位置 0 60 120 180 240
//最右边位置:0 560 620 680 740
$lis = $("li");
//当鼠标进入图1的时候,图1到图4往右边动画
  $lis.eq(0).mouseenter(function(){
      $lis.stop(true);
      $lis.eq(1).animate({left:560},1000);
      $lis.eq(2).animate({left:620},1000);
      $lis.eq(3).animate({left:680},1000);
     $lis.eq(4).animate({left:740},1000);
  });
//当鼠标进入图2的时候,图2往左边动画,图3到图4往右边动画
$lis.eq(1).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:620},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(2).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(3).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(4).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:240},1000);

});

//鼠标离开box的时候,各个图片返回原来的位置
    $(".box").mouseleave(function(){
        $lis.stop(true);
        $lis.eq(1).animate({left:160},1000);
        $lis.eq(2).animate({left:320},1000);
        $lis.eq(3).animate({left:480},1000);
        $lis.eq(4).animate({left:640},1000);
    })

</script>
</body>
</html>

运行结果:

代码简化:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    .box{
        width:800px;
        height:300px;
        border:5px solid gray;
        margin:100px auto;
        position: relative;
    }
    li{
        list-style: none;
        float: left;
        position:absolute;
        width:560px;
        height:300px;
    }
    .no0{  left:0;  }
    .no1{  left:160px;  }
    .no2{  left:320px;  }
    .no3{  left:480px;  }
    .no4{  left: 640px;  }

    img{
        width:560px;
        height:300px;
    }

</style>
<body>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li  class="no1">  <img src="img/1.jpg" alt=""> </li>
        <li  class="no2">  <img src="img/2.jpg" alt=""> </li>
        <li  class="no3">  <img src="img/3.jpg" alt=""> </li>
        <li  class="no4">  <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>

<script src="js/jquery-1.12.3.min.js"></script>
<script>
//    最初的位置 0 160 320 480 640
//    最左边的位置 0 60 120 180 240
//最右边位置:0 560 620 680 740

    $lis = $("li");
    $lis.mouseenter(function(){
        $lis.stop(true);
        console.log( $(this).index());
        var index = $(this).index();
// 当图片在被鼠标进入图片的左侧的时候,往左边动画。在右边是,往右边动画
        $lis.each(function(i){
            if(i <= index){
                $(this).animate({left:60*i},1000);
            }else{
                $(this).animate({left:560+60*(i-1)},1000);
            }
        })
    })

//鼠标离开box的时候,各个图片返回原来的位置
  $(".box").mouseleave(function(){
    $lis.stop(true);
      $lis.each( function(i){
          $(this).animate({left:160*i},1000);
      });

});

</script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jquery实现百叶窗效果

    今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~ 最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单: 基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置):然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变. 文字描述

  • jQuery 翻牌或百叶窗效果(内容三秒自动切换)

    核心代码: 复制代码 代码如下: $(function(){ var timer = true; //执行向上或向下的开关 var liindex = 0; //LI的索引 var $div = $(".byc").find("div"); //每隔三秒执行一次变换LI的内容 var set1 = setInterval(function(){ ainbyc($div); liindex = 0; timer = !timer; },3000); //LI变换的方式

  • jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)

    这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示     源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="我们1" title=&quo

  • jquery实现页面百叶窗走马灯式翻滚显示效果的方法

    本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法.分享给大家供大家参考.具体如下: 1. 这里的代码需要jquery1.3以上的支持,如下所示: 复制代码 代码如下: jQuery.fn.extend((     function($){         var l = 4,//卷动行数             t=5000,//卷动完一次后,隔多长时间下次开始卷动             rt=500,//每个n卷动过去的耗时             n="li",

  • jquery实现百叶窗效果(利用li的定位)

    本文实例为大家分享了jquery实现百叶窗效果的具体代码,供大家参考,具体内容如下 大概思路: 一个div(宽度为800px),里面包含ul和li,li的宽高分别设置为560px,300px(li里的图片也是这个宽高).li设置绝对定位,div设置相对定位. .no0{ left:0; } .no1{ left:160px; } .no2{ left:320px; } .no3{ left:480px; } .no4{ left: 640px; } 不动画的时候,每个li宽高为160px.(80

  • JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • 制作jquery遮罩层效果导航菜单代码分享

    jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重.因此必须要使用一个效果:jquery遮罩层.利用明暗效果来突出当前用户的操作. 复制代码 代码如下: $(function() {var $oe_menu= $('#oe_menu');var $oe_menu_items= $oe_menu.children('li');var $oe_overlay= $('#oe_overlay');         

  • jQuery实现滚动效果

    本文实例为大家分享了jQuery实现滚动效果展示的具体代码,供大家参考,具体内容如下 1. 图片轮播: 原理如下: 假设有三张图片,三张图片实际上都是存在于页面上的,但是由于设置的可视部分的大小(这里主要考虑宽度)是小于等于一张图片的大小的,想要看到其他图片的话,最直接的想法就是将需要显示的图片放在可视区域,也就是说需要改变的是整个图片区域的偏移值(left/right) 具体实现: <!DOCTYPE html> <html> <head> <meta char

  • 完美JQuery图片切换效果的简单实现

    效果如下: css: body { font-family:"Microsoft Yahei"; } body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;} /***大图切换***/ .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{po

  • js以及jquery实现手风琴效果

    最近又复习了jQuery的知识,既然jQuery是javascript的一个库.jQuery能做到的事情javascript也能做到.因此用这两种方法实现了图片手风琴效果. 按照惯例,还是上代码吧,因为代码里有我的注释也就相当于解释了!(^__^) 嘻嘻-- 先看一下javascript的代码吧: div布局:注意哦,里面的图片我们用js代码生成 <div id="box"> <ul> <li></li> <li></l

  • 简单实现jQuery轮播效果

    本文实例为大家分享了jQuery轮播效果展示的具体代码,供大家参考,具体内容如下 jQ代码: 在写jQuery代码之前一定要先导库,此处我用的是3.0的库 <script src="jquery-3.0.0.js"></script> <script type="text/javascript"> var timer; $(function() { //设置图片向左移 imgshow(); //点击暂停按钮事件 $(".

  • jquery树形菜单效果的简单实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

随机推荐