<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/demo5.css">
</head>
<body>
<div class="wrap">
<div class="content">
<div id="content" style="position: relative;">
<div class="masonry">urhgirfeg</div>
<div class="masonry masonry-red">354354654756</div>
</div>
</div>
<div class="mian">
<div class="main-content">
<a href=""><img src="images/6.jpg" ><span>45546546</span></a>
<a href=""><img src="images/6.jpg" ><span>6dgvfg</span></a>
<a href=""><img src="images/6.jpg" ><span>fgfgfhgh</span></a>
<a href=""><img src="images/6.jpg" ><span>345435</span></a>
<a href=""><img src="images/6.jpg" ><span>898989898</span></a>
<a href=""><img src="images/6.jpg" ><span>0-098797</span></a>
</div>
<div class="loading" style="display:none;"><img src="images/loading.gif">正在努力加载图片</div>
<div class="more textC cursor" style="display:none;">查看更多图片</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(window).resize(function(){
$(‘.content‘).width($(‘.content‘).parent().width())
})
$(‘.content‘).width($(‘.content‘).parent().width())
$(window).scroll(function(){
var H=$(document).scrollTop();
console.log(H)
if(H>0){
$(‘.content‘).addClass(‘fix‘);
}else{
$(‘.content‘).removeClass(‘fix‘);
}
})
var a=0;
var topScroll=function(h){//向下滚动 正值
//现在a 的值为1
if(a==0){
return
}
if($(‘#content‘).is(":animated")){
return;
}
a--;//第二次执行a的值为0
$(‘#content‘).animate({
top:h
},500)
}
var downScroll=function(h){//向上滚动
console.log(b)
if(a==b-1){
return
}
if($(‘#content‘).is(":animated")){
return;
}
a++;//a 的值为1;
$(‘#content‘).animate({
top:h
},500)
}
function scrollFun(event){
b=$(‘#content .masonry‘).length;
console.log(b)
var e=event || window.event;
if(e.wheelDelta){//IE Chrome opera
var div = document.getElementById("content");
if(e.wheelDelta>0){//鼠标向上滑动
new topScroll(‘+=50px‘)
}
if(e.wheelDelta<0){//鼠标向下滑动
new downScroll(‘-=50px‘)
}
}
if(e.detail){//firefox
if(e.detail<0){//向上滑动
new topScroll(‘+=50px‘)
}
if(e.detail>0){//向下滑动
new downScroll(‘-=50px‘)
}
}
}
window.onmousewheel=document.onmousewheel=scrollFun;
if (document.addEventListener) {
document.addEventListener("DOMMouseScroll", scrollFun, false)
}
function getPos(obj){
var l=0;//水平距离
var t=0;//垂直距离
while(obj){
l+=obj.offsetLeft;//距离左边的距离
t+=obj.offsetTop;//距离顶部的距离
obj=obj.offsetParent;
} return {left:l,top:t};
}
function findDir(oDiv,ev){
var oEvent=ev||event;//判断兼容
var scrollT=document.body.scrollTop || document.documentElement.scrollTop;
var scrollL=document.body.scrollLeft || document.documentElement.scrollLeft;
var y=oDiv.offsetHeight/2+getPos(oDiv).top-(oEvent.clientY+scrollT);
var x=oDiv.offsetWidth/2+getPos(oDiv).left-(oEvent.clientX+scrollL);
return Math.round((Math.atan2(y,x)*180/Math.PI+180)/90)%4;//判断鼠标的上下滑动还是左右滑动 上 右 下 左
}
var div=document.getElementsByClassName(‘main-content‘)[0]
var item=document.getElementsByTagName(‘a‘);
for(var i=0;i<item.length;i++){
item[i].onmouseover=function(e){
var oson=this.children[1];
var form=e || event;
var oEvent=e.fromElement || e.relatedTarget;
var oImg=this.children[0];
if(this.contains(oEvent))return false;
console.log(findDir(this, e))
switch(findDir(this, e)){
case 0://向左
oson.style.left=199+‘px‘;
oson.style.bottom=0;
break;
case 1://向上
oson.style.left=0;
oson.style.bottom=-27+"px";
break;
case 2://向右
oson.style.left=-199+‘px‘;
oson.style.bottom=0;
break;
case 3://向下
oson.style.bottom=-27+‘px‘;
oson.style.left=0;
break;
}
$(oson).animate({left: 0, bottom: 0}, 500);
$(oImg).animate({‘width‘: ‘220px‘, ‘height‘: ‘162px‘, ‘left‘: ‘-15px‘, ‘top‘: ‘-11px‘}, 300);
}
item[i].onmouseout=function(ev){
var e=ev || event
var ofrom=e.toElement || e.relatedTarget;
var oson=this.children[1];
var oImg=this.children[0];
if(this.contains(ofrom))return false;
$(oson).animate({left: 0, bottom: "-27px"}, 500);
$(oImg).animate({‘width‘: ‘199px‘, ‘height‘: ‘144px‘, ‘left‘: ‘0‘, ‘top‘: ‘0‘}, 300);
}
}
</script>
</body>
</html>
