模拟app上商品详情点击图片放大并且可以切换大图
主要使用swiper插件,这里使用各小技巧,就是用两个swiper容器,点击一个小图容器,去让大图容器展示出来
小图容器
<div class="q_banner"> <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-slide preview">
<a href="images/img_01.jpg"><img src="data:images/img_01.jpg" alt="" /></a> </div>
<div class="swiper-slide preview">
<a href="images/img_02.jpg"><img src="data:images/img_02.jpg" alt="" /></a> </div>
<div class="swiper-slide preview">
<a href="images/img_03.jpg"><img src="data:images/img_03.jpg" alt="" /></a>
</div> </div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
遮罩层
<div class="mask"></div>
大图容器
<div class="wrap_big">
<div class="swiper-container_big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="data:images/img_01.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="data:images/img_02.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="data:images/img_03.jpg" alt="" />
</div> </div> </div>
</div>
小图切换js
<!-- photo Swiper -->
<script>
var swiper = new Swiper('.q_banner .swiper-container', {
pagination: '.swiper-container .swiper-pagination',
paginationClickable: true });
</script>
点击小图展示大图并且切换js
$(function(){
$('.q_banner .swiper-slide').each(function(index){
$(this).click(function(){
$('.mask').show();
var thisIndex = index;
$('.wrap_big').show();
$('html,body').css('overflow','hidden');
var swiper = new Swiper('.wrap_big .swiper-container_big', {
paginationClickable: true,
initialSlide:thisIndex
});
});
});
$('.mask').click(function(){
$('.mask').hide();
$('.wrap_big').hide()
});
$('.wrap_big').each(function(index){
$(this).click(function(){
$('html,body').css('overflow','auto');
$(this).hide();
$('.mask').hide(); });
});
});
部分样式
.mask{ width: 100%; height: 100%; background: rgba(0,0,0,1); position:fixed; top:0; left: 0; z-index: 9998; display: none;}
.wrap_big{ width: 100%; position: fixed; left: 0; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); z-index: 9999; display: none; }
.swiper-container {width: 100%; }
.swiper-wrapper{ width: 100%;}
.swiper-slide { width: 100%; }
.swiper-pagination-bullet-active{ background: red;}
测下来整天效果还是很不错了,基本上手机都会支持!
美中不足的地方就是大图不能手动放大与缩放!
有好的处理办法的朋友可以留言告知如何如理,非常感谢
模拟app上商品详情点击图片放大并且可以切换大图的更多相关文章
- 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格
查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- layui点击图片放大-多图显示
layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...
- 检出商品详情中的图片并替换url
原有的批量导入是按照系统本身的功能导入商品,现在需要用接口将图片上传图片服务器 所以需要将批量导入的商品图片取出来,上传后替换掉原来的url (1)检出详情中的图片,用文件名做key private ...
- Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案
需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...
随机推荐
- Java-----instanceof、isInstance、isAssignableFrom
转载自:http://blog.csdn.net/hekewangzi/article/details/51956170
- java基础之 第一步 :jdk安装配置
Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.ora ...
- stack 集合栈计算机 (摘)
有一个专门为了集合运算而设计的“集合栈”计算机.该机器有一个初始为空的栈,并且支持以下操作:PUSH:空集“{}”入栈DUP:把当前栈顶元素复制一份后再入栈UNION:出栈两个集合,然后把两者的并集入 ...
- python学习笔记:python字符串
二.python字符串操作符 1. 对象标准类型操作符 Python对象的标准类型操作符一共就三种:对象值的比较.对象身份的比较.布尔类型.其中对象值的比较主要是大于.小于.不等于等的数学比较符:对象 ...
- css 兼容小三角
<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...
- jquery 鼠标右键事件、左键单击事件判定
$(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 retu ...
- microwindows Win32 API demo
初次使用microwindows,资料有限,我也是费了很多功夫才明白.所以记录下来,好帮助那些爱学习的童鞋,另外请大虾们多多指教. 什么是microwindows,什么作用,等背景介绍我就不多说了,因 ...
- [转]Linux下转换字符集(UTF8转换)
今天在Linux 下使用 Iconv 命令转换一个UTF8文件时,总是转换不成功.提示: iconv: 未知 0 处的非法输入序列 后来使用 man iconv 查看,还是没发现异常,因为命令格式都是 ...
- MYSQL 提取时间中的信息的 4 方法
方法 1. year(),month(),day() 方法 2. dayofweek(),dayofmonth(),dayofyear(); 方法 3. hour(),minute(),second( ...
- 无意发现vim里插入模式可以借助Alt键输入一些特殊字符
无意发现vim里插入模式可以借助Alt键输入一些特殊字符.如: Alt+w: ÷ Alt+:: » Alt+f : æ Alt+ . : ® Alt+ ? : ¯...