zoukankan      html  css  js  c++  java
  • jquery实现图片手风琴效果

    话不多说,来看代码实现手风琴效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        *{ margin:0; padding:0;}
        ul,li{list-style: none;}
        a{text-decoration: none;}
        .box{ width:340px; height:260px; margin:0 auto;border:1px solid #f00;overflow: hidden}
        .box ul{ width:340px; height:260px;}
        .box ul li{width:85px; height:260px;float: left}
    
        .box ul li img{border:0;width:100%;height:100%;display: block;background-size: cover}
    </style>
    <body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            var $li = $(".box li");
            for(var i=0;i<$li.length;i++){
                $li.eq(i).css("backgroundImage","url(img/pic"+ (i+1) +".jpg)");//这里是将我当地文件夹中的图片写入li中,图片分别为pic1,pic2,pic3,pic4
            }
            $li.mouseenter(function(){
               $(this).stop().animate({250}).siblings().stop().animate({30})
           }).mouseleave(function(){
                $li.stop().animate({85})
            })
        })
    </script>
    
    </body>
    </html>

    效果图如下:

    注意:以上stop是解决鼠标快速放入图片上的animate的bug问题。

     好了效果就是这样,可以试试看呢!

  • 相关阅读:
    远程服务器同步配置
    什么是微服务架构,.netCore微服务选型
    Servlet与JSP版本历史以及Tomcat支持的版本
    JDK里面的JRE是什么
    JDK与Java SE/EE/ME的区别
    javaBean和Servlet有什么区别
    JSP的JSTL标签使用
    Java语法教程
    eclipse使用教程
    JSP生命周期
  • 原文地址:https://www.cnblogs.com/web001/p/8401555.html
Copyright © 2011-2022 走看看