一款简易的瀑布流图片文字显示特效,// iPad and iPod detection// OffCanvass等,推荐个大家很不错的插件啊!
首先引用文件
<link rel="stylesheet" href="css/animate.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Salvattore -->
<link rel="stylesheet" href="css/salvattore.css">
<!-- Theme Style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- Salvattore -->
<script src="js/salvattore.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
// Click outside of offcanvass// iPad and iPod detection// Magnific Popup// OffCanvass等等的用法。
// iPad and iPod detection
var isiPad = function(){
return (navigator.platform.indexOf("iPad") != -1);
};
var isiPhone = function(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
};
// OffCanvass
var offCanvass = function() {
$('body').on('click', '.js-fh5co-menu-btn, .js-fh5co-offcanvass-close', function(){
$('#fh5co-offcanvass').toggleClass('fh5co-awake');
});
};
// Click outside of offcanvass
var mobileMenuOutsideClick = function() {
$(document).click(function (e) {
var container = $("#fh5co-offcanvass, .js-fh5co-menu-btn");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('#fh5co-offcanvass').hasClass('fh5co-awake') ) {
$('#fh5co-offcanvass').removeClass('fh5co-awake');
}
}
});
$(window).scroll(function(){
if ( $(window).scrollTop() > 500 ) {
if ( $('#fh5co-offcanvass').hasClass('fh5co-awake') ) {
$('#fh5co-offcanvass').removeClass('fh5co-awake');
}
}
});
};
// Magnific Popup
var magnifPopup = function() {
$('.image-popup').magnificPopup({
type: 'image',
removalDelay: 300,
mainClass: 'mfp-with-zoom',
titleSrc: 'title',
gallery:{
enabled:true
},
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
opener: function(openerElement) {
// openerElement is the element on which popup was initialized, in this case its <a> tag
// you don't need to add "opener" option if this code matches your needs, it's defailt one.
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
};
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791