这是一款Mocean滑动模态的插件,应用在多列表展示的时候,鼠标悬停在列表上会有放大的效果,鼠标点击弹出的效果也有8种之多,颜色和效果是可以自己设置的。
页面开始引入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;
};
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791