古建设计网站,信息管理与信息系统专业,重庆森林经典台词,商城简介实现的功能是页面中的图片单击#xff0c;在灯箱中显示#xff0c;单击按钮上下切换#xff0c;单击灯箱退出展示#xff0c;效果如下GIF展示。
实现步骤还是老样子#xff0c;三方面工作一是CSS、二是JavaSxcript#xff0c;三是HTML#xff0c;下面开始一步一步实现在灯箱中显示单击按钮上下切换单击灯箱退出展示效果如下GIF展示。
实现步骤还是老样子三方面工作一是CSS、二是JavaSxcript三是HTML下面开始一步一步实现最后可以下载完整源码。
一、CSS部分这部分主要是定义样式也就是我们看到的外表背景黑色60%透明上下切换按钮、鼠标样式、载入图片等待等。主要代码
[myth-imageactive]{cursor: pointer;cursor: zoom-in;} .myth-image{top: 0;left: 0;right: 0;bottom: 0;z-index: 66;position: fixed;user-select: none;animation: fade-in .3s both;-webkit-animation: fade-in .3s both;}.myth-image.loading{ cursor: wait }.myth-image.remove:before{animation: fade-off .3s both; -webkit-animation: fade-off .3s both;} .myth-image:before{top: 0;left: 0;right: 0;bottom: 0;content: ;position: absolute;background: rgba(0, 0, 0, .6);} .myth-image .myth-prev, .myth-image .myth-next{top: 0;bottom: 0;width: 10%;height: 5em;margin: auto;max-width: 5em;cursor: pointer;position: absolute;transition: opacity .3s, transform .3s;}.myth-image .myth-prev:hover{ transform: translateX(-.5em) }.myth-image .myth-next:hover{ transform: translateX(.5em) }.myth-image .myth-prev{left: 0;background: center/60% no-repeat url(data:image/svgxml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIj48cGF0aCBkPSJNMzI0LjIxMTUxNyA1MTEuODA1NjMxIDc4Ny44ODk1OTQgNzMuMDgyNTgzYzE2LjE5NDIyLTE2LjYzMDM2NSAxNi4xOTQyMi00My45NzQ3MDQgMC02MC42MDUwNjgtMTYuMTk0MjItMTYuNjMwMzY1LTQyLjQ5NTYwNy0xNi42MzAzNjUtNTguNjEzOTc2IDBMMjM1Ljc1MDExMyA0NzkuMzYwMzAyYy04LjY0NzAzMSA4Ljk2OTM5OC0xMi4zNDQ3NzUgMjAuOTM0OTE3LTExLjcxOTAwMyAzMi40NDUzMjktMC42NDQ3MzUgMTEuOTA4NjMgMy4wNzE5NzIgMjMuODc0MTQ5IDExLjcxOTAwMyAzMi44MjQ1ODVsNDkzLjUwNjU0MiA0NjYuODgyNzg4YzE2LjExODM2OSAxNi42NDkzMjcgNDIuNDM4NzE4IDE2LjY0OTMyNyA1OC42MTM5NzYgMCAxNi4xOTQyMi0xNy4wODU0NzEgMTYuMTk0MjItNDMuOTc0NzA0IDAtNjAuNjA1MDY4TDMyNC4yMTE1MTcgNTExLjgwNTYzMSIPC9wYXRoPjwvc3ZnPg);}.myth-image .myth-next{right: 0;background: center/60% no-repeat url(data:image/svgxml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC45KSIPHBhdGggZD0iTTEzNi43LDEwMGwtOTAuNiw4NS44Yy0zLjIsMy4yLTMuMiw4LjUsMCwxMS44YzMuMiwzLjMsOC4zLDMuMywxMS40LDBsOTYuNC05MS4yYzEuNy0xLjcsMi40LTQuMSwyLjMtNi40YzAuMS0yLjItMC42LTQuNi0yLjMtNi4zTDU3LjYsMi40Yy0zLjEtMy4yLTguMy0zLjItMTEuNCwwcy0zLjIsOC42LDAsMTEuOEwxMzYuNywxMDAiLz48L3N2Zz4NCg);} .myth-image .ended{opacity: .5;cursor: no-drop;} .myth-image .myth-ball{top: 1em;right: 1em;width: 2em;height: 2em;opacity: 0;border-radius: 66%; position: absolute; pointer-events: none;transition: opacity .3s;border: .5em #fff solid;border-left-color: #3498db;border-left-color: var(--primary); animation: rotate .5s linear infinite paused;-webkit-animation: rotate .5s linear infinite paused;}.myth-image.loading .myth-ball{opacity: 1;animation-play-state: running;} .myth-image img, .myth-image video{top: 0;left: 0;right: 0;bottom: 0;margin: auto;max-width: 80%;max-height: 90%;cursor: zoom-out;position: absolute;transition: transform .3s;animation: fade-small-large .3s backwards;-webkit-animation: fade-small-large .3s backwards;}.myth-image video{cursor: auto;} .myth-image img:not([src]), .myth-image video:not([src]){display: none;} .myth-image.remove img, .myth-image.remove video, .myth-image.remove .myth-prev, .myth-image.remove .myth-next{animation: fade-large-small .3s both;-webkit-animation: fade-large-small .3s both;} .myth-image img[src$.jpg], .myth-image video{box-shadow: 0 5px 15px rgba(0, 0, 0, .5);}二、JavaScript部分这部分主要实现图片单击展开灯箱实现切换等一些列展示效果。具体代码如下这部分代码要放在我们以前写的Myth.js对应位置。
image:function(){var that this;var image_box {img: that.create(img),prev: that.create(div, {class: myth-prev}),next: that.create(div, {class: myth-next}),ball: that.create(div, {class: myth-ball})};image_box.wrap that.create(div, {class: myth-image, child: [image_box.prev, image_box.img, image_box.next, image_box.ball]});image_box.wrap.onclick function (e) {image_box.wrap.classList.add(remove);setTimeout(function () {try{document.body.removeChild(image_box.wrap);image_box.wrap.classList.remove(remove);}catch (err){}}, 300);};image_box.img.onload function () {image_box.wrap.classList.remove(loading);};// 设置按钮image_box.prev.onclick function (e) {e.stopPropagation();if(current - 1 0) current--;actions.set();};image_box.next.onclick function (e) {e.stopPropagation();if(current 1 that.dom.length) current;actions.set();};var current 0; var actions {ori: function (obj, num) {obj.setAttribute(myth-image, active); obj.onclick function () {current num;actions.set();document.body.appendChild(image_box.wrap);};},set: function () {var img that.dom[current];current 0 ? image_box.prev.classList.add(ended) : image_box.prev.classList.remove(ended);current that.length - 1 ? image_box.next.classList.add(ended) : image_box.next.classList.remove(ended); if(img.getAttribute(myth-original) ! null){image_box.img.src img.getAttribute(myth-original);}else if(img.src){image_box.img.src img.src;}else{console.error(This image has no valid tag!);}image_box.wrap.classList.add(loading);}};this.each(function(item){if(item.src ){actions.ori(item, item.index);}});}三、HTML部分该部分就是如何使用第一、二部分的代码。
div classmythBox midpimg srcimg/1.png titleone myth-imageactive classmyth-picbox myth-originalimg/1.png/ppimg srcimg/2.png titleone myth-imageactive classmyth-picbox myth-originalimg/2.png/ppimg srcimg/3.png titleone myth-imageactive classmyth-picbox myth-originalimg/3.png/ppimg srcimg/4.png titleone myth-imageactive classmyth-picbox myth-originalimg/4.png/p/div script typetext/javascriptmyth(.myth-picbox).image(); /script这部分代码分为两个部分一是页面图片展示二是JS调用实现灯箱效果。 源代码下载请单击
