8种Mocean滑动模态-悬停放大及点击弹出

来源:https://www.sucaihuo.com/js/1959.html 2017-05-17 18:55浏览(1092) 收藏

这是一款Mocean滑动模态的插件,应用在多列表展示的时候,鼠标悬停在列表上会有放大的效果,鼠标点击弹出的效果也有8种之多,颜色和效果是可以自己设置的。
8种Mocean滑动模态-悬停放大及点击弹出
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源: 25 下载资源 下载积分: 30 积分

页面开始引入css样式和jquery库:

<link type="text/css" rel="stylesheet" href="css/mocean.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

body部分设置列表内容和滑动切入的弹窗内容,剩下的就交给javascript吧:

<div class="btn-group">
 <button class="mocean-modal-button" data-mocean-type="slide-in-top">顶部滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-right">右侧滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-bottom">底部滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-left">左侧滑入</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-top" data-mocean-out-type="slide-out-bottom">从顶到底</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-bottom" data-mocean-out-type="slide-out-top">从底到顶</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-left" data-mocean-out-type="slide-out-right">从左到右</button>
 <button class="mocean-modal-button" data-mocean-type="slide-in-right" data-mocean-out-type="slide-out-left">从右到左</button>
</div>

<div class="mocean-wrap mocean-modal-wrap" id="mocean-modal-wrap">
 <div class="mocean-content mocean-modal" id="mocean-modal">
  <h3>Mocean 滑动模态</h3>
  <div class="mocean-modal-content">
    <p>鼠标悬停有放到的效果,鼠标点击每一个按钮,会有8种不同的滑入效果,分别从多个不同的位置。</p>
    <button class="mocean-modal-close">关闭</button>
  </div>
 </div>
</div>

最后的javascript用来调用Mocean模块,并设置好触发显示和隐藏相应元素,部分代码如下:

Mocean = function() {
  this.init();
};

// Current version.
Mocean.version = '0.0.1';

// Initialization method
Mocean.prototype.init = function() {
  this.buttonPressedEvent = buttonPressedEvent;

  //event trigger after animation/transition end.
  this.transitionEndEventName = Modernizr ? transitionEndEventNames[Modernizr.prefixed('transition')] : getTransitionEndEventNames();
  this.animationEndEventName  = Modernizr ? animationEndEventNames[Modernizr.prefixed('animation')] : getAnimationEndEventNames();
  this.transitionAnimationEndEvent = this.animationEndEventName + ' ' + this.transitionEndEventName;
};

Mocean.prototype.getViewportHeight = function() {

  var docElement = document.documentElement,
      client     = docElement['clientHeight'],
      inner      = window['innerHeight'];

  if( client < inner )
    return inner;
  else
    return client;
};
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 5楼
    01-12 09:44
    忘***忆
    样式特效都挺好看的!
  • 头像 4楼
    05-18 12:48
    Y***e
    精仿唯品会全站购物模板_响应式购物模板1
  • 头像 3楼
    05-18 12:01
    舒***畅
    整体还是挺大气的呢。
  • 头像 板凳
    05-18 11:44
    j***r
    大气又漂亮!!
  • 头像 椅子
    05-18 11:16
    t***e
    界面和色彩都漂亮
  • 头像 沙发
    05-18 03:48
    e***o
    漂亮,,深夜点个赞
1 2