今天心情大好,再发一篇最进前端实现的相册模仿功能。

这个相册是在一个网站的案例展示页面上实现的,没单独写出来,没时间,重用性也很差,以后有时间了再单独提取出来,

写这个玩意前,我在网上找了一些案例,但是一看代码都比较傻眼,固不想去研究,所以自己写了.....

下面是实现这个功能的截图

如果你是一个前端,这个功能对你来说除了逻辑复杂点,其他的可能实现起都比较简单,我不是做前端的,所以前端HTML这块遇到了一些问题。下面我会将我遇到的这些问题的解决方法分享出来。

首先说下:postion这个属性 以前我要用一般是用这个属性值一般是absolute和relative相对定位和绝对定位,但是相对用得都比较少,如果你是前端你应该知道,多数用的是Margin-.....Padding-......,这次用到了postion的fixed:他被用在我的弹出层背景层里面,当然用absolute和relative也可以,但是实践证明fixed在弹出层遮罩中使用更加精准合理。为什么我知道勒,这个是由于中途出现的一个BUG后被我发现的..关于BUG我这里就不谈了,反正你记弹出层背景定位时用POSTION的fixed就对了。(下面是css样式表代码:)

/*相册背景层 PhoneTeamrTransperantDiv这个是DIV,他的父节点是BODY,在不使用时你需要设置他的display:none*/

.PhoneTeamrTransperantDiv{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 () {

$(".transparentDiv").click(function (e) {

var el = e.srcElement || e.target;

var transparentBackViewArray = $(".transparentDiv");

var AppTitleArray = $(".appDetialTitleClass");

for (var i = 0; i < transparentBackViewArray.length; i++) {

var focusTransparentBackView = transparentBackViewArray[i];

if (el == focusTransparentBackView) {

var pointTitle = AppTitleArray[i];//根据title去查询需要加载的说明图片

//transParentLawyer全屏幕遮蔽层

$("#masterDiv").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 alertBackDivWidth = 555;

var alertBackDivHeight = 525;

var alertBackStyleMarginLeft = (addPxWidth - alertBackDivWidth) / 2;

var alertBackStyleMarginTop = (addPxHeight - alertBackDivHeight) / 2;

var createLeft = alertBackStyleMarginLeft.toString() + 'px';

var createTop = alertBackStyleMarginTop.toString() + 'px';

var ProjectName = "捉大毛APP";

var combindTable = "

" + ProjectName + "

"

combindTable += "

for (var i = 0; i < 5; i++) {

combindTable += "

";

}

//overFlow-y:scroll;overFlow-x:scroll;

combindTable += '

'

$(".transParentLawyer").after('

' + 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 alertBackDivWidth = 320;

var alertBackDivHeight = 560;

var alertBackStyleMarginLeft = (addPxWidth - alertBackDivWidth) / 2;

var alertBackStyleMarginTop = (addPxHeight - alertBackDivHeight) / 2;

var createLeft = alertBackStyleMarginLeft.toString() + 'px';

var createTop = alertBackStyleMarginTop.toString() + 'px';

$("#masterDiv").after('

//src="+'"'+ imagePath +'"'+"/> 呵呵拼接的弹出图片

$(".PhoneTeamrTransperantDiv").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);

})

})

});

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

html相册自动翻页轮播,jquery+html仿翻页相册功能相关推荐

  1. Vue 单/多图片(可全屏预览)翻页轮播组件

    支持单/多张图翻页轮播 可全屏预览 自定义图片宽高 自定义无图提示语 自带图片加载loading 可将源码根据实际需求改造. 没安装 Element-UI 的可以将图片标签换为原生 效果图 全屏预览 ...

  2. ajax实现翻书效果,jquery实现的翻书效果

    插件描述:利用jquery插件实现的类似图书翻书效果功能 Booklet是一个基于jQuery库的实现网页上翻书动画效果的插件,在jBooklet页面上可以写任何支持html的内容,而软件设置相当简单 ...

  3. php 自动加载 知乎,wordpress复制文章自动添加版权和原文链接 仿知乎版权功能

    为了找这段功能的代码,试过很多文章的效果,但存在各种问题,比如复制内容不全,或者干脆就是粘贴上一次的内容,为了增加更好的体验,WordPress本来就是一个讲究分享体验的事,不让复制显然有违博客的分享 ...

  4. jquery 实现智能炫酷的翻页相册效果

    jquery 实现智能炫酷的翻页相册效果 巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离 ​1. [代码]jquer ...

  5. 12款经典图片轮播jquery插件

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  6. Android 旋转木马轮播,jQuery旋转木马式幻灯片轮播特效

    本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下 特点 响应式--适应任何视窗的宽度 混合内容 不需要CSS ...

  7. [原型设计]Axure制作首页轮播图片切换效果

    1.新建Axure PR文件,取名"Axure制作首页轮播图片切换效果" 2.获取素材,进入36Kr官网主页,获取轮播图片素材. 获取素材 3.拖拽动态面板控件Dynamic Pa ...

  8. 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置

    jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...

  9. 路飞学城项目之首页轮播图定时更新、课程页面前端及课程表分析

    文章目录 1.首页轮播图定时更新(使用celery) 2.课程页面前端 3.课程表分析 3.1.课程表相关模型(实战课为例) 3.2.课程表数据录入 3.3.课程分类接口 3.3.课程分类前端展示(对 ...

最新文章

  1. ps如何把自己的图与样机结合_激光整平机厂家如何给自己一个定位?
  2. P300脑机接口及数据集处理
  3. 使用tomcat的jndi方式连接mysql的字符编码设置
  4. 家校无忧接入云信,教师家长即时沟通
  5. 发送不同类型的ActivityFeed
  6. github上传的项目代码语言类型修改
  7. linux c 获取网卡状态(UP or DOWN)
  8. nyoj138 哈希的简单应用(查找)
  9. iapp如何导入本地源码,iapp导入源码使用教程
  10. 阿里巴巴的安全能力究竟是什么水平?
  11. HDD Regenerator V2.0绿色中文注册版-(令硬盘起死回生)_-Chaz-_新浪博客
  12. 欢聚时代java面试面经_面试经历—广州YY(欢聚时代) | 学步园
  13. 科学计算机统计说明书,科学计算机带哪些功能_科学计算机怎么用_科学计算机使用方法...
  14. 影响计算机速度的有哪些配件,影响电脑上网速度的重要因素有哪些?
  15. 仿qq聊天程序设计之借鉴
  16. 中国科学院院士徐宗本:人工智能的基石是数学
  17. cocos2d-x-3.3-023-仿微信飞机大战-总体分析和建模
  18. PayPal设置收款习惯设定
  19. surfaceflinger原理讲解
  20. 混合A*算法(Hybrid A*)

热门文章

  1. 河北经贸大学计算机科学题库,2017年河北经贸大学计算机应用技术807数据结构考研导师圈点必考题汇编...
  2. VIVO校招提前批算法工程师笔试题目 2019/6/4
  3. python 全栈开发,Day3(数据类型,str切片,str常用操作方法,for循环)
  4. 微信支付宝二维码图片批量改名工具
  5. 某计算机屏幕的分辨率,计算机屏幕分辨率[Illustration]
  6. 中国汽车品牌口碑榜之:--2013年第3季度广州小型车综合口碑排名
  7. vue 简介 el 挂载点 data 数据
  8. python制作自动按键精灵_python,PyAutoGUI,自动操作鼠标键盘,类似按键精灵
  9. Unreal UFUNCTION函数宏标记
  10. 人脑将变成真正的“电脑”,你愿意接受这样的世界吗?