jQuery实现鼠标移入切换图片

初始效果鼠标移入效果
在这里插入图片描述在这里插入图片描述

首先添加jQuery库,我这边直接引用百度CDN地址

 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

写一个jQuery载入事件

$(function(){});//因为HTML文档是由浏览器从上到下依次载入的,载入事件能避免JavaScript代码放在太后而没效果

载入事件里面写鼠标移入列表调用的方法

$('#left>li,#right>li').mouseenter(function(){});/*#left>li选择器是获取左边的<li>标签,同
理#right>li获取的是右边的<li>标签,mouseenter是鼠标移入被选元素触发的事件*/

获取当前被选元素的索引

var i=$(this).index();//index() 方法返回指定元素相对于其他指定元素的 index 位置。

因为右边图片索引值需要加上左边图片的数量才能正确显示所有需要加个判断是左边元素被选还是右边

 if($(this).parent().attr("id")=="right"){
                    i+=4;
                }if($(this).parent().attr("id")=="right"){
                    i+=4;
                }/*当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素
的直接父元素,attr() 方法设置或返回被选元素的属性和值*/

在中间显示对应的图片

$("#center>li:not()").hide().eq(i).show();/*因为所有的图片都加在了中间无序列表里里,所有需要
先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素,hide() 方法隐藏被选
元素,:eq(index) 选取索引等于index 的元素,索引从0开始,show() 方法显示隐藏的被选元素。*/

整个jQuery代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $(function() {
                $('#left>li,#right>li').mouseenter(function() {
                    var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
                    if($(this).parent().attr("id")=="right"){
                        i+=4;
                    }//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
                    $("#center>li:not()").hide().eq(i).show();  //因为所有的图片都加在了中间无序列表里里,所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素,hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素,索引从0开始,show() 方法显示隐藏的被选元素。
                   });//#left>li选择器是获取左边的<li>标签,同理#right>li获取的是右边的<li>标签,mouseenter是鼠标移入被选元素触发的事件
           }); //因为HTML文档是由浏览器从上到下依次载入的,载入事件能避免JavaScript代码放在太后面而没效果
        </script>

HTML源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSDN(https://www.csdn.net)</title>
        <link rel="stylesheet" href="css/good2.0.css">
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            $(function() {
                $('#left>li,#right>li').mouseenter(function() {
                    var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
                    if($(this).parent().attr("id")=="right"){
                        i+=4;
                    }//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
                    $("#center>li:not()").hide().eq(i).show();  //因为所有的图片都加在了中间无序列表里里,所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素,hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素,索引从0开始,show() 方法显示隐藏的被选元素。
                   });//#left>li选择器是获取左边的<li>标签,同理#right>li获取的是右边的<li>标签,mouseenter是鼠标移入被选元素触发的事件
           }); //因为HTML文档是由浏览器从上到下依次载入的,载入事件能避免JavaScript代码放在太后面而没效果
        </script>
    </head>
    <body>
         <div class="wrapper">
      <ul id="left">
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">牛仔裤</a></li>
      </ul>
      <ul id="center">
        <li><a href="#"><img src="img/雪地靴.jpg"/></a></li>
        <li><a href="#"><img src="img/冬裙.jpg"/></a></li>
        <li><a href="#"><img src="img/呢大衣.jpg"/></a></li>
        <li><a href="#"><img src="img/牛仔裤.jpg"/></a></li>
        <li><a href="#"><img src="img/登山鞋.jpg"/></a></li>
        <li><a href="#"><img src="img/皮带.jpg"/></a></li>
        <li><a href="#"><img src="img/男毛衣.jpg"/></a></li>
        <li><a href="#"><img src="img/男棉服.jpg"/></a></li>
      </ul>
      <ul id="right">
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
      </ul>
    </div>
    </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
.wrapper {
    width: 218px;
    height: 108px;
    margin: 100px auto 0;
    border: 1px solid pink;
    overflow: hidden;
}
#left, #center, #right {
    float: left;
}
#left li, #right li {
    background: url(../img/lili.jpg) repeat-x;
}
#left li a, #right li a {
    display: block;
    width: 48px;
    height: 27px;
    border-bottom: 1px solid pink;
    line-height: 27px;
    text-align: center;
    color: black;
}
#left li a:hover, #right li a:hover {
    color: #fff;
    background-image: url(../img/abg.gif);
}
#center {
    border-left: 1px solid pink;
    border-right: 1px solid pink;
}
img {
    width: 120px;
    height: 108px;
}

CSS
jQuery手风琴是一种常见的网页元素,它可以通过鼠标移入事件来实现图片轮播切换效果。实现方法如下: 1. 在HTML中创建手风琴元素,并在其中添加图片和文字等内容。 2. 使用CSS将手风琴元素排列在一行或一列上,并设置每个元素的宽度和高度,以及背景色等样式。 3. 使用jQuery鼠标移入事件中,获取当前手风琴元素的位置和宽度,以及其他元素的位置和宽度等信息。 4. 根据当前鼠标所在的位置,计算出需要展开或收缩的手风琴元素的宽度和位置,并使用jQuery的animate()方法实现动画效果。 以下是一个简单的示例代码: HTML代码: ``` <div class="accordion"> <div class="item"> <img src="image1.jpg"> <p>描述1</p> </div> <div class="item"> <img src="image2.jpg"> <p>描述2</p> </div> <div class="item"> <img src="image3.jpg"> <p>描述3</p> </div> </div> ``` CSS代码: ``` .accordion { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .item { width: 30%; height: 200px; background-color: #ccc; overflow: hidden; position: relative; } .item img { width: 100%; height: auto; } .item p { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 10px; background-color: rgba(0,0,0,0.5); color: #fff; } ``` JavaScript代码: ``` $('.item').mouseenter(function() { var currentIndex = $(this).index(); var itemWidth = $(this).width(); var itemLeft = $(this).offset().left; var totalWidth = $('.accordion').width(); var spaceWidth = (totalWidth - itemWidth * $('.item').length) / ($('.item').length - 1); $('.item').each(function(index) { if (index != currentIndex) { var left = spaceWidth * index + itemWidth * index; if (index < currentIndex) { left -= (currentIndex - index) * spaceWidth; } else { left += (index - currentIndex) * spaceWidth; } $(this).animate({ 'left': left }, 500); } }); $(this).animate({ 'width': totalWidth - itemWidth * ($('.item').length - 1) }, 500); }).mouseleave(function() { $('.item').each(function(index) { var left = spaceWidth * index; $(this).animate({ 'left': left }, 500); }); $(this).animate({ 'width': itemWidth }, 500); }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值