李涛自留地
回到顶部
首页 > jQuery学习 > jQuery简单实现鼠标经过切换图片特效

jQuery简单实现鼠标经过切换图片特效

原来在防站的过程中，发现有的图站轮播位置放的鼠标经过左侧标题的时候，右侧图片显示对应的图片，再次经过另一篇图片标题的时候，再次显示对应标题的图片，那时候基础很差觉得这样的特效好牛叉的感觉，自己要是能做出这样的特效就好了，近期学习jQuery自己也能做出这种jQuery简单实现鼠标经过切换图片特效了。

思路分析：

Html结构：可以做成左边是图片标题右侧图片，也可以做成左边图片右侧则是对应的图片标题，大部分网站基本上在轮播上都是左侧是图片右侧是标题这样的结构，大致就是左右结构，然后再用一个大容器Div盒子将这两部分容器盒子包裹起来。

jQuery部分：主要是运用到jQuery的鼠标经过事件，鼠标经过标题的时候显示对应的文章图片，然后隐藏其他的图片。 

<!doctype html>
<html lang="ch-ZN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery简单实现鼠标经过切换图片特效</title>
    <link rel="stylesheet" href="tb.css">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main class="main">
    <div class="content pure-g">
         <ul class="pure-u-1-4">
                <li><a href="#">高清桂林山水壁纸图片</a></li>
                <li><a href="#">高清阿尔卑斯山壁纸图片</a></li>
                <li><a href="#">青山绿水高清壁纸风景图片</a></li>
                <li><a href="#">好看的海岛唯美风景图片</a></li>
                <li><a href="#">桃花盛开的粉色美景高清壁纸桃花盛开的粉色美景高清壁纸</a></li>
                <li><a href="#">一片草青色的大草原高清壁纸</a></li>
                <li><a href="#">坝上草原高清唯美日落夜景</a></li>
                <li><a href="#">海浪美景高清壁纸欣赏</a></li>
                <li><a href="#">海上的蓝天白云高清壁纸</a></li>
                <li><a href="#">绿油油的竹海美景高清壁纸</a></li>
         </ul>
        <div class="right pure-u-3-4">
            <div>
                <a href="#"><img src="images/1.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/2.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/3.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/4.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/5.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/6.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/7.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/8.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/9.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="images/10.jpg" alt=""></a>
            </div>
        </div>
    </div>
</main>
<script>
    //鼠标经过切换图片特效
    $(function () {
        $("ul li").mouseover(function () {//鼠标经过左侧li时
            var index = $(this).index();//给当前li声明一个index变量
            $(".right div").eq(index).show();//鼠标经过当前li的时候对应显示右侧对应索引的图片
            $(".right div").eq(index).siblings().hide();//隐藏其他li对应的图片
        })
    })
</script>
</body>
</html>

以上是Html部分代码，以下是Css样式代码： 

@import url(pure.css);
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: "Microsoft YaHei UI Light";
    font-size: 16px;
    color: #666;
}
ul li{
    list-style: none;
}
a{
    color: #df5000;
    text-decoration: none;
}
.main{
    margin-top: 20px;
}
.content{
    width: 1024px;
    height: 360px;
    margin: 0 auto;
    padding: 15px;
    background-color:#dddddd;
    overflow: hidden;
    border-radius: 5px;
}
.content ul li{
    max-width: 100%;
    margin-right: 5px;
    padding: 5px;
    line-height: 24px;
    counter-increment:number;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all 0.6s;
}
.content ul li::before{
    display: inline-block;
    width: 20px;
    height: 20px;
    content: counter(number);
    margin-right: 5px;
}
.content ul li:nth-child(1)::before{
    color: rgba(255,0,0,.9);
}
.content ul li:nth-child(2)::before{
    color: rgba(255,0,0,.6);
}
.content ul li:nth-child(3)::before{
    color: rgba(255,0,0,.4);
}
.content ul li:hover{
    background-color: #fff;
    border-bottom: 1px dashed #000;
    border-radius: 5px;
}
.content .right{
    height: 334px;
    overflow: hidden;
}
.content .right img{
    display: block;
    width: 100%;
    height: 334px;
}

注：在我这个实例中，在css部分中我用了pure框架进行简单的页面布局，需要到pure官网中下载pure.css放到html页面同一目录下，同时在页面头部引用了百度的jQuery库。CSDN博客Dome实例交流页面：https://blog.csdn.net/web_jason365/article/details/114919402 欢迎对此实例进行指导和交流。

以下是特效效果图：

jQuery简单实现鼠标经过切换图片特效

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。