制作小游戏_摇一摇游戏_h5游戏平台_微信公众号游戏_手机游戏制作
当前位置:建站首页 > 新闻资讯 > 常见问题 >

晋州市网站建站-手机安卓版 js图片查看插件(附源

发表日期:2021-05-02 14:18文章编辑:jianzhan浏览次数: 标签:    

--------

晋州市网站建站

------- 在新的手机上新项目中有要求对多张照片开展访问,因此自己也是在在网上找了许多都沒有找到适合的编码,后来在某网站上找了一个改变成自身的比较好用,并且沒有某网站那样启用JSON,这样觉得就通用性,并且很便捷,能够对多个地区开展启用即。底部附源码免费下载

一、实际效果图下图所示:

变大访问图內容 关键div 源码以下:

 !-- 变大访问图刚开始 -- 
 div >
 需要包括的照片器皿DIV和总体DIV包括全部显示信息內容,也有值得留意的是,每张照片都有一个主要参数z-index,值是从1刚开始往上递加。弹窗显示信息照片时全部网页页面的內容都被掩藏了这样网页页面就不会翻转。我刚开始有尝试,因此印象十分深,大伙儿能够试下,款式能够改动,可是记得跟slide.js中ID\style\class要同歩这样就不会错误。

源码以下:

 div >
 详细源码以下:

 !DOCTYPE HTML 
 html 
 head 
 meta http-equiv= Content-Type content= text/html; charset=utf-8 
 meta name= viewport content= width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no / 
 title 手机上版html5照片变大访问方式 /title 
 style 
html{padding:0px;margin:0px auto;-webkit-text-size-adjust:none;}
body{background:#FFF;padding:0px;margin:0px auto;font-size:15px;color:#444;font-family:Helvetica,Microsoft YaHei,Microsoft JhengHei;}
a{color:#444;text-decoration:none;}
ol,ul,li,dl,dd,dt{padding:0;margin:0;list-style:none;}
form,p{padding:0;margin:0;}
i,em{font-style:normal;}
textarea {resize:none}
img{border:none;}
.spanclass{display:none;}
.body {margin:0 auto;overflow:hidden;}

.body img {max-width:60%;border: none;} .m-dt{width: 100%;height: 100%;overflow: hidden;display: none;} .m-dt .swipe-wrap,.m-dt .swipe-con{height: 100%;width: 100%;text-align: center;} .m-dt .pic{display:block;width: 100%;height: 100%;color: #fff;} .m-dt .pic:before,.m-dt a:before{display: inline-block;content: height: 100%;width: 0;vertical-align: middle;} .m-dt img{display:inline-block;max-width: 100%;max-height: 100%;width:auto;height:auto;vertical-align: middle;background:none;} .m-dt .slideBtm,.m-dt .slideTp{width:100%;height: 40px;line-height:40px;position: fixed;left:0;background:rgba(55,64,83,.5);overflow:hidden;} .m-dt .slideBtm{bottom: 0;} .m-dt .slideTp{top:0;} .m-dt .slideTp i{-webkit-transform:translate(0px, 0px) translateZ(0px);display:inline-block;width:30px;height:40px;float:left;} .m-dt .slideTp i::before{position: absolute;left: 10px;top: 50%;margin-top: -4px;content: width: 8px;height: 8px;border-width: 2px;overflow: hidden;border-color: transparent transparent #fff #fff;border-style: solid;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} .m-dt .swipe-num,.m-dt .swipe-cmtCount{color: #fff;font-size: 14px;} .m-dt .swipe-num{font-family:Arial, Helvetica, sans-serif;margin:0 30px;display:block;text-align:center;} .m-dt .swipe-cmtCount{float:right;width:30px;} .m-dt .swipe-cmtCount::after{position: absolute;right: 10px;top:50%;margin-top:-7px;content: width: 8px;height: 8px;border-width: 2px;overflow: hidden;border-color: transparent transparent #fff #fff;border-style: solid;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);} /style /head body div > DEMO源文档免费下载:源码免费下载 登陆密码: sgdr

上面说到此软件可反复运用,可新建多个slide.js可是记得slide.js里边第二行包括照片的器皿要改成你所对应的ID。假如大伙儿对我这个软件有甚么观点能够线上留言或QQ联络我。

(完)

大伙儿有甚么难题或技术性上的念头能够在此与大伙儿共享,还可以添加前端开发喜好者QQ群()一起学习培训发展:【幸凡前端开发技术性沟通交流群】如需转载请注明出处:art_detail.aspx?id=741【手机上版 js照片访问软件(附源码免费下载)】幸凡学习培训网 0 ---------

晋州市网站建站

------------
返回列表
相关新闻