动画详情插件使用文档

第1步:安装启用(此插件相对来说比较麻烦一点酌情使用)

第2步:需要在/wp-content/themes/b2/Modules/Templates/Single.php 增加此代码'.icydm_Animation_post_mobile().',如图

第3步:在/wp-content/themes/b2/Assets/fontend/single.js文件,随便位置增加下列内容

var postDetails = new Vue({

el:'.mSlider-main',

data:{},

methods:{

closeSlider(){

document.querySelector('.mSlider-inner').transform='translate3d(0,100%,0)'

document.querySelector('.mSlider-inner').style.webkitTransform = "translate3d(0,100%,0)"

document.querySelector('.mSlider-mask').style.opacity= "0"

setTimeout(() => {

document.querySelector('.mSlider-main').style.display='none'

}, 300);

}

}

})

第4步:在/wp-content/themes/b2/Assets/fontend/single.js文件(如图所示增加到相应的位置)

第一段代码

var lileft = this.$refs.videoListIn.childNodes[index].offsetLeft;

var liwidtih =this.$refs.videoListIn.childNodes[index].offsetWidth / 1;

var tabwidtih = this.$refs.videoListIn.offsetWidth / 2;

setTimeout(() => {

this.$nextTick(() => {

this.$refs.videoListIn.scrollLeft = lileft - tabwidtih + liwidtih;

});

}, 30);

第二段代码

openSlider(){

document.querySelector('.mSlider-main').style.display='block'

setTimeout(() => {

document.querySelector('.mSlider-inner').style.transform='translate3d(0,0,0)'

document.querySelector('.mSlider-inner').style.webkitTransform = "translate3d(0,0,0)"

document.querySelector('.mSlider-mask').style.opacity= ".5"

}, 30);

},

如下图:

注意两边的符合一并添加

声明:
1.本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。请发送邮件至:chensi2024@foxmail.com,我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明
4.如下载链接失效,请在当前页留言或私信管理员,24小时必处理结束!
5.本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
6.本站提供的资源仅限用于学习交流和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除。

给TA打赏
共{{data.count}}人
人已打赏
技术教程

WordPress绑定多个域名的教程

2020-8-9 16:37:57

技术教程

无水印影视海报获取

2020-8-13 11:05:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索