以前也写过一篇:放大镜效果,现在,提供另一种解决方案。
MagnifierView.h
@interface MagnifierView : UIWindow {
UIView *viewToMagnify;
CGPoint touchPoint;
}
@property (nonatomic, retain) UIView *viewToMagnify;
@property (assign) CGPoint touchPoint;
@end
MagnifierView.m
#import "MagnifierView.h"
#import <QuartzCore/QuartzCore.h>
@implementation MagnifierView
@synthesize viewToMagnify, touchPoint;
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:CGRectMake(0, 0, 80, 80)]) {
self.layer.borderColor = [[UIColor lightGrayColor] CGColor];
self.layer.borderWidth = 3;
self.layer.cornerRadius = 40;
self.layer.masksToBounds = YES;
self.windowLevel = UIWindowLevelAlert;
}
return self;
}
- (void)setTouchPoint:(CGPoint)pt {
touchPoint = pt;
self.center = CGPointMake(pt.x, pt.y-10);
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, self.frame.size.width * 0.5, self.frame.size.height * 0.5);
CGContextScaleCTM(context, 1.5, 1.5);
CGContextTranslateCTM(context, -1 * (touchPoint.x), -1 * (touchPoint.y));
[self.viewToMagnify.layer renderInContext:context];
}
- (void)dealloc {
[viewToMagnify release];
[super dealloc];
}
@end
TouchReader.h
#import <UIKit/UIKit.h>
#import "MagnifierView.h"
@interface TouchReader : UIView {
NSTimer *touchTimer;
MagnifierView *loop;
}
@property (nonatomic, retain) NSTimer *touchTimer;
- (void)addLoop;
- (void)handleAction:(id)timerObj;
@end
TouchReader.m
#import "TouchReader.h"
#import "MagnifierView.h"
@implementation TouchReader
@synthesize touchTimer;
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
self.clipsToBounds = NO;
self.touchTimer = [NSTimer scheduledTimerWithTimeInterval:0.5
target:self
selector:@selector(addLoop)
userInfo:nil
repeats:NO];
if(loop == nil){
loop = [[MagnifierView alloc] init];
loop.viewToMagnify = self;
}
UITouch *touch = [touches anyObject];
loop.touchPoint = [touch locationInView:self];
[loop setNeedsDisplay];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
[self handleAction:touches];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
[self.touchTimer invalidate];
self.touchTimer = nil;
[loop release];
loop = nil;
}
- (void)addLoop {
[loop makeKeyAndVisible];
}
- (void)handleAction:(id)timerObj {
NSSet *touches = timerObj;
UITouch *touch = [touches anyObject];
loop.touchPoint = [touch locationInView:self];
[loop setNeedsDisplay];
}
- (void)dealloc {
[loop release];
loop = nil;
[super dealloc];
}
@end
分享到:
相关推荐
本动画属本人自制,通过使用遮罩动画与简单的位移动画相结合的方法,从而获得将字体放大的效果。
相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。在接下来的博文中,我们将向大家介绍通过jQuery...
相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。 在接下来的文章中,我们将向大家介绍通过jQuery...
jquery制作鼠标悬停图片放大镜特效(仿淘宝图片展示) 里面有两个例子,个人感觉第二个可能用起来方便点
滚动图片,类似天猫淘宝的商品图片详情,鼠标滑过会显示放大的效果,用法简单,可以直接复制使用,二次开发也有参考价值
本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下 1、准备两张图片,其中一张图片分辨率为另一张图片的二倍。 2、前端页面布局 //box1位左侧原图,box2为右侧放大图额显示框,...
有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!
本文实例为大家分享了jQuery实现放大镜效果的具体代码,供大家参考,具体内容如下 动画: 1、鼠标移入显示区图片时,显示选择框; 2、放大镜特效,将图片位于选择框内的部分放大显示; 3、点击下方小图片和左右移动...
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端;大家可以直接下载源码进行学习参考,下面来一起学习学习吧。 实现效果如下 效果一 效果二 效果三 调用代码如下 //前面是ID或者Class,后面有...
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
图片放大镜效果,供大家参考,具体内容如下 一难点:不让黄盒子出界 二难点:让大盒子相应移动(比例) <html lang="en"> <head> <meta charset="UTF-8"> <title>我的放大镜</...
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
KeyMob移动端广告平台为应用开发者和广告主提供应用交叉推广、手机广告优化等一站式移动营销解决方案,使应用开发者和广告主获得价值的最大化。 一、使用方法 ...二、Html结构 复制代码代码如下:<di
电商网站放大镜实现效果二
基于 jQuery 的图片放大镜使用方法$('.show').zoomImage({ layerW: 200, // 遮罩宽度 layerH: 200, // 遮罩高度 layerOpacity: 0.5, // 遮罩透明度 layerBgc: '#000', // 遮罩背景颜色 showPanelW: 500, // 显示放大...
故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的<head></head>中添加文件的css样式,即: <style type="text...