saber 酱的抱枕

Fly me to the moon

10/5
2014
学习

jq控制元素的平滑移动

说到平滑似乎就离不开定时器...这次用的是元素的left值来移动的,本意是想做个模仿桌宠移动的东东,在网页上左右跑。最后似乎也差不多了

只有刚开始的时候隐藏在左侧窗口范围外,造成一个出场效果。之后就左右来回走了。

用到了一个水平翻转图片的css:transform:scaleX(-1);

有时候很奇怪的,它的运动范围似乎受到了干扰,例如我把它放在本站的底部模板,它不会回到左侧了,始终和左侧保持了一段距离,向右侧时候则又一头扎到屏幕外了,后来给它设置了负的左边距才好了。但是加在其他模板里各种出问题,不会动或者报错,晕死。刚开始用的绝对定位,加在底部于是只有在页面底部才能看到,后来改成了fixed固定在屏幕底部,这才差不多了。另外似乎只有切换到这个页面的时候它会运行,切换出去一会儿回来会发现它刚才一直停在那里,你点回来了她才开始继续走。求破

实际使用中,如果图像其实只是位于图片中央,四周还有不少空白区域,那么左右间距可能需要调整才能达到较好的效果,或者裁剪图片也行。

下面是我添加在foot.php里面的,做了点修改,算是存个备份

jq控制元素的平滑移动