<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<style>
article{
height: 100px;
}
article:nth-of-type(n+4):hover{
cursor: pointer;
}
article:nth-of-type(n+4):hover:after{
content: "click to hide article";
font-style: italic;
color: blue;
font-size: 20px;
}
</style>
<body>
<article>Pretent this is a preview(1) foe an article on a blog</article>
<article>Pretent this is a preview(2) foe an article on a blog</article>
<article>Pretent this is a preview(3) foe an article on a blog</article>
<article>Pretent this is a preview(4) foe an article on a blog</article>
<article>Pretent this is a preview(5) foe an article on a blog</article>
<article>Pretent this is a preview(6) foe an article on a blog</article>
<button id="articles">Click to preview additional articles</button>
<script>
$(function(){
$("body").css("height",$(document).height()+1)
.find("article").each(function(i,el){
$(el).not(":nth-last-of-type(n+4)").hide()
.filter(":nth-of-type(4)").on("click.y",function(){
$("body").animate({
scrollTop:"0px"
},1000)
});
});
$(document).on("scroll.article",{
"scrolled":false
},function (e){
if(!e.data.scrolled){
var el=$("article:nth-of-type(n+4)");
$(el).show(1000);
e.data.scrolled=true;
};
if(e.data.scrolled){
$(el).on("click",function(e){
$(e.target).hide(1000);
});
};
if($("article:nth-of-type(n+4)").css("display")==="none"){
e.data.scrolled=false;
};
return false;
});
$("#articles").on("click",$(document),function(e){
$(e.target).trigger("scroll.article").scroll()
})
});
</script>
</body>
</html>标签：function,blog,foe,123,article,preview,type From： https://www.cnblogs.com/Iriswpp/p/17448738.html