使用做瀑布流，图片重叠
我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法。
1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。
加载代码:
<script src="
"></script><script src="
"></script>
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改。
2,页面代码
<div id="masonry" class="container-fluid"> <div class="box"><img src="
"></div> <div class="box"><img src="
"></div> <div class="box"><img src="
"></div> <div class="box"><img src="
"></div> <div class="box"><img src="
"></div> ...</div>
解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的 <div> 标签里,然后把他们又使用带有 #masonry ID 的 <div> 里面,一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。
3,样式代码
.container-fluid { padding: 20px; }.box { margin-bottom: 20px; float: left; width: 220px; } .box img { max-width: 100%}
解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。
4,在页面中启用瀑布流形式的脚本代码
$(function() { var $container = $('#masonry'); $(function() { $({ itemSelector: '.box', gutter: 20, isAnimated: true, }); });});<br>
解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的 <div> 标签,在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么,这里就是带有 .box 类的 <div> 标签,在itemSelector : '.box', 这行代码中定义。
gutter: 20, 这行代码定义了内容块之间的距离是 20 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。
我的一个笨方法:
$(function() { var $objbox = $("#masonry"); var gutter = 25; var centerFunc, $top0; $(function() { $({ itemSelector: "#masonry > .box", gutter: gutter, isAnimated: true }); centerFunc = function() { $top0 = $("[style*='top: 0']"); $("left", ($() - ($() * $ + gutter * ($ - 1))) / 2).parent().css("overflow", "hidden"); }; centerFunc(); }); var tur = true; $(window).resize(function() { if (tur) { setTimeout(function() { tur = true; centerFunc(); }, 1000); tur = false; } });});
HTML/CSS里怎样让四个大小一样的图片重叠在一起？
重叠可以用定位和层级z-index实现,随着div移动,不知道什么效果。jQuery可以实现鼠标上的效果
两个背景图 重叠在一起 就是把鼠标移到上面或者离开会渐变切换两张背景图 用jquery怎么写啊 怎么布局啊
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ThreeDoor</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: 0;
vertical-align: baseline;
}
body {
overflow: hidden;
}
div {
height: 500px;
text-align: center;
line-height: 500px;
margin: auto;
cursor: pointer;
border: 1px solid black;
top: 0px;
font-size: 100px;
color: red;
}
{
width: 300px;
background-color: blue;
}
, {
position: absolute;
display: none;
}
{
float: left;
background-color: orange;
}
{
float: left;
background-color: yellow;
}
</style>
<script type="text/javascript" src="jquery-1.8.0."></script>
<script type="text/javascript">
$ (function ()
{
var doms = init ();
var center = doms[1], left = doms[0], right = doms[2];
var width = ();
(function ()
{
().stop ().animate (
{
width : width + "px"
}, "slow");
().stop ().animate (
{
width : width + "px"
}, "slow");
}, function ()
{
().animate (
{
width : "0px"
}, "slow", function ()
{
();
});
().animate (
{
width : "0px"
}, "slow", function ()
{
();
});
});
});
$(window).resize (function ()
{
init ();
});
var init = function ()
{
var sw = , sh = ;
var left = $ ("").height(sh + "px"),
center = $ ("").height(sh + "px"),
right = $ ("").height(sh + "px");
(sw / 3 + "px");
var w = ("offsetLeft");
var width = sw / 3;
("right", width + w + "px");
("left", width + w + "px");
return [left, center, right];
}
</script>
</head>
<body>
<div class="left">福</div>
<div class="center">禄</div>
<div class="right">寿</div>
</body>
</html>
