博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js案例,鼠标移动到图片,图片显示一张照片点击图片能来回切换
阅读量:5072 次
发布时间:2019-06-12

本文共 890 字,大约阅读时间需要 2 分钟。

 

html:

<li id="divimg" class="picCon masonry-brick" style="width: 49.5%">
<div class="uiop">
<label id="lovejpg" class="number" style="display: none;">
<img
src="img/jpg/love.png"
class="imglove"
shareid="{
{ rew.id }}"
οnclick="imgloves(this)"
/>
</label>
<a href="javascript:void(0)" class="img">
<img id="kljh" src="img/jpg/2.png" />
</a>
</div>
</li>
 
 
 
js:
<script>
$(function() {
$(".uiop").mouseover(function() {
$(".number").css("display", "block");
});
$(".number").click(function() {
var src = $(this)
.find("img")
.attr("src");
if (src == "img/jpg/love.png") {
$(this)
.find("img")
.attr("src", "img/jpg/lovewit.png");
} else if (src == "img/jpg/lovewit.png") {
$(this)
.find("img")
.attr("src", "img/jpg/love.png");
}
});
$(".uiop").mouseout(function() {
$(".number").css("display", "none");
});
});
</script>
 
效果图

红色的心心点击能相互切换

转载于:https://www.cnblogs.com/lovebear123/p/11418689.html

你可能感兴趣的文章
Python 集合(Set)、字典(Dictionary)
查看>>
获取元素
查看>>
proxy写监听方法,实现响应式
查看>>
第一阶段冲刺06
查看>>
十个免费的 Web 压力测试工具
查看>>
EOS生产区块:解析插件producer_plugin
查看>>
lintcode-easy-Remove Element
查看>>
mysql重置密码
查看>>
jQuery轮 播的封装
查看>>
一天一道算法题--5.30---递归
查看>>
Java基础03 构造器与方法重载
查看>>
这些老外的开源技术养活了很多国产软件
查看>>
JS取得绝对路径
查看>>
排球积分程序(三)——模型类的设计
查看>>
python numpy sum函数用法
查看>>
php变量什么情况下加大括号{}
查看>>
less入门
查看>>
如何实现手游app瘦身?
查看>>
linux程序设计---序
查看>>
【字符串入门专题1】hdu3613 【一个悲伤的exkmp】
查看>>