PbootCMS使用技巧教程(四) - 全宽触发式地图
PbootCMS使用技巧教程(四) - 全宽触发式地图
DistantMemory
DistantMemory
先表示一下吧成效:

001.png


如图如图:在游戏最新电子地形图全宽的时刻,本来界面设置滑动到相应编译程序,鼠标键在游戏最新电子地形图上时采取滑轮滑动的操作会勾起游戏最新电子地形图的图片缩放,而不容易采取挑选器界面设置的上上下下滑动,大家体会就有问题。那么想要做其中一个勾起式游戏最新电子地形图来加快大家体会。


工作方法:

鼠标点击地图任意一处,激活地图,可以对地图进行缩放,拖拽。鼠标移出地图区域,禁用地图,地图将不可操作。


原理图:并不是很很容易,就会在最新地图上边加层透明图片的遮罩建议层,当键盘滚轮键盘键盘点击时隐形该层并使其键盘键盘点击击穿,键盘滚轮移到时找回该层需先。


密切相关技能:也一概常容易基础条件的HTML+CSS+jQuery。


保证 环节:一、HTML码
<div class="map">
    <div>{*content:content*}</div>
    <div class="uk-flex uk-flex-center uk-flex-middle uk-text-center tm-transition shade"><span>点击使用地图</span></div>
</div>
注:写样例的之时 采用了uikit眼镜骨架,class款式中的的部分款式名私自参考uikit眼镜骨架操作手册的研究吧,主要是的功效也就是使表示语质量保持竖直居中。解释:首选,{*content:content*}是单独读取的软文项目,在手机端编器单独复制360搜卫星图便可。后来,在地形图那么生成一堆层遮罩和表明语。


二、CSS编号
.map { position: relative; }
.map .shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); cursor: pointer; }
.map .shade.out { opacity: 0; pointer-events: none; }
.map .shade span { display: block; padding: 0.08rem; background: rgba(0,0,0,0.5); border-radius: 0.02rem; letter-spacing: 0.02rem; font-size: 0.14rem; color: #EEE; }
代表:最表皮.map相比市场导航定位,遮罩层.shade必然市场导航定位,网络覆盖在上方,并且控制在时代背景色和公开度。.shade.out则是无线方向键点击量后将遮罩层成了透明图片的,加个上无线方向键穿透力。.shade span则布置了表明语的式样。


三、jQuery源代码
jQuery('.map .shade').on('click', function(){

    jQuery(this).addClass('out');

})

jQuery('.map').on('mouseleave', function(){

    jQuery(this).find('.shade').removeClass('out');

})
情况说明:这个是系统保证的最为关键的,但也是更加简易基础条件的。1,.shade(遮罩层)超链接的同时,给遮罩层“添加样板.out,而.out就是说大发快3在CSS中软件设置的超链接后的样板。其次,键盘踢出.map时,踢出遮罩层的.out图样,也就恢复原状地理位置不宜动用。


总结:非常简单实用的一个功能,代码都是比较基础的,写代码的关键是思考。