和谐图片浏览以及实现方法
Author:
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