html 进网页就弹出图片,利用HTML、CSS实现的图片预览弹出层的教程
var ImageScaHandler={ ImageMaxWidth:800,
ImageMaxHeight:600, ImagePathJson:[{imgName:"预览弹出层测试图片1",imgPath:"1img1.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
{imgName:"预览弹出层测试图片2",imgPath:"1img2.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"}, {imgName:"预览弹出层测试图片3",imgPath:"1img3.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
{imgName:"预览弹出层测试图片4",imgPath:"1img4.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"}, {imgName:"预览弹出层测试图片5",imgPath:"1img5.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"},
{imgName:"预览弹出层测试图片6",imgPath:"1img6.jpg",imgInfo:"HTML图片预览弹出层测试图片-豪车图片集锦(图片均来自互联网)"} ],
Init:function(){ $("#ImageSca").css("width",ImageScaHandler.ImageMaxWidth 200 "px");
$("#ImageSca").css("height",ImageScaHandler.ImageMaxHeight 10 "px"); $("#ImageSca").css("top",($(window).height()-$("#ImageSca").height())/2 "px");
$("#ImageSca").css("left",($(window).width()-$("#ImageSca").width())/2 "px"); $("#ImageContainer").css("width",$("#ImageSca").width()-300 "px").css("height",$("#ImageSca").height());
$("#imgLunbo").css("width",$("#ImageSca").width()-300-100 "px").css("top",$("#ImageSca").height()-90 "px"); $("#ImageInfo").css("height",$("#ImageSca").height());
$("#ImageMain>img").click(function(){ ImageScaHandler.ChangeImage($(this));
}); ImageScaHandler.GetImage();
$("#ImageSca").click(function(event){ event.stopPropagation();
}); $("#ImageScaBg").click(function(event){
ImageScaHandler.Hide(); });
}, Show:function(){
$("#ImageSca").css("display","block"); $("#ImageScaBg").css("display","block");
}, Hide:function(){
$("#ImageSca").css("display","none"); $("#ImageScaBg").css("display","none");
}, GetImage:function(){
$("#imgLunbo").children().remove(); for(var i=0;i
var mImage=document.createElement("img"); mImage.className="imgLunboItem";
mImage.src=ImageScaHandler.ImagePathJson.imgPath; $("#imgLunbo").append(mImage);
mImage.οnclick=function(){ $(".imgLunboItem").css("border","0px solid #000");
ImageScaHandler.ChangeImage($(this)); }
} },
ChangeImage:function(target){ $("#ImageContainer>img").attr("src",$(target).attr("src"));
$("#ImageContainer>img").css("margin-top",100 "px"); ImageScaHandler.Show();
$(".imgLunboItem").css("border","0px solid #000"); for(var i=0;i
if(ImageScaHandler.ImagePathJson.imgPath==$(target).attr("src")){ $("#imgName").html(ImageScaHandler.ImagePathJson.imgName);
$("#imgInfo").html(ImageScaHandler.ImagePathJson.imgInfo); $($(".imgLunboItem")).css("border","2px solid #efefef");
} }
} }
html 进网页就弹出图片,利用HTML、CSS实现的图片预览弹出层的教程相关推荐
- 自动弹图片html,HTML图片预览弹出层实现
HTML CSS Jq实现的图片点击预览功能,在预览时也可以点击切换图片.右边为预览图片的名称以及说明. CSS#ImageMain { width: 630px; height: 500px; ma ...
- iOS开发,利用PanoramaGL生成360度全景预览图,附选择本地全景图片并生成全景预览...
前言 初做全景项目,涉及到了360度全景展示(也可以是720度的旋转),查找了很多资料,很多都是用PanoramaGL这个库实现的,本人也踩了一下坑,下面我简单的总结一下. 初识PanoramaGL ...
- 图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...
先上效果演示: 功能说明 选择图片区域并剪裁为头像 Html部分 页面分左右两部分:左边显示遮罩图片的缩放与拖动,右边显示剪裁后图片的预览 <div class="content&qu ...
- html背景图片只显示一张图片,img只显示图片一部分 或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- css 设置背景图一半_img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- pdfjs打印预览多出一页空白页
问题描述: 测试发现,当pdf恰好是一页时,会出现打印预览多出一页空白页的问题,而当页面多时是正常的. 解决方案 修改pdfjs源码/static/pdf/web/viewer.css 原样式: /* ...
- 利用微软的Office Online在线预览播放Office文档,无工具栏
利用微软的Office Online在线预览播放Office文档 通过微软的在线预览URL链接可以直接打开在线PPT文档如下 https://view.officeapps.live.com/op/v ...
- php主页显示商品预览图代码,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能...
这次给大家带来jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1 . ...
最新文章
- 清华成立视觉智能研究中心,邓志东任中心主任
- SL400之换轴篇@屏轴门
- [转]iOS为UILabel添加长按复制功能
- 超参数优化 贝叶斯优化框架_mlmachine-使用贝叶斯优化进行超参数调整
- 30 位互联网大佬,当年上了什么大学?
- 算法笔记_面试题_7.颜色分类/荷兰三色旗问题
- 7-110 自动售货机 (30 分)
- 基于raphael 的图形变化
- Java结合docx4j生成docx文件
- 全网最新抖音视频去水印解析PHP网页源码
- CDR 网状填充高级图形
- 轻松选择/复制word文档的整个章节的内容
- Chapter 5 分类算法——决策树与随机森林
- Pillow透视变换进行图片纠偏
- No fallbackFactory instance of type class com.chongyou.system.api.factory.RemoteUserFallbackFactory
- 2021年中国饲料添加剂行业发展现状分析(附产值、市场供需现状、进出口贸易)[图]
- 解决CUDA out of memory. Tried to allocate 2.10 GiB (GPU 0; 14.76 GiB total capac
- Content-Type是什么?
- 【IDE-Visual Studio】VC\VS2005\VS2008\VS2010 消除 忽略 加强警告Warning
- vue 实现页面监听键盘按键 上下左右