郑先生
郑先生
  • 发布:2016-10-26 18:04
  • 更新:2016-10-26 18:04
  • 阅读:3521

【分享】图片预览增加标题 及 父子web下全屏

分类:MUI
  1. 图片全屏预览加了个标题 ,父子页面全屏用的是通知父页面显示遮罩的方法(有更好的办法可以留言),有需要的可以看一下,在原先的基础上做了些改动,css和js放在了附件里,改动的地方可以在js里搜索关键字zrh
    标题效果:
  2. 简单讲一下改动的地方吧,有漏掉的地方请谅解,
  • 使用方法是在img标签里增加data-content="照片标题",  
    
  •  css里增加了个样式
    
.mui-preview-footer .mui-preview-footerContent {  
	display: block;  
	line-height: 25px;  
	color: #fff;  
	text-align: center;  
	margin: 15px auto 4;  
	  
	background-color: rgba(0, 0, 0, 0.4);  
	  
	font-size: 16px;  
}
  • .mui-preview-footer里的height改到20px;其它还有没有自己对比哈。  
    
  •  js里代码第3行里有个mui-preview-footer mui-hidden的class,去掉了mui-hidden  
    
  •  13行加了个标签<span class="mui-preview-footerContent"></span>  
    
  •  其余的改动自己搜索zrh看吧  
    
  •  325行和353行那几行代码是显示和关闭遮罩的。父页面的代码是
    
var flag = false;  
var mask = mui.createMask(callback);  
function callback(){  
	return flag;  
}  
window.addEventListener('showMask',function(event){  
	mask.show();//显示遮罩  
	  
});  
window.addEventListener('closeMask',function(event){  
	flag = true ;  
	mask.close();  
	flag = false ;  
});

就这么多吧,有问题留言。

6 关注 分享
低调哥 Trust 赵梦欢 androidjdx fwrong Yizhiyu

要回复文章请先登录注册

Yizhiyu

Yizhiyu

感谢,正在做这个东西看了一上午js没改出来
2018-05-28 16:03
k***@msn.com

k***@msn.com

mark
2018-03-08 04:18
liuzhenghua

liuzhenghua

没有效果。看不到标题啊
2017-08-27 13:07
fwrong

fwrong

回复 郑先生 :
恩 一开始钻牛角尖了,后来自己写了个轮播
2017-07-13 14:46
郑先生

郑先生 (作者)

回复 fwrong :
你可以试试加载后触发点击事件mui.trigger(btn,'tap');mui文档里有。
另外,这种效果直接用图片轮播+css做成预览那样的页面效果不就可以了吗,没必要用图片预览插件了吧。
2017-07-11 16:59
fwrong

fwrong

您好,我现在想从新闻主页点击进去之后请求完图片数据就直接启动图片预览,请问有没有办法呢?就像今日头条有些纯图片预览那种效果
2017-07-07 10:05
1***@qq.com

1***@qq.com

刚需,感谢了
2017-06-16 12:56
1065677808

1065677808

找了好久,终于找到了,非常感谢
2017-04-10 23:52