js实现倾斜图片点击弹出上下切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现倾斜图片点击弹出上下切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body,p{
    	margin: 0;
    }
    ul{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    img{
    	border: none;
    	vertical-align: middle;
    }
    body{
    	background: #000000;
    	color: #fff;
    
    	overflow-x: hidden;	/* 旋转后会出现横向的滚动条 */
    }
    
    
    
    
    
    /*works*/
    #wrap{margin-top: 150px}
    #wrap ul{
    	width: 1050px;
    	margin: 0 auto;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    
    	transform-style: preserve-3d;	/* 自己变成3d的空间是为了图片像弹簧一下能出来，加不加景深都可以，加了会视觉冲击感强烈一点 */
    	transform: translateY(-15%) rotateX(45deg) rotateZ(45deg);	/* 先往右转45deg，斜着(wtud3)了，再往后一把推倒（旋转Z轴45deg） */
    }
    #wrap li{
    	width: 330px;
    	height: 230px;
    	margin-bottom: 30px;
    	position: relative;
    	background: rgba(255,255,255,0.5);	/* 给一个灰色的底色 */
    	cursor: pointer;
    }
    #wrap li img,#wrap li div{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	left: 0;
    	top: 0;
    
    	transition: 0.3s;	/* 加上运动效果 */
    }
    #wrap li img{
    	z-index: 2;	/* 把图片放到最上面 */
    }
    #wrap li div:nth-of-type(1){
    	background: #ac5cf5;
    	opacity: 0.5;
    }
    #wrap li div:nth-of-type(2){
    	background: #5db4eb;
    	opacity: 0.5;
    }
    #wrap li div:nth-of-type(3){
    	background: #5debb4;
    	opacity: 0.5;
    }
    
    /* 以下为弹簧效果 */
    #wrap li:hover{
    	box-shadow: 0 0 50px #fff;
    }
    #wrap li:hover img:nth-of-type(1){
    	transform: translateZ(100px);
    }
    #wrap li:hover div:nth-of-type(1){
    	transform: translateZ(75px);
    }
    #wrap li:hover div:nth-of-type(2){
    	transform: translateZ(50px);
    }
    #wrap li:hover div:nth-of-type(3){
    	transform: translateZ(25px);
    }
    
    
    #shadowBox{
    	width: 100%;
    	height: 2000px;
    	background: rgba(0,0,0,0.5);
    	position: absolute;
    	left: 0;
    	top: 0;
    	
    	opacity: 0;
    	transition: 0.5s;
    	display: none;	/* 不设置为none的话，它会档住图片 */
    }
    #showPic{
    	width: 600px;
    	height: 400px;
    	box-shadow: 0 0 50px #000;
    	position: fixed;
    
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    	
    	opacity: 0;
    	transition: 0.5s;
    	transform: scale(0);	/* 出现的形式是从小到大 */
    	display: none;	/* 不设置为none的话它会档住图片 */
    	
    }
    .prev,.next{
    	width: 50px;
    	height: 45px;
    	position: absolute;
    	/* top: 50%;
    	margin-top: -22px; */
    	top: 0;
    	bottom: 0;
    	margin: auto;
    	
    	cursor: pointer;
    	z-index: 2;
    }
    .prev{
    	left: 0;
    	background: url(//repo.bfw.wiki/bfwrepo/images/swiper/prev.png);
    }
    .next{
    	right: 0;
    	background: url(//repo.bfw.wiki/bfwrepo/images/swiper/next.png);
    }
    #showPic .img{
    	position: relative;
    	z-index: 1;
    	transform-style: preserve-3d;
    	perspective: 500px;
    	height: 400px;
    }
    #showPic img{
    	width: 600px;
    	height: 400px;
    	position: absolute;
    	left: 0;
    	top: 0;
    	transition: transform .3s;
    }
    
    /* 图片张开时候的变换中心点 */
    #showPic img.moveToRight{
    	transform-origin: left;
    }
    #showPic img.moveToLeft{
    	transform-origin: right;
    }
    </style>
</head>

<body>
    <div id="wrap">
        <ul>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t1.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t2.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t3.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t4.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t5.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t6.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t7.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t8.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <img src="//repo.bfw.wiki/bfwrepo/images/swiper/t9.png" alt="">
                <div></div>
                <div></div>
                <div></div>
            </li>




        </ul>
    </div>

    <div id="shadowBox"></div>
    <div id="showPic">
        <div class="prev"></div>
        <div class="img">
            <img style="z-index: 1;" src="//repo.bfw.wiki/bfwrepo/images/swiper/t1.png" />
            <img style="z-index: 2;" src="//repo.bfw.wiki/bfwrepo/images/swiper/t2.png" />
        </div>
        <div class="next"></div>
    </div>
    <script>
        var lis=document.querySelectorAll('#wrap li'),
    	shadowBox=document.querySelector('#shadowBox'),
    	showPic=document.querySelector('#showPic'),
    	prev=document.querySelector('.prev'),
    	next=document.querySelector('.next'),
    	imgCon=document.querySelector('#showPic .img'),
    	bigImgs=imgCon.children;
    
    var curNum=0;	//当前图片的索引
    var canClick=true;	//用户是否可以点击
    
    
    //图片预加载功能函数
    function loadImg(imgs,callBack){
    	var loadImgs=[],loadImgNum=0;
    
    	for(var i=0;i<imgs.length;i++){
    		loadImgs[i]=new Image();
    		loadImgs[i].onload=function(){
    			loadImgNum++;
    			if(loadImgNum==imgs.leng.........完整代码请登录后点击上方下载按钮下载查看