今天心情大好，再发一篇最进前端实现的相册模仿功能。
这个相册是在一个网站的案例展示页面上实现的，没单独写出来，没时间，重用性也很差，以后有时间了再单独提取出来，
写这个玩意前，我在网上找了一些案例，但是一看代码都比较傻眼，固不想去研究，所以自己写了.....
下面是实现这个功能的截图
如果你是一个前端，这个功能对你来说除了逻辑复杂点，其他的可能实现起都比较简单，我不是做前端的，所以前端html这块遇到了一些问题。下面我会将我遇到的这些问题的解决方法分享出来。
首先说下:postion这个属性 以前我要用一般是用这个属性值一般是absolute和relative相对定位和绝对定位，但是相对用得都比较少，如果你是前端你应该知道，多数用的是margin-.....padding-......，这次用到了postion的fixed:他被用在我的弹出层背景层里面，当然用absolute和relative也可以，但是实践证明fixed在弹出层遮罩中使用更加精准合理。为什么我知道勒，这个是由于中途出现的一个bug后被我发现的..关于bug我这里就不谈了，反正你记弹出层背景定位时用postion的fixed就对了。(下面是css样式表代码:)
/*相册背景层 phoneteamrtransperantp这个是p，他的父节点是body,在不使用时你需要设置他的display:none*/
.phoneteamrtransperantp{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:black; opacity: 0.7; z-index: 2147000002;}
接着说下:拼接table表单, 呵呵关于这种玩法，做php的比较多,asp.net的是比较少的，因为asp.net有相应的控件，我现在虽然在asp.net的开发工具平台下开发网站，但是
我已经多久没使用过拖控件的方式了。。。一般都是asp.net页面+html+ajax做网站。 关于这个拼接table中所遇被我解决的问题，是我1-2年前做网站没解决的， 这次被我解决了呵呵，这个问题就是使用jquery来操作拼接中的标签，上次没解决我使用了javascript方法代替。这次md标签多了，我是死了心要用jquery，没想到，功夫不负有心人，这问题就这样被我给解决了。 解决方法:将操作拼接table标签的juqery方法写在拼接table标签方法的的内部(下面我贴代码):
/*------------------------点击后将相册需要加载的这个项目的所有图片展示到一个弹出层中（小图片)---------------------------------*/
$(function () {
$(".transparentp").click(function (e) {
var el = e.srcElement || e.target;
var transparentBackViewArray = $(".transparentp");
var AppTitleArray = $(".appDetialTitleClass");
for (var i = 0; i < transparentBackViewArray.length; i++) {
var focusTransparentBackView = transparentBackViewArray[i];
if (el == focusTransparentBackView) {
var pointTitle = AppTitleArray[i];//根据title去查询需要加载的说明图片
//transParentLawyer全屏幕遮蔽层
$("#masterp").after('
')
/* .transParentLawyer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; opacity: 0.5; z-index: 2147000000;}*/
var addPxWidth = document.documentElement.clientWidth;
var addPxHeight = document.documentElement.clientHeight;
var alertBackpWidth = 555;
var alertBackpHeight = 525;
var alertBackStyleMarginLeft = (addPxWidth - alertBackpWidth) / 2;
var alertBackStyleMarginTop = (addPxHeight - alertBackpHeight) / 2;
var createLeft = alertBackStyleMarginLeft.toString() + 'px';
var createTop = alertBackStyleMarginTop.toString() + 'px';
var ProjectName = "捉大毛APP";
var combindTable = "" + ProjectName + "
"
combindTable += "@@##@@ | @@##@@ | @@##@@ | @@##@@ | @@##@@ |
' + combindTable + '
') break; } }//将jquery方法写在拼接table标签的jquery方法体内，而且要放在拼接操作的后面 /*-----------弹出相册加载图片监听(为什么写在这里勒应为，我们上面的方法执行了完毕了（将我们需要加载的标签拼接好，才有我们需要操作的标签，-------------------* / $(".showPorjectAppImg").click(function(e) { var imageArray = $(".showPorjectAppImg"); var el = e.srcElement || e.target; //相册遮罩层 var imagePath; for (var i = 0; i < imageArray.length; i++) { var obj = imageArray[i]; if(el==obj) { currentAlbumIndex = i; imagePath = obj.src; break; } } var addPxWidth = document.documentElement.clientWidth; var addPxHeight = document.documentElement.clientHeight; var alertBackpWidth = 320; var alertBackpHeight = 560; var alertBackStyleMarginLeft = (addPxWidth - alertBackpWidth) / 2; var alertBackStyleMarginTop = (addPxHeight - alertBackpHeight) / 2; var createLeft = alertBackStyleMarginLeft.toString() + 'px'; var createTop = alertBackStyleMarginTop.toString() + 'px'; $("#masterp").after('') //src="+'"'+ imagePath +'"'+"/> 呵呵拼接的弹出图片 $(".PhoneTeamrTransperantp").after('') $(".appProjectPrevious").click(function (e) {//上一页 var imageArray = $(".showPorjectAppImg"); var el = e.srcElement || e.target; var imagePath; if (currentAlbumIndex > 0) { currentAlbumIndex = currentAlbumIndex + 1; } else { currentAlbumIndex = imageArray.length - 1; } var obj = imageArray[currentAlbumIndex]; imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg";//obj.src; // $("#rollAblumImage").attr("src", imagePath); $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () { $("#rollAblumImage").attr("src", imagePath); $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow"); //var image = $("#rollAblumImage"); // resizeimg(image, 320, 560); }); }) $(".appProjectNext").click(function (e) { // alert("adad"); var imageArray = $(".showPorjectAppImg"); var el = e.srcElement || e.target; var imagePath; if (currentAlbumIndex < imageArray.length-1) { currentAlbumIndex = currentAlbumIndex + 1; } else { currentAlbumIndex = 0; } var obj = imageArray[currentAlbumIndex]; imagePath = "http://localhost:59047/Source/phoneAppBackPanel.jpg"; $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow", null, function () { $("#rollAblumImage").attr("src", imagePath); $("#rollAblumImage").animate({ opacity: 'toggle' }, "slow"); }); // $("#rollAblumImage").attr("src", imagePath); }) }) }); });
相关文章
如何为移动端适配全屏滑出菜单（响应式 slide-out 菜单教程）
实现移动端全屏滑出菜单的响应式适配方案
如何实现响应式全屏滑出菜单（桌面固定宽度，移动端铺满屏幕）
如何实现响应式全屏滑出菜单（桌面固定宽度 / 移动端占满视口）
如何正确解析并格式化带双引号的 JSON 字符串数组
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题系统讲解 Python 在自然语言处理（NLP）领域的基础方法与实战应用，涵盖文本预处理（分词、去停用词）、词性标注、命名实体识别、关键词提取、情感分析，以及常用 NLP 库（NLTK、spaCy）的核心用法。通过真实文本案例，帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程，适用于内容分析、舆情监测与智能文本应用场景。
22
2026.01.27
在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变，以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销，利用平台社交电商红利实现盈利。
119
2026.01.26
在Edge浏览器中设置主页，请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”，点击“添加新页面”并输入网址。若要使用主页按钮，需在“外观”设置中开启“显示主页按钮”并设定网址。
48
2026.01.26
苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行，可用于查询序列号（SN）对应的保修状态、激活日期及技术支持服务。此外，查找丢失设备请使用 iCloud.com/find，购买信息与物流可访问 Apple (中国大陆) 订单状态页面。
184
2026.01.26
NPD（Narcissistic Personality Disorder）即自恋型人格障碍，是一种心理健康问题，特点是极度夸大自我重要性、需要过度赞美与关注，同时极度缺乏共情能力，背后常掩藏着低自尊和不安全感，影响人际关系、工作和生活，通常在青少年时期开始显现，需由专业人士诊断。
7
2026.01.26
关闭Windows安全中心（Windows Defender）可通过系统设置暂时关闭，或使用组策略/注册表永久关闭。最简单的方法是：进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置，将实时保护等选项关闭。
7
2026.01.26
铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务，并强调官方渠道唯一性与信息安全。
178
2026.01.26
以工资薪金所得为例，应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元，专项扣除 1000 元，专项附加扣除 2000 元，当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元，对应税率为 3%，速算扣除数为 0，则当月应纳税额为 2000×3% = 60 元。
39
2026.01.26
oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时，可以随时将这些存储在云端的数据快速恢复到手机中。
172
2026.01.26
热门下载
精品课程
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号