通过确定鼠标的位置决定modal层进入显示的方向.

所属分类:UI,其他-悬停,动画效果

 34415  429  查看评论 (7)
分享到微信朋友圈
X
通过确定鼠标的位置决定modal层进入显示的方向. ie兼容11
### jQuery插件jquery.boxhovermodal.js

	该插件是在鼠标滑过box的时候,通过鼠标进入的方向,使modal层从box上下左右不同的方向进入。

#### HTML部分

	一个class为box-hover-modal的块内部包含一个class为box-hover-modal-m的绝对定位块

```html
<div class="box-hover-modal">
	<div class="box-hover-modal-con">内容</div>
	<div class="box-hover-modal-m">遮盖层</div>
</div>
```

#### CSS部分
	
	外面的块需要有position属性,内部块使用绝对定位方式,开始隐藏

```css
.box-hover-modal {
	position: relative;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 200px;
	height: 200px;
	background: #aaa;
	overflow: hidden;
}
.box-hover-modal-con {
	width: 100%;
	height: 100%;
}
.box-hover-modal-m {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: crimson;
}
```

### JAVASCRIPT部分

	使用封装对象方式开发,一个操作对象,一个可选参数

```javascript
//操作对象为.box-hover-modal,可选参数是用来确定modal层的
$(".box-hover-modal").boxhovermodal(".box-hover-modal-m");
```
相关插件-悬停,动画效果

css3.0按钮触控悬停效果集

css3.0按钮触控悬停效果集
  悬停
 38866  465

常用鼠标经过遮罩层动画效果

常用鼠标经过遮罩层动画效果,点击弹窗动画效果
  悬停
 33887  381

鼠标移入展开(原创)

适用于鼠标移入产品详情展示
  悬停
 25298  361

悬停显示图片

超炫酷鼠标悬停显示图片
  悬停
 27304  378

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    偶然 0
    2017/11/27 10:10:40

    火狐什么效果都没有!!

    回复
    木有发 0
    2017/3/24 11:25:51
    传进去的 父盒li    里面覆盖层动的时候为什么里面的img也在动啊   回复
    汉斯 0
    2016/2/18 14:02:34
    和前面一个sHover插件是类似的
        汉斯0
        2016/2/18 14:02:01
        FF不支持,没有那个插件兼容性好,sHover支持IE5以上
    回复
    0
    2015/12/2 16:12:37

    很不错,简单好用

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复