和谐图片浏览以及实现方法

Author: Satori Satori

Posted: 2018-02-11 22:33:02

Category: CSS Django HTML JavaScript 技术

Views: 2012 Comments: 0

## 一、开启关闭方法 在非文本框区域依次按键盘 **`左`** **`下`** **`右`** **`上`** 即可开启。开启后,再按同样按键退出。 ## 二、背景 这次的设计主要想法还是来自[忧郁的弟弟][1]网站的设计。他的设计方法是修改用户右键的点击来实现和谐模式的开启。然后和谐模式开启之后,鼠标的范围就会出现一个圈,和谐图片就只显示在圈内,然后通过移动鼠标来实现看图片的不同部分,然后再按鼠标即可退出。 ## 三、实现方法 这次的实现方法还是比较简单。首先后端传和谐图片相关的html代码,中间就包含和谐图片链接。具体实现方案还是按照Django的template tag方式实现,跟之前的背景图片相似。然后前端监听触发和谐模式开启按键,然后再监听用户鼠标移动事件来调整圈的位置以及圈内图片的位置。 ## 四、具体步骤 1. 后端返回和谐模块html 这个部分依然使用template tag实现,后端直接返回html代码。先调用系统接口获取和谐图片的个数以及种类,任意挑一个,把它的url塞到html里img的src中即可。这部分代码拷贝之前的,具体如下。 ``` @register.simple_tag def load_hidden_background(): image_show_count = 1 curdir = os.path.join(settings.MEDIA_ROOT, "background", "H") if os.path.exists(curdir): items = os.listdir(curdir) if len(items) >= image_show_count: selected = [items[i] for i in random.sample(range(len(items)), image_show_count)] urls = [settings.MEDIA_URL + "background/H/{}".format(x) for x in selected] return mark_safe(""" <div class="hidden-bg"> <div class="circle" style="background: url({}) no-repeat"></div> </div> """.format(*urls)) ``` 然后之后的template只需在中间加一个tag就行, ``` {% load_hidden_background %} ``` 这里还是聊一下返回的html,先有一个大的div叫hidden-bg,它填充整个页面,并置于页面最顶层,背景是灰色,目的是让之后的图片更醒目,初始状态不显示。hidden-div中嵌套新的div叫circle,这个就是圈,图片就在圈里面显示,图片显示方式是通过backgroud属性设置。圈通过border-radius使方块变圈。 同时附上这两个div的css。 ``` @media (min-width: 767px) { .hidden-bg { cursor: url(/static/mysite/images/mouse_none.cur), url(/static/mysite/images/mouse_none.cur), auto; } } .circle { width: 200px; height: 200px; position: fixed; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 0 7px 7px rgba(0,0,0,0.25), inset 0 0 40px 2px rgba(0,0,0,0.25); } .hidden-bg { position: fixed; width: 100%; height: 100%; max-width: 100%; max-height: 100%; left: 0px; top: 0px; display: none; z-index: 1000001; opacity: 1; background: rgba(0, 0, 0, 0.8); } ``` 2. 前端监听按键触发 这个部分和之前讲过的完全一样,绑定一个按键组合即可。 ``` key_listener.sequence_combo("left down right up", toggle_hidden_background, true); ``` 3. 前端处理鼠标移动 这个部分是核心部分。要明确鼠标移动后要干两件事情,第一个是把圈的位置改动,第二个是确定图片的偏移。 圈的位置怎么动呢,应该是鼠标在哪里,圈的圆心就应该在哪里,同时鼠标移动我们能获得当前鼠标的位置。由于块的固定定位的目标在左上角,因此整个块的左偏移`left`属性应该是圆心位置减去半径长度,同理上偏移`top`也是一样。 图片怎么偏移呢,物理上讲运动是相对的。我们应该考虑,鼠标往左动相当于图片往右动,同理鼠标往下动就是图片往上动。由于要模拟看图片的不同位置,因此鼠标移动后的位置和图片的位置应该是相反数。这样,图片也能移动到正确的位置。 圈移动的位置和图片移动的位置配合好之后,就真的模拟出以孔窥图的效果了。这部分的代码如下。 ``` function toggle_hidden_background() { if ($(".hidden-bg").is(":visible")) { $(".hidden-bg").hide(); $(".hidden-bg").unbind('mousemove'); } else { $(".hidden-bg").bind('mousemove' ,function(e) { $(".circle").css({'left': (e.clientX - 100) + 'px'}); $(".circle").css({'top': (e.clientY - 100) + 'px'}); $(".circle").css({'background-position': -(e.clientX - 100) + 'px ' + -(e.clientY - 100) + 'px'}); }); $(".hidden-bg").show(); } } ``` 不过弟弟的网站实现和我不太一样,具体的逻辑没有摸透,它图片的偏移和圈的偏移还不完全是相反数,有一定偏差,不过我这种方案效果还可以,也就不深究了。 [1]: https://mygalgame.com

LOGIN TO LEAVE A COMMENT