最新公告
  • 欢迎您光临尘梦网,我们提供建站技术教学,帮助用户实现从技能提升到技能应用的能力闭环。立即加入我们
  • PbootCMS使用技巧教程(四) – 全宽触发式地图

    先说明一下效果:

    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*}是直接调用的文章内容,在后台编辑器直接插入百度地图即可。

    然后,在地图下面添加了一层遮罩和提示语。

    二、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');
    
    })

    说明:

    这是功能实现的关键,但也是比较简单基础的。

    首先,.shade(遮罩层)点击的时候,给遮罩层添加样式.out,而.out就是我们在CSS中设置的点击后的样式。

    然后,鼠标移出.map时,移出遮罩层的.out样式,也就是恢复地图不可使用。

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

    尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    尘梦网 » PbootCMS使用技巧教程(四) – 全宽触发式地图

    常见问题FAQ

    尘梦网是什么?
    尘梦网(itwork.ren)是互联网综合学习平台。尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    本站课程是否为1对1教学?
    本站为录播课程,可直接寻找对应课程观看,不定时会有直播课
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    免费下载或者会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供部分资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

    发表评论

    • 24350会员总数(位)
    • 367资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 238稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情