简单的百叶窗功能

喜欢ヅ旅行 2022-05-28 06:55 163阅读 0赞

一开始让图片如下显示：

![70][]

点击一个图片时，被点击的图片显示80%，其他的都显示20%，如下：

![70 1][]

![70 2][]

代码:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.mainbox{
    				width: 500px;
    				height: 300px;
    				background-color: #999999;
    				position: absolute;
    				overflow: hidden;        /*超出的部分隐藏*/
    				
    				
    				/*四个方向为0  在margin：auto 可以让百叶窗居中*/
    				/*ps: 我也不是很懂 直接记住的*/
    				top: 0px;
    				left: 0px;
    				right: 0px;
    				bottom: 0px;
    				margin:  auto;
    				
    				
    			}
    			.imgbox{
    				width: 33.33%;
    				height: 100%;
    				float: left;
    				transition: all 2s;      /*每个图片以2s的时间出现，不是直接出来的*/
    			}
    			.mainbox:hover .imgbox{
    				width: 10%;                 /*被点击时图片所有显示为10%*/
    			}
    			.mainbox .imgbox:hover{         /*被点击时 点击的图片为80%*/
    				width: 80%;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="mainbox">
    			<div class="imgbox">
    				<img src="img/01.jpg" />
    			</div>
    			<div class="imgbox">
    				<img src="img/02.jpg" />
    			</div>
    			<div class="imgbox">
    				<img src="img/03.jpg" />
    			</div>
    		</div>
    	</body>
    </html>

[70]: /images/20220528/3f5603c0396b4bd19fb3507952b41131.png
[70 1]: /images/20220528/988a4ed70aed473fb2a2d932ea48c061.png
[70 2]: /images/20220528/71e01b9b6f884b85b9b15e8681dd35b3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关简单的java打印功能

【简单的　［javascript］　打印当前页面数据】／／打印预览－－－－可选项弹出框 function dayin()\{ var url='···

偏执的太偏执、/ 2023年10月16日 23:23/ 0 赞/ 12 阅读

相关登录功能的简单实现

1. 功能描述输入用户名、密码、验证码进行登录（[关于验证码的实现点这里][Link 1]）如果用户名和密码输入有误，跳转到登录页面，并提示:用户名或密码错误

我会带着你远行/ 2023年07月08日 05:55/ 0 赞/ 36 阅读

相关百叶窗效果 html+css

![在这里插入图片描述][20201222143415410.gif] <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年12月29日 11:28/ 0 赞/ 169 阅读

相关 165.百叶窗特效

效果 (源码网盘地址在最后) ![73cc696bbf6f8ef10f2abad44c158516.gif][] 源码 index.html <!DOC

「爱情、让人受尽委屈。」/ 2022年10月08日 05:39/ 0 赞/ 142 阅读

相关简单的文字搜索功能

import java.util.ArrayList; import java.util.Collections; import java.util.H

今天药忘吃喽~/ 2022年06月14日 08:44/ 0 赞/ 233 阅读

相关简单的百叶窗功能

一开始让图片如下显示： ![70][] 点击一个图片时，被点击的图片显示80%，其他的都显示20%，如下： ![70 1][] ![70 2][] 代码:

喜欢ヅ旅行/ 2022年05月28日 06:55/ 0 赞/ 164 阅读

相关百叶窗

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

Love The Way You Lie/ 2022年05月23日 09:57/ 0 赞/ 145 阅读

相关百叶窗特效

开发工具与关键技术：Adobe Dreamweaver CC 2017 CSS jQuert 作者：廖亚星撰写时间：2019年2月20日下面我们来做百叶窗特效

本是古典何须时尚/ 2022年03月18日 13:24/ 0 赞/ 425 阅读

相关 C++实现简单的ping功能

一代码 include <stdio.h> include <stdlib.h> include <string.h> include <e

青旅半醒/ 2021年09月19日 04:10/ 0 赞/ 708 阅读

相关 css实现图片百叶窗效果

作品很翻车啊： ![20200506135237186.gif][] 用css实现了一款百叶窗效果，但是不知道图片不能完全显出来，有谁知道怎样使大的图片自适应小窗口吗，太难

我就是我/ 2021年07月26日 12:52/ 0 赞/ 458 阅读