Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	text-align:center;
	background-color:rgb(66,90,125);
}
.fl {
	left:10px;
	bottom:10px;
	transition:all 0.3s;
}
.fr {
	right:10px;
	bottom:10px;
	transition:all 0.3s;
}
h1 {
	color:white;
	text-transform:capitalize;
	margin-top:5%;
}
#content {
	width:800px;
	height:450px;
	margin:auto;
	position:relative;
	margin-top:5%;
	overflow:hidden;
}
.imgbox {
	width:800px;
	height:450px;
	position:absolute;
	overflow:hidden;
	background-color:red;
}
.imgbox >p {
	text-transform:capitalize;
	color:white;
	position:absolute;
	font-weight:100;
	user-select:none;
}
.imgbox>img {
	width:800px;
	height:450px;
	user-select:none;
}
.imgbox:nth-child(3) {
	width:400px;
}
#btn {
	position:absolute;
	z-index:999;
	width:50px;
	height:50px;
	background-color:salmon;
	border-radius:50%;
	text-align:center;
	left:375px;
	top:200px;
	cursor:pointer;
	user-select:none;
	color:white;
	line-height:50px;
	font-size:20px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js实现简易图片拖拽显示效果图片对比效果(原创)

更新时间:2020-11-17 10:30:25

0