JS效果-灯箱效果-图片大图查看

一个简单的自己写的简陋版“灯箱效果”，不多说看代码：（自己找一下图片，路径记得改，用到jQuery）嫌js麻烦，主要想试一下实现逻辑。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>灯箱效果</title><style>body{margin: 0;}.box img,.box .bigImg span{cursor: pointer;}.box .bigImg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;}.box .bigImg img{margin: 200px auto 0;display: block;}.box .bigImg span{font-size: 30px;font-weight: 700;position: absolute;top: 200px;right: 200px;}</style><script src="../jquery.js"></script>
</head>
<body><div class="box"><img src="1.jpg" alt="" width="200"><div class="bigImg"><img src="1.jpg" width="600"><span>&times;</span></div><img src="tmall-card-01.png" alt="" width="200"><div class="bigImg"><img src="tmall-card-01.png" width="600"><span>&times;</span></div><img src="tmall-card-02.png" alt="" width="200"><div class="bigImg"><img src="tmall-card-02.png" width="600"><span>&times;</span></div><img src="tmall-eticket.png" alt="" width="200"><div class="bigImg"><img src="tmall-eticket.png" width="600"><span>&times;</span></div><img src="tmall-reserve.png" alt="" width="200"><div class="bigImg"><img src="tmall-reserve.png" width="600"><span>&times;</span></div></div><script>$(function(){$(".box img").each(function(){$(this).click(function(){$(this).next().show(1000);});});$(".bigImg span").each(function(){$(this).click(function(){$(this).parent().hide(1000);});});});</script>
</body>
</html>

JS效果-灯箱效果-图片大图查看相关推荐

js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
hexo（sakura）引入fancybox优化图片视频查看效果
文章目录一.fancybox介绍二.hexo中添加fancybox 1. 添加引用 2.修改配置题外话: 原本在hexo-theme-sakura作者hojun的添加下有zoom功能, 我也乖乖 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
灯箱效果lightbox.js的使用示例
灯箱效果想必大家都很熟悉,平常用的也会比较多. 今天研究了下反应比较好的jquery插件lightbox.js,虽然界面效果不错,但是也有缺点兼容性:各大浏览器和ie6+ 不足: 1由于我们使用时是 ...
html轮播带缩略图,js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:--------------- ...
html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法
本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 鼠标触发图片抖动效果 .shakeimage{ position:relative } //configur ...
拜托，使用 Three.js 让二维图片具有 3D 效果超酷的
前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景逛 sk ...
js实现放大镜效果(图片放大)—JavaScript
今天来做一个非常常见且有意思的的案例,就是我们的鼠标经过图片放大的一个效果! 具体实现的效果看下面这张图案例分析: 黄色的遮挡层跟随鼠标功能. 把鼠标坐标给遮挡层不合适.因为遮挡层坐标以父盒子为准 ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...

JS效果-灯箱效果-图片大图查看

JS效果-灯箱效果-图片大图查看相关推荐

最新文章

热门文章