展示页效果制作

Myth丶恋晨 2022-05-21 06:48 219阅读 0赞

嗯、先看一下效果图，大致就是点击图片，让点击的图片到达中间的位置

![70][]

思路：

1、封装一个tab(n)函数，然图片排成上面的效果，n是几就代表第几张图片在中间的位置

2、封装两个函数，上一个和下一个

3、判断点击div时执行上一个还是下一个操作  
     1）、记录鼠标点击时的位置 disX  
     2）、封装一个函数计算中间的图片的右边到屏幕左侧的距离 disR  
     3）、封装一个函数计算中间的图片的左边到屏幕左侧的距离 disL

4）、disL>disX执行上一个函数，disR<disX时执行下一个函数

HTML代码：

<div id="wrap">
        <img src="img/0.png"/>
        <img src="img/1.png"/>
        <img src="img/2.png"/>
        <img src="img/3.png"/>
        <img src="img/4.png"/>
        <img src="img/5.png"/>
        <img src="img/6.png"/>
    </div>

css代码：

<style>
            body{
                margin: 0;
                background-color: #999;
            }
            #wrap{
                height: 500px;
                background: url(img/bg.png) no-repeat center;
                background-size: 1800px 500px;
                position: relative;
                transform-style: preserve-3d;
                perspective: 800px;
                margin-top: 100px;
            }
            img{
                border: none;
                vertical-align: top;
            }
            #wrap img{
                width: 300px;
                height: 200px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -150px;
                margin-top: -100px;
                transition: .7s ease-in-out;
            }
        </style>

js代码：

<script>
        var imgs = document.getElementsByTagName("img");
        var len  = imgs.length;
        var now = 0 ;
        var target;
        setTimeout(function(){
            tab(now);
        },100)
    var disR = disR(imgs[now]);
    var disL = disL(imgs[now]);
    var timer = null;
    
        for(let i=0; i<len;i++){
            imgs[i].onclick = function(ev){
                target = i;
                var ev = ev||event;
                var disX = ev.clientX;
                if(disR<disX){
                    goNext();
                }else if(disL>disX){
                    goPrev();
                }
            }
        }
        function disR(obj){//计算中间的图片右侧距离屏幕左侧的距离
            var left = obj.offsetLeft;
            var width = obj.offsetWidth;
            var dis = left+width;
            return dis;
        }
        function disL(obj){//计算中间的图片左侧距离屏幕左侧的距离
            var left = obj.offsetLeft;
            return left;
        }
    
        function goNext(){
            clearInterval(timer);//执行下一个函数的时候，要先清除掉上一个函数的定时器
            if(now == target){
                return;
            }
            now++;
            if(now>len-1){
                now = 0;
            }
            tab(now);
          timer = setInterval(function(){
                goNext();
            },500);
        }
    
        function goPrev(){
            clearInterval(timer);//执行上一个函数的时候，要先清除上一个函数的定时器
            if(now == target){
                return;
            }
            now--;
            if(now<0){
                now = len - 1;
            }
            tab(now);
            timer = setInterval(function(){
                goPrev();
            },500);
        }
    
    
        function tab(n){
            for (var i = 0; i < Math.floor(len/2); i++) {
                var Left = n - 1 - i;
                if(Left<0){
                    Left = Left + len;
                }
                imgs[Left].style.transform = "translateX("+(-150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(30deg)";
                var Right = n + 1 + i;
                if(Right > len - 1){
                    Right = Right - len;
                }
                imgs[Right].style.transform = "translateX("+(150*(i+1))+"px) translateZ("+(200-i*100)+"px) rotateY(-30deg)";
            }
            imgs[n].style.transform = "translateZ(300px)";
        }
    </script>

[70]: /images/20220521/8b44e39081364f6ba55a51844cbca842.png

发表评论取消回复

表情：

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

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

相关阅读

相关 BootStrap 效果展示

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] [超酷Bootstrap 3 隐藏滑动侧边栏菜单][Bo

太过爱你忘了你带给我的痛/ 2022年10月02日 05:53/ 0 赞/ 176 阅读

相关分页展示图片

下面的是关于较为简单的图片进行分页展示。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

Love The Way You Lie/ 2022年09月27日 06:50/ 0 赞/ 191 阅读

相关制作翻转效果动画

经测试改动画在移动端兼容有一些问题，要兼容移动端可前往[https://blog.csdn.net/u012011360/article/details/92766950][h

女爷i/ 2022年08月04日 04:08/ 0 赞/ 205 阅读

相关最简单的css+js标签页效果制作

最简单的css+js标签页效果制作 > 之前见网上的标签页虽然效果很好，但是额外的代码太多，让人分不清写一个标签页究竟需要什么，所以我来写一个最简单的,其他效果你们可以自

系统管理员/ 2022年06月17日 03:59/ 0 赞/ 266 阅读

相关 CSS DIV制作源码时代官网活动展示效果

1. 制作效果图 ![Center][] 2. 为什么要制作效果通过只做该效果来学习DIV+CSS的网页布局以及JS的交互 3. 制作步骤 3.1 h

「爱情、让人受尽委屈。」/ 2022年06月09日 14:15/ 0 赞/ 167 阅读

相关标签页效果

一个标签页的小实例： tab.html： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml

╰+攻爆jí腚メ/ 2022年05月31日 10:50/ 0 赞/ 280 阅读

相关展示页效果制作

嗯、先看一下效果图，大致就是点击图片，让点击的图片到达中间的位置 ![70][] 思路： 1、封装一个tab(n)函数，然图片排成上面的效果，n是几就代表第几张图片

Myth丶恋晨/ 2022年05月21日 06:48/ 0 赞/ 220 阅读

相关数据治理平台效果展示

产品效果视频：该产片效果视频链接：https://pan.baidu.com/s/1Q45uj4bAgyHPYKBO48LEjg 提取码：54e9 产品

深碍√TFBOYSˉ_/ 2022年02月26日 11:18/ 0 赞/ 293 阅读

相关 thinkphp分页效果的制作，按查询条件分页正确做法

PHP代码： <?php namespace Home\Controller; use Think\Controller; use Home\

梦里梦外;/ 2021年12月22日 07:19/ 0 赞/ 279 阅读

相关如何制作水彩画效果

1. 首先把素材放到PS里，选中那个图层，右键降其转换为智能对象 ![2019070516394576.png][] 2、执行滤镜 > 滤镜库 > 艺术效果 > 干画笔，

短命女/ 2021年12月16日 09:01/ 0 赞/ 214 阅读