手风琴案例

最新推荐文章于 2021-12-06 10:27:54 发布

thanksKlan

最新推荐文章于 2021-12-06 10:27:54 发布

阅读量472

点赞数 3

文章标签： jquery

本文链接：https://blog.csdn.net/hasakizzz66/article/details/108564630

版权

该博客介绍了如何通过jQuery实现手风琴效果，当鼠标悬停在小图上时，小图淡出，相应的大图淡入，通过改变li元素的宽度来实现交互体验。

摘要由CSDN通过智能技术生成

手风琴案例
当鼠标经过小图时，改变li的宽度，小图淡出，大图淡入
在这里插入图片描述

代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
   
            margin: 0;
            padding: 0;
        }
        
        img {
   
            display: block;
        }
        
        ul {
   
            list-style: none;
        }
        
        .king {
   
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
   
            overflow: hidden;
        }
        
        .king li {
   
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
   
            width: 224px;