84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
微信公众号文章的图片都能够点击放大,包括像朋友圈下面购物,那个京东页面的轮播图也是可以实现点击放大的,再点击就变回原样,从Web的角度怎么在页面上添加这项功能?需要哪些技术?
认证0级讲师
不说插件,就说说原生实现
vue组件
css3·transform
css3·transition
views.vue:点击后图片放大的那个组件
算了我就不写es6了(其实是不会),就用es5写吧,如果是在es6下开发应该知道怎么改,如果是在普通html开发的话,直接复制script下的代码到js文件中就行了。。。
script
<style> .m-img-view{ /*样式自己写吧,不是很难*/ } .u-mask{ /*背景全屏全黑,应该知道怎么写吧。。。*/ } .u-img{ /*中间那块图片部分*/ } </style> <template id="img_view"> <p class="m-img-view" @click="eClick"> <p class="u-mask"></p> <p class="u-img"> <img :src="src"/> </p> </p> </template> <script> /* es6... export default { props:['src'], methods:{ eClick(){ this.$emit('click') } } } */ Vue.component('img-views',{ template:'#img_view', props:['src'], methods:{ eClick:function(){ this.$emit('clickit'); } } }); </script>
然后是主界面的。。。
<style> ts-enter-active, ts-leave-active{ transition:all .5s; } ts-enter, ts-leave-active{ transform: translate(100%,0); } </style> <!--假设这个是那个轮播图的img标签中的一个。。--> <img src="abcdefg.png" @click="eImgClick($event)"/> <!--假设这里放的是views的组件--> <transition name="ts"> <img-views v-if="isImgViewsShow" :src="imgViewsSrc" @clickit="eImgViewClick"></img-views> </transition> <script> new Vue({ /*....*/ data:{ //... isImgViewsShow:0, imgViewsSrc:'' //... }, methods:{ eImgClick:function(e){ this.isImgViewsShow=1; this.imgViewsSrc=e.currentTarget.src }, eImgViewClick:function(){ this.isImgViewsShow=0; } } }) </script>
给你要放大的图片增加一个类。单击这个类,去把所有有类的图片提出来做轮播
大家有遇到比较优雅实现的栗子吗
真不想自己写,可以import一个swipe的插件来实现这个功能
不说插件,就说说原生实现
要用到的技术点:
vue组件
css3·transform
css3·transition
实现:
views.vue:点击后图片放大的那个组件
然后是主界面的。。。
给你要放大的图片增加一个类。单击这个类,去把所有有类的图片提出来做轮播
大家有遇到比较优雅实现的栗子吗
真不想自己写,可以import一个swipe的插件来实现这个功能