模拟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. ...
随机推荐
- B - 敌兵布阵 线段树的点
B - 敌兵布阵 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Descriptio ...
- M端页面-绝对定位布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- python之函数的使用
备注:本篇文章主要讲一讲函数及集合的一些常用用法: 一.首先先看下,集合(set): 集合的特点:无序.不重复(这点跟字典有点像) <1>,在需要访问集合的时候,由于集合本身是无序的,所以 ...
- docker 使用Data Volume 共享文件
Adding a data volume You can add a data volume to a container using the -v flag with the docker run ...
- emacs使用指南
上大学的时候使用过几个简单的命令,用上windows后除了dos很少用命令行处理问题.现在MBP在手不用用emacs多可惜啊. 我上午搜索了下资料,都说emacs是神器,但是神不神看个人啦.这东西也不 ...
- windows窗口分析,父窗口,子窗口,所有者窗口
(本文尝试通过一些简单的实验,来分析Windows的窗口机制,并对微软的设计理由进行一定的猜测,需要读者具备C++.Windows编程及MFC经验,还得有一定动手能力.文中可能出现一些术语不统一的现象 ...
- vmware配置安装JDK、Tomcat以及项目部署
1.安装JDK1.7 JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 安 ...
- 原生Javascript 省市区下拉列表插件
每个电商网站中,都会有收件地址管理模块,用户进行地址操作时,最好不要用户手工进行填写地址. 常见的地址管理界面: 实现插件:PCASClass.js 插件下载地址:http://pan.baidu.c ...
- 奇妙的算法之LCS妙解
LCS算法妙解 LCS问题简述:最长公共子序列 一个数列 S,如果分别是两个或多个已知数列的子序列,且是所有符合此条件序列中最长的,则S 称为已知序列的最长公共子序列. LCS问题的分支:最长公共子串 ...
- Hadoop CLI MiniCluster
CLI MiniCluster Use the climonicluster, users can simply start and stop a single-node hadoop cluster ...