html密码显示隐藏小眼睛
效果：
代码如下：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.tubiao {
width: 30px;
height: 25px;
position: absolute;
/*right: 12%;*/
left: 12%;
padding-top: 0px;
opacity: 0.5;
}
.tubiao:hover {
opacity: 1;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#dj").click(function() {
if($("#pass").attr("type") == "text") {
$("#pass").attr("type", "password");
$("#dj img").css("opacity", 0.5)
$("#dj img").attr("src", "img/eye-black.png")
} else {
$("#pass").attr("type", "text");
$("#dj img").css("opacity", 1)
var img = $("#dj img").attr("src");
console.log(img)
if(img == "img/eye.png") {
$("#dj img").attr("src", "img/eye-black.png")
} else {
$("#dj img").attr("src", "img/eye.png")
}
}
});
});
</script>
</head>
<body>
<div>
<input id="pass" type="password" placeholder="请输入密码：" />
<a id="dj" class="tubiao" title="点击隐藏或显示密码">
<img src="img/eye.png" />
</a>
</div>
</body>
</html>
转载自：
自己修改了一下
