css动画keyframes的使用，简单说就是先定义一个keyframes，然后在css的anmition里面去调用此动画。 圆角和阴影不适用于ie6。 绝对定位后的位置获取主要靠目标高度，outheight(),height是不包括padding与Border的，innerheight不包括border。目标左上角位置为其.position().top or left。即类似于x轴与y轴。 document.height为屏幕高度，$(window).scrollTop为滑块顶端距离屏幕顶端高度。 max和min用apply(null,数组)可以快速得到。 jq实现动画方法：直接初始css后.animate()设置参数即可。 有个别图片进行加载时位置不正常，目前暂时未查出是什么原因。大部分图片加载正常。 <!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < metahttp-equiv = " X-UA-Compatible" content = " ie=edge" > < title> </ title> < scriptsrc = " /js/jquery-1.12.4.js" > </ script> < style>
html,body {
padding : 0;
margin : 0px
}
a {
text-decoration : none;
color : grey
}
a:hover {
animation : picfade 3s ease-in-out 1;
}
img {
display : inline-block;
width : 100%;
border-radius : 8px;
}
@keyframes picfade{
from {
opacity : 1;
}
15% {
opacity : 0.5;
}
to {
opacity : 1;
}
}
img:hover {
animation : picfade 1s ease-in-out;
}
div {
text-align : center;
margin : auto;
}
h3 {
text-align : center;
font-size : 30px;
height : 50px;
margin : 0;
padding : 5px
}
.app {
position : relative;
}
.box {
width : 300px;
height : auto;
overflow : hidden;
padding : 10px;
border-radius : 8px;
background-color : beige;
border : 0.5px solid gray;
float : left;
}
.pic {
width : 100%;
border-radius : 8px;
}
.title {
line-height : 50px;
overflow : hidden;
height : 50px;
}
</ style> </ head> < body> < h3> < ahref = " /test.html" > </ a> </ h3> < divid = " app" > < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/1.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/2.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/3.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/4.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/5.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/6.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/7.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/8.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/9.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> < divclass = " box" > < divclass = " pic" > < imgsrc = " /pic/10.jpg" alt = " x" > </ div> < divclass = " title" > < ahref = " #" > </ a> </ div> </ div> </ div> < script>
$ ( window) . load ( function ( ) {
let receivepic= [
{ 'src' : '1.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '2.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '3.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '4.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '5.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '6.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '7.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '8.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '9.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '10.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '11.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '12.jpg' , 'titile' : 'this is description' } ,
{ 'src' : '13.jpg' , 'titile' : 'this is description' } ,
] ;
function PBL ( wrap, box) {
let $wrap= $ ( '#' + wrap) ;
let $boxes= $wrap. find ( $ ( '.' + box) ) ;
let boxWidth= $boxes. eq ( 0 ) . outerWidth ( ) ;
let screenWidth= $ ( window) . width ( ) ;
let column= Math. floor ( screenWidth/ boxWidth) ;
column> 3 ? column= 3 : column;
$wrap. width ( boxWidth* column) ;
let li= [ ] ;
for ( let i= 0 ; i< $boxes. length; i++ ) {
if ( i< column) {
li[ i] = $boxes. eq ( i) . position ( ) . top+ $boxes. eq ( i) . outerHeight ( ) ;
} else {
var minH= Math. min. apply ( null , li) ;
var columnMin= getIndex ( minH, li) ;
placeBox ( $boxes. eq ( i) , minH,
Math. floor ( $boxes. eq ( columnMin) . position ( ) . left) , i) ;
li[ columnMin] = minH+ $boxes. eq ( i) . outerHeight ( ) ;
}
}
}
function getIndex ( minH, li) {
for ( let i= 0 ; i< li. length; i++ ) {
if ( li[ i] === minH) {
return i;
}
}
}
let startnum= 0 ;
function placeBox ( $box, top, left, index) {
if ( startnum>= index) return ;
$box. css ( {
'position' : 'absolute' ,
'top' : top,
'left' : left,
'opacity' : '0'
} ) ;
$box. animate ( {
'opacity' : '1' ,
} , 1000 ) ;
startnum= index;
}
PBL ( 'app' , 'box' ) ;
$ ( document) . scroll ( function ( ) {
if ( checkisBottom ( 'app' , 'box' ) ) {
let $wrap= $ ( '#app' ) ;
for ( item of receivepic) {
var str= '<div class="box">\
<div class="pic"><img src="/pic/' + item. src+ '" alt="x"></div>\
<div class="title"><a href="#">' + item. titile+ '</a></div>\
</div>' ;
$wrap. append ( str) ;
}
PBL ( 'app' , 'box' ) ;
}
} )
function checkisBottom ( wrap, box) {
let documentHeight= $ ( window) . height ( ) ;
let scrollHeight= $ ( window) . scrollTop ( ) ;
return documentHeight+ scrollHeight>= getLastH ( wrap, box) ? true : false ;
}
function getLastH ( wrap, box) {
let $wrap= $ ( '#' + wrap) ;
let $boxes= $wrap. find ( '.' + box) ;
return $boxes. last ( ) . position ( ) . top+ $boxes. last ( ) . outerHeight ( ) ;
}
} )
</ script> </ body> </ html>
2842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
