html Moncho Varela的钢笔。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Moncho Varela的钢笔。相关的知识，希望对你有一定的参考价值。
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #1B1A1A;
}
::-webkit-scrollbar-thumb {
background: #333;
}
html,body{
background: #1B1A1A;
font-family: 'Lato', sans-serif;
font-size:1em;
}
.likeGoogle-list{
position:relative;
display:inline-block;
*display:inline;
zoom:1;
width:16%;
height: 150px;
overflow: hidden;
}
.likeGoogle-list:before{
position: absolute;
bottom: 0;
left: -1000px;
margin: 0 auto;
padding: 0.25em;
content: attr(data-title);
color: #fdfdfd;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 0.8em;
background: #333;
width:100%;
transition:all 1s ease;
}
.likeGoogle-list:hover:before{
left: 0px;
transition:all 1s ease;
}
.likeGoogle-img{
max-width:100%;
width:100%;
cursor:pointer;
}
.likeGoogle-show {
color: #555;
text-align: center;
position: relative;
width: 99%;
float: left;
padding: 0;
display: none;
margin-bottom: 10px;
background: #333;
color: #fdfdfd;
margin-top: 10px;
padding: 0.5%;
}
.likeGoogle-show h3{
font-family: 'Lato', sans-serif;
font-weight: bold;
}
.likeGoogle-show{
font-family: 'Lato', sans-serif;
}
.likeGoogle-current-img {
max-width: 100%;
}
.likeGoogle-float{
float:left;
}
.likeGoogle-close {
opacity: 0.7;
cursor: pointer;
position: absolute;
top: 1em;
right: 2em;
color: #fdfdfd;
font-family: monospace;
}
.likeGoogle-close:hover{
opacity:1;
}
@media only screen and (min-width: 240px){
.likeGoogle-list{
width:48.5%;
height:70px;
}
.likeGoogle-close {
top:0;
right:0;
}
}
@media only screen and (min-width: 320px){
.likeGoogle-list{
width:49.5%;
height:100px;
}
.likeGoogle-close {
top:0;
right:0;
}
}
@media only screen and (min-width: 480px){
.likeGoogle-list{
width:49.5%;
height:150px;
}
.likeGoogle-close {
top:1em;
right:2em;
}
}
@media only screen and (min-width: 768px){
.likeGoogle-list{
width:33%;
}
}
@media only screen and (min-width: 1025px){
.likeGoogle-list{
width:24.7%;
}
}
(function () {
'use-strict';
$.fn.likeGoogle = function () {
var likeGoogle = $('<div class="likeGoogle-show"><h3></h3><p></p></div>'),
likeGoogleimg = $('<img src="" class="likeGoogle-current-img">'),
likeGoogleclose = $('<div class="likeGoogle-close">Close This</div>');
likeGoogle
.append(likeGoogleimg)
.append(likeGoogleclose);
return this.each(function () {
$('.likeGoogle-list').click(function () {
var currentimg = $(this).find('.likeGoogle-img'),
activeImg = $('.likeGoogle-current-img'),
imgData = currentimg.data('img'),
datatitle = $(this).data('title'),
datainfo = currentimg.data('info');
likeGoogle.find('h3').html(datatitle);
likeGoogle.find('p').html(datainfo);
likeGoogleimg.attr('src', imgData);
if (activeImg.css('opacity') >= 0){
activeImg.animate({
opacity: 1
}, 800);
}
if ($(this).next().hasClass('likeGoogle-show')){
likeGoogle.toggle();
}else{
likeGoogle.insertAfter(this).css('display', 'block');
}
$('html, body').animate({
scrollTop: likeGoogle.position().top
}, 'slow');
return false;
});
$('.likeGoogle').on('click', '.likeGoogle-close', function () {
$('.likeGoogle-current-img').animate({
opacity: 0
},200, function () {
$('.likeGoogle-show').slideUp('slow');
});
});
});
};
})(jQuery);
// Call likeGoogle
$(function() {
$('.likeGoogle').likeGoogle();
});likeaGoogle
-----------
Based on plugin http://toddmotto.com/labs/superbox/
Photos of unsplash.com
A [Pen](http://codepen.io/nakome/pen/qcomH) by [Moncho Varela](http://codepen.io/nakome) on [CodePen](http://codepen.io/).
[License](http://codepen.io/nakome/pen/qcomH/license).<!-- google fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<!-- you can use tumbs, more better -->
<section class="likeGoogle">
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title">
<img
src="http://bit.ly/1m7ZjzQ"
data-img="http://bit.ly/1m7ZjzQ"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 2">
<img
src="http://bit.ly/1jQWWPI"
data-img="http://bit.ly/1jQWWPI"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 3">
<img
src="http://bit.ly/1jQX1mA"
data-img="http://bit.ly/1jQX1mA"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 4">
<img
src="http://bit.ly/1jQWMrB"
data-img="http://bit.ly/1jQWMrB"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 5">
<img
src="http://bit.ly/1jQWu3Z"
data-img="http://bit.ly/1jQWu3Z"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 6">
<img
src="http://bit.ly/1m7ZlHK"
data-img="http://bit.ly/1m7ZlHK"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 7">
<img
src="http://bit.ly/1m7ZhI3"
data-img="http://bit.ly/1m7ZhI3"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 8" >
<img
src="http://bit.ly/1m7Zhb7"
data-img="http://bit.ly/1m7Zhb7"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 9" >
<img
src="http://bit.ly/1m7Zgny"
data-img="http://bit.ly/1m7Zgny"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 10" >
<img
src="http://bit.ly/1m7Z8V8"
data-img="http://bit.ly/1m7Z8V8"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 11" >
<img
src="http://bit.ly/1m7YlU0"
data-img="http://bit.ly/1m7YlU0"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 12" >
<img
src="http://bit.ly/1m7WnTR"
data-img="http://bit.ly/1m7WnTR"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 13" >
<img
src="http://bit.ly/1m7XyT4"
data-img="http://bit.ly/1m7XyT4"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 14" >
<img
src="http://bit.ly/1m7VgmS"
data-img="http://bit.ly/1m7VgmS"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- / image -->
<!-- image -->
<div class="likeGoogle-list" data-title="Example Title 15" >
<img
src="http://bit.ly/1m7UTZI"
data-img="http://bit.ly/1m7UTZI"
data-info="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, atque, itaque, nemo magni esse laboriosam dolorum voluptatibus omnis consequuntur eligendi fuga hic unde consequatur. Esse, dolore recusandae repudiandae id tempora!"
class="likeGoogle-img" title="Example Title">
</div>
<!-- image -->
<!-- preview -->
<div class="likeGoogle-float"></div>
<!-- /preview -->
</section>
以上是关于html Moncho Varela的钢笔。的主要内容，如果未能解决你的问题，请参考以下文章