山寨凤凰新闻菜单效果

山寨凤凰新闻菜单效果

 

效果图:

 

山寨来源:

LiveScaleLabel.h 与 LiveScaleLabel.m
//
//  LiveScaleLabel.h
//  ShowLabel
//
//  Created by XianMingYou on 15/1/26.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface LiveScaleLabel : UIView

@property (nonatomic) CGFloat beginScaleValue;
@property (nonatomic) CGFloat endScaleValue;

@property (nonatomic, strong) UIColor  *normalStateColor;
@property (nonatomic, strong) UIColor  *maxStateColor;

@property (nonatomic, strong) NSString *text;
@property (nonatomic, strong) UIFont   *font;

@property (nonatomic) CGFloat sensitiveValue; // 敏感的值
@property (nonatomic) CGFloat currentValue;   // 当前值

- (void)buildView;
- (void)accessCurrentValue:(CGFloat)currentValue;

@end
//
//  LiveScaleLabel.m
//  ShowLabel
//
//  Created by XianMingYou on 15/1/26.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "LiveScaleLabel.h"

@interface LiveScaleLabel ()

@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) UIView  *snapView;
@property (nonatomic, strong) UILabel *maxLabel;

@end

@implementation LiveScaleLabel

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setUpLabelWithFrame:self.bounds];
    }

    return self;
}

- (void)setUpLabelWithFrame:(CGRect)frame {
    self.label                  = [[UILabel alloc] initWithFrame:frame];
    self.label.textAlignment    = NSTextAlignmentCenter;

    self.maxLabel               = [[UILabel alloc] initWithFrame:frame];
    self.maxLabel.textAlignment = NSTextAlignmentCenter;
}

- (void)buildView {
    UIColor *normalStateColor = (self.normalStateColor == nil ? [UIColor blackColor] : self.normalStateColor);
    UIColor *maxStateColor    = (self.maxStateColor == nil ? [UIColor redColor] : self.maxStateColor);
    UIFont  *font             = (self.font == nil ? [UIFont systemFontOfSize:16.f] : self.font);
    NSString *text            = (self.text == nil ? @"" : self.text);

    // 设置基本样式
    self.label.text      = text;
    self.label.textColor = normalStateColor;
    self.label.font      = font;

    self.maxLabel.text      = text;
    self.maxLabel.textColor = maxStateColor;
    self.maxLabel.font      = font;

    // 截图
    [self addSubview:self.label];
    [self addSubview:self.maxLabel];

    // 设定起始状态值
    [self accessCurrentValue:self.currentValue];
}

- (void)accessCurrentValue:(CGFloat)currentValue {
    CGFloat beginScaleValue = (self.beginScaleValue <= 0 ? 1.f : self.beginScaleValue);
    CGFloat endScaleValue   = (self.endScaleValue   <= 0 ? 1.f : self.endScaleValue);
    CGFloat sensitiveValue  = (self.sensitiveValue  <= 0 ? 320 : self.sensitiveValue);

    CGFloat percent = currentValue / sensitiveValue;
    if (percent >= 1) {
        percent = 1;
    } else if (percent <= 0) {
        percent = 0;
    }

    self.transform      = CGAffineTransformMake(beginScaleValue + percent * endScaleValue, 0, 0,
                                                beginScaleValue + percent * endScaleValue, 0, 0);
    self.maxLabel.alpha = percent;
    self.label.alpha    = 1 - percent;
}

@end
//
//  ViewController.m
//  ShowLabel
//
//  Created by XianMingYou on 15/1/26.
//  Copyright (c) 2015年 XianMingYou. All rights reserved.
//

