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

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

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

写一个jQuery载入事件

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

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

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

获取当前被选元素的索引

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

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

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

在中间显示对应的图片

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

整个jQuery代码

  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2.         <script>
  3.             $(function() {
  4.                 $('#left>li,#right>li').mouseenter(function() {
  5.                     var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
  6.                     if($(this).parent().attr("id")=="right"){
  7.                         i+=4;
  8.                     }//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
  9.                     $("#center>li:not()").hide().eq(i).show();  //因为所有的图片都加在了中间无序列表里里，所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素，hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素，索引从0开始,show() 方法显示隐藏的被选元素。
  10.                    });//#left>li选择器是获取左边的<li>标签，同理#right>li获取的是右边的<li>标签，mouseenter是鼠标移入被选元素触发的事件
  11.            }); //因为HTML文档是由浏览器从上到下依次载入的，载入事件能避免JavaScript代码放在太后面而没效果
  12.         </script>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>博客园（https://www.cnblogs.com）</title>
  6.         <link rel="stylesheet" href="css/good2.0.css">
  7.         <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8.         <script>
  9.             $(function() {
  10.                 $('#left>li,#right>li').mouseenter(function() {
  11.                     var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
  12.                     if($(this).parent().attr("id")=="right"){
  13.                         i+=4;
  14.                     }//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
  15.                     $("#center>li:not()").hide().eq(i).show();  //因为所有的图片都加在了中间无序列表里里，所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素，hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素，索引从0开始,show() 方法显示隐藏的被选元素。
  16.                    });//#left>li选择器是获取左边的<li>标签，同理#right>li获取的是右边的<li>标签，mouseenter是鼠标移入被选元素触发的事件
  17.            }); //因为HTML文档是由浏览器从上到下依次载入的，载入事件能避免JavaScript代码放在太后面而没效果
  18.         </script>
  19.     </head>
  20.     <body>
  21.          <div class="wrapper">
  22.       <ul id="left">
  23.         <li><a href="#">雪地靴</a></li>
  24.         <li><a href="#">冬裙</a></li>
  25.         <li><a href="#">呢大衣</a></li>
  26.         <li><a href="#">牛仔裤</a></li>
  27.       </ul>
  28.       <ul id="center">
  29.         <li><a href="#"><img src="img/雪地靴.jpg"/></a></li>
  30.         <li><a href="#"><img src="img/冬裙.jpg"/></a></li>
  31.         <li><a href="#"><img src="img/呢大衣.jpg"/></a></li>
  32.         <li><a href="#"><img src="img/牛仔裤.jpg"/></a></li>
  33.         <li><a href="#"><img src="img/登山鞋.jpg"/></a></li>
  34.         <li><a href="#"><img src="img/皮带.jpg"/></a></li>
  35.         <li><a href="#"><img src="img/男毛衣.jpg"/></a></li>
  36.         <li><a href="#"><img src="img/男棉服.jpg"/></a></li>
  37.       </ul>
  38.       <ul id="right">
  39.         <li><a href="#">登山鞋</a></li>
  40.         <li><a href="#">皮带</a></li>
  41.         <li><a href="#">男毛衣</a></li>
  42.         <li><a href="#">男棉服</a></li>
  43.       </ul>
  44.     </div>
  45.     </body>
  46. </html>

HTML源码

  1. * {
  2.     margin:;
  3.     padding:;
  4.     font-size: 12px;
  5. }
  6. ul {
  7.     list-style: none;
  8. }
  9. a {
  10.     text-decoration: none;
  11. }
  12. .wrapper {
  13.     width: 218px;
  14.     height: 108px;
  15.     margin: 100px auto 0;
  16.     border: 1px solid pink;
  17.     overflow: hidden;
  18. }
  19. #left, #center, #right {
  20.     float: left;
  21. }
  22. #left li, #right li {
  23.     background: url(../img/lili.jpg) repeat-x;
  24. }
  25. #left li a, #right li a {
  26.     display: block;
  27.     width: 48px;
  28.     height: 27px;
  29.     border-bottom: 1px solid pink;
  30.     line-height: 27px;
  31.     text-align: center;
  32.     color: black;
  33. }
  34. #left li a:hover, #right li a:hover {
  35.     color: #fff;
  36.     background-image: url(../img/abg.gif);
  37. }
  38. #center {
  39.     border-left: 1px solid pink;
  40.     border-right: 1px solid pink;
  41. }
  42. img {
  43.     width: 120px;
  44.     height: 108px;
  45. }

CSS

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

  1. 用jQuery实现鼠标移动切换图片动画

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  3. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  4. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  5. jquery实现鼠标移入移除背景图片切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  7. WPF之鼠标滑动切换图片

    在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓 ...

  8. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  9. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

随机推荐

  1. SQL中的一些关键字用法

    1.where 条件筛选结果 select * from `表名` where `列名`='value' 上诉语句的意思是在某表中查询某列名等于某特定值得所有列 2.Like 模糊查询 select ...

  2. 线程、volatile与synchronized、Lock

    目录 线程 1.概念: 2.线程生命周期: 3.线程调度 4.线程实现 4.1.实现方式 4.2.之间的区别: 5.线程安全 5.1.volatile与synchronized 5.1.synchro ...

  3. undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决（可能是顺序问题）

    1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库   转载地址: ...

  4. leetcode第24题：两两交换链表中的节点

    通过分析,这属于数据结构类型题目,但涉及到多次交换,也需要算法知识. 首先,我想的是,将链表中节点相互交换. class Solution: def swapPairs(self, head: Lis ...

  5. 小码哥哥 FastJson--阿里巴巴公司开源的速度最快的Json和对象转换工具

    转载地址:http://www.oschina.net/code/snippet_228315_35122?_t_t_t=0.4667952097048127 class User{ private ...

  6. Ionic3 Demo

    本文为原创文章,转载请标明出处 最近又开源了一个小 Demo,基于 Ionic 3.9.2.注册登录功能使用的是 WildDog 野狗通信云,大家可以放心的注册登录玩.电影相关数据来源自"某 ...

  7. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  8. URL与URI与URN的区别与联系

    1.什么是URL? 统一资源定位符(或称统一资源定位器/定位地址.URL地址等[1],英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网 ...

  9. python标准库-builtin 模块之compile，execfile

    eval函数仅仅允许执行简单的表达式.对于更大的代码块时,使用compile和exec函数. 例子:使用 compile函数验证语法 NAME = "script.py" BODY ...

  10. <SCOI2005>互不侵犯の思路

    日常玄学dp #include<cstdio> #include<cstring> #include<iostream> #include<algorithm ...