jQuery实现点击开关图片切换
2024-08-24 06:01:26
原型大概是这样的
image
需求:点击右侧的蓝色眼睛,会变成
关键代码:
/* 实现图片切换 */
$(".imgclick").toggle(function(){
$(this).attr("src","img/close.png");
},function(){
$(this).attr("src","img/open.png");
}).attr("src","img/open.png");
其实原理很简单,就是利用toggle的参数切换不同函数。
可以直接复制黏贴的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div>
<img class="imgclick" src="img/close.png" />
</div>
<div>
<img class="imgclick" src="img/close.png" />
</div>
</body>
<script>
/* 实现图片切换 */
$(".imgclick").toggle(function() {
$(this).attr("src", "img/close.png");
}, function() {
$(this).attr("src", "img/open.png");
}).attr("src", "img/open.png");
</script>
</html>
最新文章
- linux常用命令-文件搜索命令-locate,which,whereis,grep
- 一些实用的Windows注册表
- Android UI 优化——使用HierarchyViewer工具
- Android数据库之SQLite数据库
- Git教程(7)用合并还是变基?
- MySQL数据库MyISAM和InnoDB存储引擎的比较(转)
- 在Windows下读取Ext4分区
- Android学习-----Button点击事件几种写法
- [置顶] 63行代码完美实现html5 贪吃蛇游戏
- js 移动端识别手机号码
- 第四届河南省ACM 表达式求值 栈
- 【转】awk 里的substr函数用法举例
- angular路由详解五(辅助路由)
- FutureTask理解
- 电脑端支付宝支付 -前端获取支付宝返回的form 以及submit 调用支付扫码页面
- 基于EBNF语法的描述
- 快速排序 Java实现的快速排序
- set @sql=N&#39;q&#39;,这里的N是什么意思,加与不加有什么区别
- Oracle EBS 应收事务处理取值
- Effective C++ —— 定制new和delete(八)