【入门级别】案例:HTML5、 CSS3 JS (jQuery)实现布局常用瀑布流(两栏,三栏自适应)和类京东放大镜功能。
有需要欢迎大家下载源码观看~下载链接
三连关注后私信也可以拿源码哦~
移步【进阶】案例:飞翔的小鸟游戏(可以记录最高分和难度选择)
实现效果
放大镜鼠标移入自动放大,有边界越界处理不会超出指定图片,鼠标移出取消放大
瀑布流浏览器大小改变,二三栏自适应。
效果图
代码展示
//放大镜
#small {
width: 250px;
height: 250px;
border: 2px solid black;
position: relative;
}
#small img {
width: 100%;
}
#bigger {
margin-left: 20px;
width: 500px;
height: 500px;
border: 2px solid black;
position: relative;
overflow: hidden;
display: none;
}
#bigger img {
position: absolute;
}
#box div {
float: left;
}
span {
/* span宽/小div宽=大div宽/大图宽 */
/* span宽 = 600/800 * 300 */
width: 156.25px;
height: 156.25px;
background-color: blueviolet;
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
display: none;
}
<script type="text/javascript">
$("#small").hover(function () {
$("span").show();
$("#bigger").show();
}, function () {
$("span").hide();
$("#bigger").hide();
})
$("#small").mousemove(function (ev) {
ev = ev || event;
var x = ev.pageX - $(this).offset().left;
var y = ev.pageY - $(this).offset().top;
x -= $("span").outerWidth() / 2;
y -= $("span").outerHeight() / 2;
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > 95) {
x = 95;
}
if (y > 95) {
y = 95;
}
$("span").css({
left: x,
top: y
})
//让大图随鼠标移动
//计算出大图移动的距离
// 水平方向移动的距离的倍数p:
// 小div宽/x = 大图宽/X
// p = 大图宽/小div宽 = 800/300=2.667
$("#bigger img").css({
left: -3.2 * x,
top: -3.2 * y
})
})
</script>
瀑布流
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#box {
width: 95%;
margin: 0 auto;
}
#box ul {
width: 100%;
list-style: none;
position: relative;
}
#box ul li {
width: 22%;
margin: 3%;
padding: 2%;
position: absolute;
}
#box ul li img {
width: 100%;
}
</style>
</head>
<body>
<div id="box">
<ul>
<!-- <img src="img/02.jpg" alt=""> -->
</ul>
</div>
</body>
<script type="text/javascript" src="jquery3.5.1.min.js"></script>
<script type="text/javascript">
var ul = $("#box ul");
var n = 20;
for (var i = 1; i <= 20; i++) {
ul.append(`<li><img src=${'img/' + (i < 10 ? ('0' + i) : i) + '.jpg'}></li>`)
//获取图片
window.onload = function () {
//保证图片加载完成
n--;
if (n = 1) {
waterFull();
}
}
}
function waterFull() {
var lis = $("#box ul li");//拿出li
var liWidth = lis.eq(0).outerWidth(true);//获取宽度 包括m p b width
var colHighArr = [];//创建高度数组
var cols;
if ($(window).innerWidth() < 700) {//宽度小于700用两列布局
cols = 2;
lis.css("width", "39%");
}
else {
cols = 3;
lis.css("width", "22%");
}
for (var i = 0; i < lis.length; i++) {
var li = lis.eq(i);
if (i < cols) {
li.css({
left: i * liWidth,//第一排的位置
top: 0
})
colHighArr[i] = li.outerHeight(true);//获取三个高度
}
else {
//先找最小列高对应的列号(0或1或2)
var minHighColIndex = 0;
if (colHighArr[0] > colHighArr[1]) {//比较高度
minHighColIndex = 1;
}
if (cols == 3) {
if (colHighArr[minHighColIndex] > colHighArr[2]) {
minHighColIndex = 2;
}
}
有需要欢迎大家下载源码观看~下载链接
三连关注后私信也可以拿源码哦~
移步【进阶】案例:飞翔的小鸟游戏(可以记录最高分和难度选择)