php图片点击查看大图,jQuery点击小图看大图,大图查看内容详情所有图片
jQuery点击小图看大图,大图查看内容详情所有图片:
html代码如下:
×
<
>
CSS代码如下:
* {
margin:0;
padding:0;
}
body {
overflow-x:hidden;
}
.gallery {
width:950px;
margin:10px auto;
border:1px solid #000;
overflow:hidden;
padding:20px;
border-radius:15px;
box-shadow:1px 2px 3px black;
}
.gallery ul {
list-style:none;
}
.gallery ul li {
float:left;
width:160px;
height:86px;
margin-right:30px;
margin-bottom:30px;
cursor:pointer;
padding:5px;
}
.BLACKCOVER {
width:100%;
height:100%;
background-color:black;
opacity:0.6;
position:fixed;
top:0;
left:0;
display:none;
}
.bigShow {
position:absolute;
top:38.2%;
left:50%;
width:560px;
height:300px;
padding:20px;
background:white url(juhua.gif) no-repeat center center;
margin-top:-150px;
margin-left:-280px;
box-shadow:1px 2px 3px black;
border-radius:15px;
display:none;
}
.bigShow span.close {
position:absolute;
width:30px;
height:30px;
background-color:black;
color:white;
border:1px solid #000;
right:-15px;
top:-15px;
border-radius:50%;
font-size:30px;
line-height:30px;
text-align:center;
cursor:pointer;
}
.bigShow img {
display:none;
}
.bigShow span.leftBtn {
position:absolute;
width:60px;
height:60px;
top:50%;
left:-30px;
margin-top:-30px;
background-color:#38C9C3;
font-size:60px;
text-align:center;
line-height:60px;
border-radius:50%;
cursor:pointer;
}
.bigShow span.rightBtn {
position:absolute;
width:60px;
height:60px;
top:50%;
right:-30px;
margin-top:-30px;
background-color:#38C9C3;
font-size:60px;
text-align:center;
line-height:60px;
border-radius:50%;
cursor:pointer;
}jquery代码如下:
$(document).ready(function() {
var $BLACKCOVER = $(".BLACKCOVER");
var $bigShow = $(".bigShow");
var $bigImg = $bigShow.children("img");
var $leftBtn = $(".leftBtn");
var $rightBtn = $(".rightBtn");
var $lis = $(".gallery ul li");
var nowimg = 0;
$(".gallery>ul>li").click(function() {
//让大黑布展示:
$BLACKCOVER.fadeIn();
//让大图显示
$bigShow.show();
var URL = $(this).attr("data-large");
nowimg = $(this).index();
$.get(URL, function(data) {
//图片已经完整请求之后,做的事情!
//请求之后做的事情
//里面不用data参数。
$bigImg.attr("src", URL);
$bigImg.fadeIn();
});
//让大图的src,变成你点击的li里面的data-large属性:
});
//关闭业务
$(".close , .BLACKCOVER").click(function() {
$BLACKCOVER.fadeOut();
$bigShow.hide();
$bigImg.hide();
});
$(".rightBtn").click(function() {
nowimg++;
if (nowimg > 9) {
nowimg = 0;
}
$bigShow.animate({
"left": -560
}, 400, function() {
$bigImg.hide();
$(this).css("left", 3000);
$(this).animate({
"left": "50%"
}, 400);
//请求新的图片
var URL = $lis.eq(nowimg).attr("data-large");
$.get(URL, function(data) {
//图片已经完整请求之后,做的事情!
//请求之后做的事情
//里面不用data参数。
$bigImg.show();
$bigImg.attr("src", URL);
});
});
});
});
php图片点击查看大图,jQuery点击小图看大图,大图查看内容详情所有图片相关推荐
- html点击隐藏divjq,jquery点击a标签怎么显示和隐藏div?详解
你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦,一起来看看吧. 1.新建一个html文件,命名test.html,用来讲解jquery点击a ...
- 怎样查看主板支持服务器内存,如何简单方便的查看主板支持多大内存?
由于不同的主板最大支持的内存大小不同,一些老主板最大支持4G/8GB内存,一些新主板可以支持16GB或者更高.当我们要对自己的电脑进行内存升级时,就需要先了解主板最大支持多大的内存,这样才能去选择购买 ...
- Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
- html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
- jquery点击图片放大,再点缩小(转)
使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: html代码: <td width=&qu ...
- jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)
前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
- jQuery点击查看更多,列表陆续显示
jQuery点击查看更多图片 演示效果: jQuery点击查看更多 HTML代码: <div class="gallerywrap"><div class=&qu ...
- 弹出查看图片_报表工具如何实现“点击查看原图”
在各种涉及图片的 Web 网站上,无论是搜图类.社交类.保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看.这种操作 ...
- android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面 这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
最新文章
- java子类和父类构造函数_java 子类和父类构造函数关系
- 常考数据结构与算法:数组中相加和为0的三元组
- CyberLink ColorDirector Ultra(视频调色工具)中文版
- 查看java返回的值,JavaScript 遍历对象查找指定的值并返回路径
- #10 Linux硬盘管理
- 日记 [2007年09月22日]solaris 10 挑战
- PHP大文件分割上传(分片上传)
- 2.软件架构设计:大型网站技术架构与业务架构融合之道 --- 架构的道与术
- 实训报告html前端开发,web前端开发实习报告比你想象中简单
- CGAL几何库配置教程
- 中国手机用户换机越来越慢
- 哪里有免费大文件传输平台?通过这4个网站免费来进行大文件传输
- win10打开蓝牙_在win10中,使用“设置”检查蓝牙设备电量,是个简便的方法
- 20篇高质量程序人生文章分享,做开发不仅仅只有代码
- 3.Python3标准库--数据结构
- 技术揭秘12306改造(二):探讨12306两地三中心混合云架构
- CSS 版心和布局流程
- 在VS Studio中管理多个cpp文件或项目
- 计算机基础a试题,计算机基础试题A
- 爱的1000+篇文章总结