javascript - 这个小效果该怎么写-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - 这个小效果该怎么写

伊谢尔伦 2017-04-10 17:30:10

[JavaScript讨论组]

668

点击这里

我想保持点击每个p都有各自的弹出效果和弹入效果
在这基础上，改变下他的点击后的过程
现在的点击是连续点击的话他们都会弹出，延迟三秒后各自都弹入消失
这样体验很差
我想改成假如先点某一个p弹出框后，再接着点其它的时候去看下前一个有没有东西弹出
如果有的话就还是保留之前的弹出，但显示的内容就是现在这个点击的,这个框要怎么实现？？

弄出来了，效果还要改进

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(6)

阿神2017-04-10 17:32:10 6楼

$(this).each(function(){

改成

$('.outter').each(function(){

赞 +0

添加回复

巴扎黑2017-04-10 17:32:10 5楼

弹出来的p位置都不对啊，小三角方向也不对。

赞 +0

添加回复

阿神2017-04-10 17:32:10 4楼

使用 $.fn.siblings() 查找同级对象，并获取到这些对象下的图标和内容。

如：

var _this = this,
    $this = $(this),
    $siblings = $this.siblings(), // 获取同级对象
    $sibContent = $siblings.find('.dd'), // 获取内容
    $sibIcon = $siblings.find('.icon'); // 图标
    
// 方法一：点击前调整其他同级对象
$sibIcon.hide();
$sibContent.removeClass('add');

// 避免突兀
$sibIcon.hide(0, function(){
    // 其他
    $sibContent.removeClass('add');
});

另外，还需要注意清空其定时器。

赞 +0

添加回复

迷茫2017-04-10 17:32:10 3楼

jbox插件，看看适不适合你，不用什么东西都自己写。

赞 +0

添加回复

迷茫2017-04-10 17:32:10 2楼

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    *{margin:0; padding:0; list-style:none;}
    .main{ margin:20px auto; width:170px; height:160px;}
    .b_box{ width:170px; height:100px; margin-bottom:10px;}
    .b_box li{ display:none; background:#546213; width:170px; height:100px; transform:scale(0,0); font-size:20px;}
    .b_box li.active{display:block; transform-origin:bottom left; color:#fff; transform:scale(1,1);
        animation:fd .5s ease;
        -webkit-animation:fd .5s ease;
    }
    @keyframes fd{
           from{transform:scale(0,0);}
           to{transform:scale(1,1);}
    }
    @-webkit-keyframes fd{
               from{-webkit-transform:scale(0,0);}
               to{-webkit-transform:scale(1,1);}
    }
    .s_box{ margin-right:-10px;}
    .s_box li{ float:left; width:50px; height:50px; background:#333; border-radius:5px; cursor:pointer; margin-right:10px; color:#fff; position:relative; font-size:20px;}
    .icon{ position:absolute; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #546213; left:50%; margin-left:-10px; top:-10px; display:none; transform:scale(0,0);}
    .s_box li.active i.icon{ display:block; transform-origin:top left; transform:scale(1,1); animation:fd .5s ease;
        -webkit-animation:fd .5s ease;}

</style>
</head>

<body>
    <p class="main">
        <ul class="b_box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul class="s_box">
            <li>1<i class="icon"></i></li>
            <li>2<i class="icon"></i></li>
            <li>3<i class="icon"></i></li>
        </ul>
    </p>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function(){
            var timer=null;
            $(".s_box li").on("click",function(){
               clearTimeout(timer);
               var _index=$(this).index();
               $(this).addClass("active").siblings('li').removeClass("active");
               $(".b_box").find("li").eq(_index).addClass("active").siblings("li").removeClass("active");
               timer=setTimeout(function(){
                     $('.s_box li.active').removeClass("active"); 
                  $(".b_box li.active").removeClass("active");
               },3000);
            })
        })
    </script>

</body>

</html>

赞 +0

添加回复

PHP中文网2017-04-10 17:32:10 1楼

本来想求助下sf里的大神的，不过都没有自己想要的结果还是自己解决了！！
因为以前也没有真正动手做过一个完整的效果，都是用些现成的
所以至于在弄这个效果的时候思绪有些乱，过后才整理出来了！！
大家如果觉得有地方可以改进的更好，就希望大家多多指点
这个效果我的大致处理方式是
1、根据popbox是否大于outter的offsetleft决定他是靠左还是靠右
2、靠左和靠右又分为是否为连续点击
3、计算左边过渡到右过和右边过渡到左边
4、至于每个位置上的值在刚开始就已经计算好了，每次都要记录下上次的值，才能确定当前的popbox和icon要移动多少
5、还有就是布局问题，之前也就是卡这布局上去了，过渡的时候要清除他本身自带的过渡(css3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .animationbox{width:470px;height:400px;margin:200px auto;padding:100px;}
        .outter{width:50px;height:50px;background:#333;position:relative;float:left;border-radius:5px;margin:100px 10px 0 0;cursor:pointer;}
           .popbox{position:absolute;top:-310px;width:300px;height:300px;background:#546213;text-align:center;line-height:100px;}
           .icon{position:absolute;width:50px;height:10px;left:0px;bottom:0px;}
           .icon span{position: absolute;width:10px;height:10px;background:#546213;transform:rotate(45deg);left:18px;bottom:-4px;}
           .anidd{left:0px;transform-origin:bottom left;transition:all 0.4s ease;transform:scale(0,0);}
        .add{transform:scale(1,1);}
        .iconclass{transition:all 0.5s ease;}
    </style>
</head>
<body>
    <!--父级p最好和子级个数的宽一样--->
    <p class="animationbox">
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能1</p></p>
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能2</p></p>
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能3</p></p>
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能4</p></p>
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能5</p></p>
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能6</p></p>
        <p class="outter"><p class='popbox anidd'><p class="icon"><span></span></p>功能7</p></p>
    </p>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>

        $(function() {
            var _boolrightToleft = false,//从右到左不连续
                _boolrightToleftcontinuity = false,//从右到左连续
                _boolleftToright = false,//从左到右不连续
                _boolleftTorightcontinuity = false,//从左到右连续
                flag = true,
                timer = null,
                time2 = null,
                time3 = null,
                time4 = null,
                _tipleft = 0,//记录上一个_moveLeft的值
                _tipright = 0;//记录上一个_moveright的值
                
            $('.outter').each(function(){
                var _this = $(this);
                _this.attr('data-left',_this.offset().left);
            });
            
            $('.animationbox').on('click','.outter',function(){                
                
                var _this = $(this),
                    _thisleft = parseInt(_this.attr('data-left'));//outer距离屏幕的left值
                    _parent = _this.closest('.animationbox'),
                    _parentwidth = _parent.width(),//最外p的宽度
                    _popobj = _parent.find('.popbox'),//所有的popbox
                    _popbox = _this.find('.popbox'),//当前的popbox
                    _popwidth = _popobj.width(),//popbox的宽度
                    _outter = _parent.find('.outter'),//所有的outer
                    _icon = _this.find('.icon'),//当前的图标
                    _offsetleft = _parent.find('.outter').eq(0).offset().left,//第一个outer距离屏幕左边的值
                    _moveLeft = _thisleft - _offsetleft;//左边位置计算
                    _rightnum = Math.floor(_parentwidth / _this.outerWidth(true)) * _this.outerWidth(true) - 10;//获取outer个数总和
                    _moveright = _moveLeft + _popwidth - _rightnum;//右边位置计算
                    
                    $('.outter').each(function(){//循环看下是否是连续点击，是连续点就把flag设为falg
                        if($(this).attr('data-fact')==='on'){
                            flag = false;
                        }
                    });
                    
                    popclearstyle();
                    
                    if(flag){//如果不是连续点击                        
                        
                        if( _thisleft >= Math.floor(_popwidth + _offsetleft)){//(大于)右边不连续点击
                            
                            _boolrightToleft = true;//是否从不是连续点击过渡到左边
                            _popbox.css('left',-_moveright).addClass('add');
                            _icon.css('left',_moveright);
                            _this.attr('data-fact','on');
                            _tipright = _moveright;
                            time3 = setTimeout(function(){
                                _popbox.css("left",0).removeClass('add');
                                _outter.attr('data-fact','off');
                            },3000);
                            
                        }else{//(小于)左边不连续点击
                            
                            _boolleftToright = true;//是否从不是连续点击过渡到右边
                            _popbox.css("left",-_moveLeft).addClass('add');
                            _icon.css('left',_moveLeft);
                            _this.attr('data-fact','on');
                            _tipleft = _moveLeft;
                            timer = setTimeout(function(){
                                _popbox.css("left",0).removeClass('add');
                                _outter.attr('data-fact','off');
                            },3000);
                            
                        }
                        
                    }else{
                        
                        clearTimeout(timer);
                        clearTimeout(time3);
                        
                        _popobj.removeClass('anidd').hide();
                        
                        if( _thisleft >= Math.floor(_popwidth + _offsetleft)){//(大于)右边连续点击
                            
                            _boolrightToleftcontinuity = true;
                            
                            if(_boolleftToright || _boolleftTorightcontinuity){//判断左边是否是从点击或连续点击过来的
                                
                                if(_boolleftToright) _boolleftToright = false;
                                if(_boolleftTorightcontinuity) _boolleftTorightcontinuity = false;
                                
                                _popobj.removeClass('anidd').hide();
                                _popbox.css("left",-_moveLeft).addClass('add');
                                _icon.css('left',_tipleft);
                                _popbox.show();
                                setTimeout(function(){
                                    _popbox.addClass('iconclass').css('left',-_moveright);
                                    _icon.addClass('iconclass').css('left',_moveright);
                                    _outter.attr('data-fact','off');
                                },10);
    
                            }else{
                                
                                _popbox.css("left",-_moveright).addClass('add');//_moveright pop固定右值
                                _icon.css('left',_tipright);//_tipright 记录上次点击的位置
                                _popbox.show();
                                setTimeout(function(){
                                    _popbox.addClass('iconclass').css('left',-_moveright);
                                    _icon.addClass('iconclass').css('left',_moveright);
                                    _outter.attr('data-fact','off');
                                },10);
                            }
                            
                            _tipright = _moveright;
                            
                        }else{//(小于)左边连续点击
                            
                            _boolleftTorightcontinuity = true;            
                            
                            if(_boolrightToleft || _boolrightToleftcontinuity){//判断右边是否是从点击或连续点击过来的
                                
                                if(_boolrightToleft) _boolrightToleft = false;
                                if(_boolrightToleftcontinuity) _boolrightToleftcontinuity = false;
                                
                                _boolrightToleft = false;
                                _popbox.css("left",-_moveright).addClass('add');
                                _icon.css('left',_tipright);
                                _popbox.show();
                                setTimeout(function(){
                                    _popbox.addClass('iconclass').css('left',-_moveLeft);
                                    _icon.addClass('iconclass').css('left',_moveLeft);
                                    _outter.attr('data-fact','off');
                                },10);                                
                                
                            }else{
                                
                                _popbox.css("left",-_moveLeft).addClass('add');
                                _icon.css('left',_tipleft);
                                _popbox.show();
                                setTimeout(function(){
                                    _icon.addClass('iconclass').css('left',_moveLeft);
                                    _outter.attr('data-fact','off');
                                },10);
                                
                            }

                            _tipleft = _moveLeft;
                        }
                        
                        timesetInterval();
                    }
                    
                    function popclearstyle(){//清除过渡时添加的样式
                        if(_popbox.hasClass('iconclass')){
                            _popbox.removeClass('iconclass');
                        }
                    }
                    
                    function timesetInterval(){
                        
                        clearTimeout(time2);
                        
                        time2 = setTimeout(function(){
                            _popbox.css('left',0).addClass('anidd').removeClass('add');
                            _popobj.addClass('anidd').removeClass('add').show();
                            _parent.find('.icon').removeClass('iconclass');
                            _outter.attr('data-fact','off');
                            flag = true;
                        },3000);
                    }
            })
        });
                
    </script>
      
</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>