• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

JS判断鼠标进入或离开容器的方向做出特殊hover效果

无意中在uemo的一个子站点看到一个很动感的hover效果,经过简单分析,想必是通过JS判断鼠标进入方向来实现这个hover效果,使父容器中的子容器通过判断鼠标进入方向,从而使子容器从相同的方向“进入”到父容器中并且从鼠标离开的方向“离开”父容器。下面这一段js代码来源于网络,如果想深入了解代码的意义请跳转

http://sentsin.com/web/112.html

DEMO:

http://www.im050.com/im050/memory/demo/jquery-direction.html

而在津泓橱柜官方网站的制作过程中,在其产品展示页面也使用了这样的效果

具体参见:http://www.jhcg.net/home/product/

HTML代码部分:

<style>
body {margin: 50px;}
#wrap {width: 100px; height: 100px; background: #000}
#result 

CSS3 图片鼠标滑过渐变为灰色

看了老赵茶馆的特色图像鼠标滑过效果,于是自己也模仿了一下,不要见怪。
更改你自己的CSS选择器以达到你想控制图片所属的范围。

.article-img img{
	width: 100%;
	display: block;
	height: 100%;
	/* 上述设置是为了使图片自适应容器大小