jQuery 切换图片（图标）效果
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
} ul,
li { list-style: none;
} body {
background: #f6f6f6;
} .active {
background: red;
} #box li {
display: none;
} #ul {
background: #fff;
} #ul li {
float: left;
width: 200px;
} #ul li img {
width: 60px;
padding: 10px;
} #ul:after {
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head> <body>
<ul id="ul">
<li id="n1" class="active"><img src="data:image/n1_hover.png"></li>
<li id="n2"><img src="data:image/n2.png"></li>
<li id="n3"><img src="data:image/n3.png"></li>
</ul>
<ul id="box">
<li style="display: block">111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
$(function () {
function tab(navItem, boxItem, navActiveClassName) {
navItem.click(function () {
$(this).addClass(navActiveClassName).siblings().removeClass(navActiveClassName);
boxItem.eq($(this).index()).show().siblings().hide();
var id = $(this).attr("id");//id命名需要和图片名称一样
navItem.each(function () {
var newId = $(this).attr("id");
if (id == newId) {
$(this).find("img").attr("src", "image/" + id + "_hover.png");//点亮的图片名称加_hover
} else {
$(this).find("img").attr("src", "image/" + newId + ".png");
}
})
})
}
tab($("#ul li"), $("#box li"), "active");
})
</script>
</body> </html>
jQuery 切换图片（图标）效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- 如何用Jquery做图片展示效果
一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
- jquery 鼠标图片经过效果
<script> //鼠标图片经过效果 $(function(){ $(".jione_box ").css("background-color", ...
- 第74天：jQuery实现图片导航效果
图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Android 轮播图Banner切换图片的效果
Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910 版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- 使用UIScrollView和UIPageControl做一个能够用手势来切换图片的效果
利用UIScrollView的滚动效果来实现,先上图: 实现过程是:在viewController里先增加UIScrollView和UIPageControl: -(void) loadView { ...
随机推荐
- CSS如何设置换行文字自动对齐
CSS如何设置换行文字自动对齐 如图所示: 代码实现如下: <ul class='warn-page-content'> <li> ...
- Socket.Receive 无法预知字节长度的数据接收
话不多说直接上代码: string recvStr = ""; byte[] recvBytes = new byte[1024]; int bytes; do { bytes = ...
- MarkDown和流程图诠释你的代码
写在前面:首先感谢导师-猴哥对我的认可(求多分享点编程经验.工具.多开课),学习编程是一个痛苦和快乐的过程,希望大家共勉 本文介绍MarkDown的基本语法.使用MarkDown画简单的流程图.使用X ...
- Android学习——AsyncTask的使用
AsyncTask是安卓自带的异步操作类,把异步操作简化并封装好,从而可以让开发者在子线程中更方便地更新UI. AsyncTask为一个抽象类,在继承AsyncTask时需要指定如下三个泛型参数:&l ...
- 腾讯云微信小程序域名变更指南
1 . 将域名添加到云解析里面, 将解析的地址指向已有的小程序负载均衡地址: https://console.qcloud.com/cns 将域名添加到解析列表 添加成功之后,点击解析按钮,添加二级域 ...
- springMvc-入参对象
1.修改或者添加对象 2.多添件查询时候也会遇到 springMvc能够根据属性自动的封装pojo的对象并且支持关联的对象:大致的原理是在传入后台的时候把前台的属性和对象封装成json的形式传入后台, ...
- Android（java）学习笔记3：线程的优先级
1. Java线程的优先级从1到10级别,值越大优先级越高线程默认优先级是5.值越大优先级越高 (1) 继承自Thread类创建线程类: package cn.itcast_04; public cl ...
- QT隐含共享类 QSharedData QSharedDataPointer
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/davidsu33/article/details/28857391 QT中非常多类都实现了隐含共享比 ...
- position中需要注意的地方
relative是相对元素本身位置进行移位,但不会改变本身位置的大小 本身的位置 移位后,可以看到,p5的位置还是在那,并不会自动往上走,也就是p2的位置原来所占据的位置不变的.不会因为偏移而改变布局 ...
- Hinge Loss
http://blog.csdn.net/luo123n/article/details/48878759 https://en.wikipedia.org/wiki/Hinge_loss ...