#import "ViewController.h"
#import "LiveScaleLabel.h"

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView   *scrollView;
@property (nonatomic, strong) LiveScaleLabel *liveLabelLeft;
@property (nonatomic, strong) LiveScaleLabel *liveLabelRight;
@property (nonatomic, strong) UIView         *lineView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];

    // 左侧view
    self.liveLabelLeft                  = [[LiveScaleLabel alloc] initWithFrame:CGRectMake(0, 300, 160, 30)];
    self.liveLabelLeft.normalStateColor = [UIColor grayColor];
    self.liveLabelLeft.text             = @"YouXianMing";
    self.liveLabelLeft.endScaleValue    = 0.2;
    self.liveLabelLeft.sensitiveValue   = 320;
    [self.liveLabelLeft buildView];
    [self.liveLabelLeft accessCurrentValue:320];
    [self.view addSubview:self.liveLabelLeft];

    // 右侧view
    self.liveLabelRight                  = [[LiveScaleLabel alloc] initWithFrame:CGRectMake(160, 300, 160, 30)];
    self.liveLabelRight.text             = @"NoZuoNoDie";
    self.liveLabelRight.normalStateColor = [UIColor grayColor];
    self.liveLabelRight.maxStateColor    = [UIColor cyanColor];
    self.liveLabelRight.endScaleValue    = 0.2;
    self.liveLabelRight.sensitiveValue   = 320;
    [self.liveLabelRight buildView];
    [self.view addSubview:self.liveLabelRight];

    self.scrollView                                = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    self.scrollView.delegate                       = self;
    self.scrollView.pagingEnabled                  = YES;
    self.scrollView.showsHorizontalScrollIndicator = NO;
    self.scrollView.contentSize                    = CGSizeMake(self.scrollView.frame.size.width * 2,
                                                                self.scrollView.frame.size.height);
    [self.view addSubview:self.scrollView];

    // 线条view
    self.lineView            = [[UIView alloc] initWithFrame:CGRectMake(0, 300 + 30, 160, 1)];
    UIView *backView         = [[UIView alloc] initWithFrame:CGRectMake(20, 0, 120, 1)];
    backView.backgroundColor = [UIColor yellowColor];
    [self.lineView addSubview:backView];
    [self.view addSubview:self.lineView];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat x = scrollView.contentOffset.x;
    [self.liveLabelLeft  accessCurrentValue:320 - x];
    [self.liveLabelRight accessCurrentValue:x];

    CGRect rect = self.lineView.frame;
    rect.origin.x      = x / 2.f;
    self.lineView.frame = rect;
}

@end
时间: 2024-12-21 20:42:31

山寨凤凰新闻菜单效果的相关文章

js实现的简洁网页滑动tab菜单效果代码_javascript技巧

本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab

Android实现下拉导航选择菜单效果

本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView来控制里面的菜单项,每个菜单项对应相应的

Javascript仿新浪游戏频道鼠标悬停显示子菜单效果_javascript技巧

本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

jquery实现平滑的二级下拉菜单效果_jquery

本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>

jquery实现标题字体变换的滑动门菜单效果_jquery

本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html

jquery实现向下滑出的二级导航下滑菜单效果_jquery

本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效,带颜色的是一级主菜单,点击后会展开向上滑出二级的子菜单,再次点击主菜单,会合拢子菜单,就菜单所能展现的功能来说,适用于企业网站产品分类.新闻类文章栏目导航等,目前本款菜单支持两级,有兴趣的可自己扩展更多级的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery

JS实现自动变换的菜单效果代码_javascript技巧

本文实例讲述了JS实现自动变换的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动变换的JS菜单,由原来的一款自动TAB修改而成的,有需要的就拿去,代码内有几个JS函数,分别用来控制TAB的自动切换. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

php+mysql实现的二级联动菜单效果详解_php技巧

本文实例讲述了php+mysql实现的二级联动菜单效果.分享给大家供大家参考,具体如下: <!--php+mysql二级联动--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>生成学院专业级联下拉菜单测试 </title> </head> <

jQuery实现向下滑出的二级菜单效果实例_jquery

本文实例讲述了jQuery实现向下滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这里用jQuery实现向下滑出的二级菜单代码,滑出菜单,鼠标放在主菜单的任意一项上,就会向下滑出二级的子菜单.当然本代码只是一个演示,有些菜单是随便弄的,经过测试,兼容IE8.火狐和Chrome等浏览器,有兴趣的你可以自己试下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-2menu-style-codes/ 具体代码如下