提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、步骤介绍
- 二、使用步骤
- 1.引入js库
- 2.操作代码
- 总结
前言
Html:点击图片进行切换(不用Button按钮,密码显示的小眼睛和购物选中状态,可直接复制但要修改自己相对应的文件路径)
提示:以下是本篇文章正文内容,下面案例可供参考
一、步骤介绍
ps:这里由于个人习惯把操作代码写在Body上面 众所周知—html页面加载顺序是由上至下 由左至右
写在上面只要有“文档加载函数”就不影响页面加载顺序
如果不写“文档加载函数” 就会出现上面的操作代码页面加载后认识
下面的图片属性没有加载到页面并不认识 造成代码没有问题但无法实现功能操作的情况
<!-- 步骤介绍:1.引入jQuery包 在script标签中写操作代码 -->
<!-- 步骤介绍:2.定义两个变量存储布尔(bool) 为了让自己明白到当前的图片状态
两个图片不能共用一个变量 如果共用 上面的点击事件就会影响到下面的图片状态-->
<!-- 步骤介绍:3.给要点击的图片添加点击事件 然后判断我们定义的变量当前状态是true还是false
如果是true 我们就给他更换 图片路径 src属性 更换完之后给变量状态更换为false
反之如果是false 则同理 图片更换完之后 变量状态也随之更换。-->
<!-- 步骤介绍:4.更换完之后它会跳出循环,再次点击后会再次进入循环事件 判断变量状态 然后给图片更换成自己想要的状态 -->
二、使用步骤
1.引入js库
代码如下(示例):
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">!--在这里写操作代码--!</script>
2.操作代码
代码如下(示例):
<script type="text/javascript">
// 文档加载函数
$(function() {
// 定义两个变量来存储bool值
var flag1 = true;
var flag2 = true;
// 选中小眼睛图片的点击事件
$('#imgeyes').click(function() {
if (flag1 == true) {
$('#imgeyes').attr('src', 'img/open.png');
flag1 = false;
}
else {
$('#imgeyes').attr('src', 'img/close.png');
flag1 = true;
}
})
// 选中对勾 √ 图片的点击事件
// 原理同上
$('#imgcheck').click(function() {
if (flag2 == true) {
$('#imgcheck').attr('src', 'img/ico_checkout.png');
// 变量赋值一定要写在更换完图片属性之后
flag2 = false;
}
else {
$('#imgcheck').attr('src', 'img/ico_unchecked.png');
flag2 = true;
}
})
})
</script>
下面展示 Css样式
。
<style>
//这里因为我就使用的标签数量不多所以直接给标签添加样式
p {
border-bottom: 1px solid black;
/* 下划线 */
}
div {
text-align: center;
/* 居中 */
}
img {
cursor: pointer;
/* 鼠标显示可点击 */
}
</style>
下面展示 Body内容部分
。
<body>
<div>
<p>
<img src="img/close.png" alt="" id="imgeyes">
</p>
<p>
<img src="img/ico_unchecked.png" alt="" id="imgcheck">
</p>
</div>
</body>
下面展示 整体内容部分
。
此处可直接复制 内容文字可直接删除
注意修改自已图片文件对应路径和js文件夹下的JQuery功能包是否存在!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- ps:这里由于个人习惯把操作代码写在上面 众所周知---html页面加载顺序是由上至下 由左至右
写在上面只要有“文档加载函数”就不影响页面加载顺序
如果不写“文档加载函数” 就会出现上面的操作代码页面加载后认识
下面的图片属性没有加载到页面并不认识 造成代码没有问题但无法实现功能操作的情况 -->
<!-- 步骤介绍:1.引入jQuery包 在script标签中写操作代码 -->
<!-- 步骤介绍:2.定义两个变量存储布尔(bool) 为了让自己明白到当前的图片状态
两个图片不能共用一个变量 如果共用 上面的点击事件就会影响到下面的图片状态-->
<!-- 步骤介绍:3.给要点击的图片添加点击事件 然后判断我们定义的变量当前状态是true还是false
如果是true 我们就给他更换 图片路径 src属性 更换完之后给变量状态更换为false
反之如果是false 则同理 图片更换完之后 变量状态也随之更换。-->
<!-- 步骤介绍:4.更换完之后它会跳出循环,再次点击后会再次进入循环事件 判断变量状态 然后给图片更换成自己想要的状态 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 文档加载函数
$(function() {
// 定义两个变量来存储bool值
var flag1 = true;
var flag2 = true;
// 选中小眼睛图片的点击事件
$('#imgeyes').click(function() {
if (flag1 == true) {
$('#imgeyes').attr('src', 'img/open.png');
// 变量赋值一定要写在更换完图片属性之后
flag1 = false;
}
else {
$('#imgeyes').attr('src', 'img/close.png');
flag1 = true;
}
})
// 选中对勾 √ 图片的点击事件
// 原理同上
$('#imgcheck').click(function() {
if (flag2 == true) {
$('#imgcheck').attr('src', 'img/ico_checkout.png');
flag2 = false;
}
else {
$('#imgcheck').attr('src', 'img/ico_unchecked.png');
flag2 = true;
}
})
})
</script>
<style>
p {
border-bottom: 1px solid black;
/* 下划线 */
}
div {
text-align: center;
/* 居中 */
}
img {
cursor: pointer;
/* 鼠标显示可点击 */
}
</style>
</head>
<body>
<div>
<p>
<img src="img/close.png" alt="" id="imgeyes">
</p>
<p>
<img src="img/ico_unchecked.png" alt="" id="imgcheck">
</p>
</div>
</body>
</html>
总结
写操作代码的时候每一步要思考自己要做什么,要实现什么功能,具体要怎么实现,要有一定的思路理解。