jQuery实现鼠标移入切换图片

初始效果：	鼠标移入效果：

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

写一个jQuery载入事件

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

载入事件里面写鼠标移入<li>标签调用的方法

$('#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>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>博客园（https://www.cnblogs.com）</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>

HTML源码

* {

    margin:;

    padding:;

    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实现鼠标移入切换图片的更多相关文章

用jQuery实现鼠标移动切换图片动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...
原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一在上栗子之前我们 ...
CSS实现鼠标移入时图片的放大效果以及缓慢过渡
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...
jquery实现鼠标移入移除背景图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
【方法】jQuery无插件实现鼠标拖动切换图片/内容功能
前言我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...
WPF之鼠标滑动切换图片
在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓 ...
Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

随机推荐

1040 有几个PAT (25 分)
题目:1040 有几个PAT (25 分) 思路: 是个规律题,只要找到规律就有思路,那代码基本就有了,就是怎么实现比较好和是否简洁的问题. 很明显:A是分水岭,A前面有多少个P和A后面有多少个T知道 ...
听《Sara》
Sara这首歌太好听了,虽然没有清楚具体是唱什么,但我感觉是讲一个故事,很好奇,我找到了歌词. Sara 塞拉鲍勃迪伦 I laid on a dune, I looked at the sky, ...
python-倒序循环
有时候循环需要用到倒序,所以整理一下倒序循环的方法方法1: 如果要倒序遍历访问序列中的元素,可以对该序列使用reversed() 函数,reversed函数会生成一份倒序列表的拷贝,但是不会改变原列 ...
JSP_EL的回顾
在 JSP 页面中,使用标签库代替传统的 Java 片段语言来实现页面的显示逻辑已经不是新技术了,然而,由自定义标签很容易造成重复定义和非标准的实现.鉴于此,出现了 JSTL ( JSP Standa ...
HDU-1425-sort（计数排序以及快速排序和堆排序的变种）
计数排序 Accepted 1425 483MS 5276K 997 B G++ #include "bits/stdc++.h" using namespace std; typ ...
unittest（6）- 作业- 测试类中写多个函数
实践作业:对多个接口发起请求,测试类中写多个测试函数 # 1. http_request import requests class HttpRequest: def http_request(sel ...
亚马逊Prime会员的杀价，能说明会员+会越来越便宜吗？
前段时间,京东又坑了!京东调整了物流方案--从原来的购物不满49元只需6元运费,调整到购物不满46元运费15元,运费猛涨了9元!原本京东PLUS会员每月有5张免运费券,但在运费涨价后运费券限制在6元, ...
poi报表导出4.1.0版本工具类导出并下载
这一段时间,由于项目上线基于稳定,所以我这边在基于我们一期迭代的分支上优化一部分我们之前没有做的功能,报表导出.本身之前用的是3.5的版本,但是由于同事要写导入,写的代码只有4.1.0的版本支持,所以 ...
Java实体映射工具MapStruct的使用
官网地址:http://mapstruct.org/ MapStruct 是一个代码生成器,简化了不同的 Java Bean 之间映射的处理,所谓的映射指的就是从一个实体变化成一个实体.例如我们在实际 ...
从wordpress换hexo博客后
之前用wordpress做blog, 为什么换为hexo呢? 第一 wordpress的文章都保存在服务器的数据库, 维护不是很直观. 而hexo是自己编写markdown文章,本地一份,而b ...

jQuery实现鼠标移入切换图片

jQuery实现鼠标移入切换图片的更多相关文章

随机推荐

热门专题