移动端界面等比例放大缩小的问题

图片说明
这是个tab页,点击其中一项时,自己会放大,如果点击的是从左往右数第三个,他会往左移动一位,如果点击左边前两个,他会往右移动一位。当屏幕放大了以后,如下图图片说明整体的比例没有变化,包括字体和高度,是不是这样js就可以控制移动的距离了,请问是如何实现这样屏幕有2到3px的变化tab也会整体变动的

1个回答

你用百分比就可以了。一共4个图标。设置比例为,28%,24%,24%,24%,这样,如果移动到第三个,那就让第三个变成28%,其他都变为24%

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
等比例放大缩小图片的javascript程序
是一个用js写的等比例放大缩小图片的程序,在web开发时候很有用的
solidworks如何等比例放大缩小零件
solidworks如何等比例放大缩小零件 最近在画一个模型图,但是画好后,发现电路板模型和外观模型比例有点不适应。 这时需要对外观零件进行操作,适当的等比例的放大一些。 那么如何做呢? 先打开要放大缩小的零件图 菜单栏:插入——模具——缩放比例 就算零件图已经在装配图打开了,也没有关系,会更新的。 ...
求教:界面放大缩小的问题
想实现一个放大缩小的功能rnrn容器是 类Canvas extend JPanel,里面包括一个Icon对象(extends JButton)。Icon可以由鼠标拖动定位。尽管调用zoomIn()函数时,整个容器和对象是放大了,放大后,点击放大的Icon却不响应鼠标事件。在原来坐标处还有一个未放大的Icon,鼠标点击后就会显示。请各位帮忙解答一下!rn源程序如下:rnPainter.java:rnrnimport java.awt.Dimension;rnpublic class Painter rn public static void main(String[] args) rn // TODO Auto-generated method stubrn PaintFrame frame = new PaintFrame(); rn frame.setTitle("Paint Test!");rn Dimension d = frame.getToolkit().getScreenSize();rn frame.setBounds(d.width/4,d.height/4,d.width/2,d.height/2);rn frame.show();rn rnrnPaintFrame.javarnrnimport javax.swing.*;rnimport java.awt.BorderLayout;rnimport java.awt.event.ActionEvent;rnpublic class PaintFrame extends JFrame rnrn /**rn * rn */rn private static final long serialVersionUID = 1L;rn public PaintFrame() rn super(); rn // TODO Auto-generated constructor stubrn this.setDefaultCloseOperation(EXIT_ON_CLOSE);rn getContentPane().setLayout(new BorderLayout());rn initComponents();rn rn private void initComponents()rn JMenuBar menuBar = new JMenuBar();rn JMenu file = new JMenu("File");rn JMenuItem open = new JMenuItem("Open");rn JMenuItem save = new JMenuItem("Save");rn JMenuItem exit = new JMenuItem("Exit");rn exit.addActionListener(new java.awt.event.ActionListener() rn public void actionPerformed(java.awt.event.ActionEvent evt) rn System.exit(0);rn rn );rn file.add(open);rn file.add(save);rn file.add(exit);rn menuBar.add(file);rn this.setJMenuBar(menuBar);rn toolBar = new JToolBar();rn toolBar.add(new ZoomInAction("++"));rn toolBar.add(new ZoomOutAction("--"));rn getContentPane().add(toolBar,BorderLayout.NORTH);rn canvas = new Canvas();rn getContentPane().add(new JScrollPane(canvas,JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED,JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED),BorderLayout.CENTER); rn rn rn public class ZoomInAction extends AbstractActionrn private static final long serialVersionUID = 1L;rn rn public ZoomInAction() rn rn public ZoomInAction(String name) rn putValue(Action.NAME, name);rn rn rn public ZoomInAction(String name, javax.swing.Icon icon) rn this(name);rn putValue(Action.SMALL_ICON, icon);rn rn /** Invoked when an action occurs.rn */rn public void actionPerformed(ActionEvent e) rn canvas.zoomIn();rn rn rn public class ZoomOutAction extends AbstractActionrn private static final long serialVersionUID = 1L;rn rn public ZoomOutAction() rn rn public ZoomOutAction(String name) rn putValue(Action.NAME, name);rn rn rn public ZoomOutAction(String name, javax.swing.Icon icon) rn this(name);rn putValue(Action.SMALL_ICON, icon);rn rn /** Invoked when an action occurs.rn */rn public void actionPerformed(ActionEvent e) rn canvas.zoomOut();rn rn rn private JToolBar toolBar;rn private Canvas canvas;rnrnrnCanvas.javarnimport java.awt.Color;rnimport java.awt.Dimension;rnimport java.awt.Graphics;rnimport java.awt.Graphics2D;rnimport javax.swing.JPanel;rnimport javax.swing.border.LineBorder;rnpublic class Canvas extends JPanel rnrn /**rn * rn */rn private static final long serialVersionUID = 1L;rn public Canvas()rn super();rn setBackground(new java.awt.Color(230, 240, 255));rn setLayout(null);rn //setSize(800,600);rn Dimension d = new Dimension(800,600);rn this.setPreferredSize(d);rn this.setMaximumSize(d);rn this.setMinimumSize(d);rn initComponents();rn zoom = 1.0;rn rn private void initComponents()rn Icon icon = new Icon("Icon");rn add(icon);rn icon.setLocation(100,100);rn rn protected void paintComponent(Graphics g)rn super.paintComponent(g); rn ((Graphics2D)g).scale(zoom,zoom);rn Graphics2D g2 = (Graphics2D)g;rn for (int l = 0; l < 10; l++)//网格,用于显示容器是否放大rn for (int m = 0; m < 10; m++)rn int q1 = l*120; //60*2rn int q2 = m*80; //40*2rn g2.setColor(Color.gray);rn g2.drawLine(0,q2,1680,q2);rn g2.drawLine(q1,0,q1,1600);rn rn rn rn public void zoomIn()rn zoom = zoom*2;rn repaint();rn rn public void zoomOut()rn zoom = zoom/2;rn repaint();rn rn private double zoom;rnrnrnIcon.javarnimport java.awt.Graphics;rnimport java.awt.Graphics2D;rnimport java.awt.Rectangle;rnimport java.awt.event.MouseEvent;rnimport java.awt.geom.AffineTransform;rnimport javax.swing.JButton;rnpublic class Icon extends JButton implements java.awt.event.MouseListener, java.awt.event.MouseMotionListenerrnrn /**rn * rn */rn private static final long serialVersionUID = 1L;rn public Icon(String text) rn super(text);rn // TODO Auto-generated constructor stubrn setSize(80,60);rn setBackground(new java.awt.Color(200, 240, 255));rn this.setBorder(new javax.swing.border.MatteBorder(new java.awt.Insets(3, 3, 3, 3), new java.awt.Color(102, 204, 255)));rn addMouseListener(this);rn addMouseMotionListener(this);rn rn public void mouseDragged(java.awt.event.MouseEvent e) rn rn int locationX=e.getPoint().x+this.getX()-last_x;//-this.getSize().width/2;rn int locationY=e.getPoint().y+this.getY()-last_y;//-this.getSize().height/2;rn setLocation(locationX,locationY);rn checkPostion(); rn Rectangle d = getBounds();rn getParent().repaint(d.x,d.y,d.width,d.height);rn rn public void mousePressed(java.awt.event.MouseEvent e) rn last_x = e.getPoint().x;rn last_y = e.getPoint().y;rn rn private void checkPostion() rn // TODO: Add your code herern int x=getX();rn int y=getY();rn int width=getParent().getSize().width;rn int height=getParent().getSize().height;rn if(x+getSize().width>width)rn x=width-getSize().width-2;rn rn if(x<0)rn x=2;rn rn if(y+getSize().height>height)rn y=height-getSize().height-2;rn rn if(y<0)rn y=2;rn rn setLocation(x,y);rn rn protected void paintComponent(Graphics g)rn super.paintComponent(g); rn AffineTransform at = ((Graphics2D)getParent().getGraphics()).getTransform();rn ((Graphics2D)g).scale(at.getScaleX(),at.getScaleY());rn rn private int last_x, last_y;rn public void mouseClicked(MouseEvent e) rn // TODO Auto-generated method stubrn rn rn public void mouseEntered(MouseEvent e) rn // TODO Auto-generated method stubrn rn rn public void mouseExited(MouseEvent e) rn // TODO Auto-generated method stubrn rn rn public void mouseReleased(MouseEvent e) rn // TODO Auto-generated method stubrn rn rn public void mouseMoved(MouseEvent e) rn // TODO Auto-generated method stubrn rn rn
css实现图片等比例放大缩小显示
实现图片等比例显示只需要设置其宽度或者高度,另一个不设置即可。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html xmlns:layout=&quot;http://www.ultraq.net.nz/thymeleaf/layout&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;/&amp;gt; &amp;lt;style type=&quot;te
NGUI使用技巧(等比例放大缩小图片)
我们可以通过改变Aspect里面的属性,去实现等比例放大缩小,选中Based On XXX 模式后,直接拉动或者设置Aspect的值就行,默认会选中Free模式
移动端h5对图片放大缩小
在html中手机端禁止页面放大缩小方法: 在html中加: &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" &gt; 手机端js 图片的放大缩小 https://github.com/ap...
移动端js兼容代码禁止放大缩小问题
nn```n n n nn```n这个代码,在安卓2.3以上和苹果手机都没有问题,但是在安卓2.3 缩小是被禁止了n但是还是可以放大,有没有大神知道怎么回事啊。。n
C#界面放大缩小,拖动
这个程序可以实现C#界面里面所有内容的缩小与放大,还可以绘制控件,实现控件的拖动与缩放
winform界面,如何放大缩小
winform界面,全屏的时候,如何使得各个控件都跟着放大呢?
MFC放大缩小界面,使控件跟着放大缩小
第一步:先建一个MFC工程,在界面上随便拖几个控件,如下图。 第二步:添加界面的响应函数OnSize() 第三步:头文件中添加如下几个变量 第四步:cpp文件中添加全局变量 第五步:OnInitDialog()初始化函数中添加如下语句 第六步:编写ReSize(int nID)函数 第七步:OnSize()响应函数里的语句如下: 放大缩小效果如下: 放大前:
Qt 隐藏标题栏 实现界面拖动及放大缩小的问题
我想用Qt实现一个类似QQ的界面,但隐藏掉标题栏后怎么实现拖动和放大缩小的功能,类似QQ那样的,急求,先谢谢各位了。
一个界面多个picturebox放大缩小问题
一个界面放了多个picturebox控件,3*4的格式摆放,大小一样,拖动放大界面时,我想这12个picturebox控件一起变大,而且每个的大小都一样,变小也一样
急,急,急,关于界面放大缩小的问题
本人现在用vc6.0做一串口开发程序,项目现已基本完成,但现在出了个开发初期没有解决的问题,希望各位网友给于解决。rn问题:rn开发环境server 2000+vc6.0+分辨率800*600,现在当在分辨率为800*600下执行程序的时候,程序界面还算过的去,但在1024*768 下运行时,资源对话框的不BUTTON、rnCOMBOBOX等按钮位置已经跑的一塌糊涂,小第做了个调整的类,很简单(将按扭位置同资源对话的按同等比例放大或缩小,但做完后,界面是好看了,但是有些按钮比如COMBOBOX不起作用了),那位网友有方面的调整类或相关资料代码,或建议小第不胜感激。rnrn
移动端界面切图
尺寸   1、一定要偶数 2、可点击部件不小于88px(以Retain为基准,通常所说的44px是指普通屏幕),实在不够大的切图时空白补足或者让程序控制触点大小 3、桌面图标:需要很多个不同的尺寸,在输出的时候要把双平台的尺寸全部输出切图,只需要提供直角切图,手机系统会自动生成圆角效果 * ios开发单位pt:750×1334尺寸的换算关系 1pt=2px,...
移动端界面左右分栏
&amp;lt;div class=&quot;listAll&quot;&amp;gt; &amp;lt;div class=&quot;singleList&quot;&amp;gt; &amp;lt;div class=&quot;showImg&quot;&amp;gt; &amp;lt;img src=&quot;image/showMsg.png&quot; alt=&quot;&quot;&amp;gt;
移动端分类界面 分屏
1. display: -webkit-box; CSS3新盒模型,与display:flex;相似,具体请见。。。。 2. -webkit-box-orient: vertical; 子元素排列方向:纵向(vertical),还有横向(horizontal,默认方向)。 3. -webkit-box-align: center; 子元素横向排列方式:居中排列(center
HTML5移动端 TOUCH拖拽图片放大缩小
类似于QQ聊天图片点击后手指拖拽,放大缩小效果。
Jquery相册等比例放大缩小遮罩 实用,集合多种jquery实例
一个文件 一个是网上扒下来 一个是我挑干净后的代码- - 。
MFC快速实现对话框等比例的放大缩小功能源码实例
VC++工程搭建 MFC快速实现对话框和内部控件的等比例放大缩小功能,再放大缩小的同时改变响应只控件的匹配大小,有问题的地方还请大家指正谢谢。
wxpython初步涉及界面创建与等比例变化
wxpython个人感觉不是很好用。作者是先用C++学习的Qt,然后pyQt,目前有一部分涉及到了wxpython. 个人感觉: wxpython的id真的难受! 这里就不解释怎么创建一个wxpython的项目了,我写了一个按钮,这个是按钮的触发函数,触发函数创建一个界面并打开,其中有两个文本控件,可以等比例的显示出来。 如下 #一个按钮的触发函数: #首先是创建了Frame类型的窗口...
使用rem等比例缩放手机界面
这几天写公司官网的手机端界面,同事介绍了一种布局模式,即使用rem等比列缩放布局。 rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了。 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in windo
图片等比例缩放问题
今天在做公司的一个年终总结的时候遇到这么一个问题,要求是外层父级盒子,宽为1000px,居于页面中部,里面有两张图片,要求是横向刚好占满盒子。两张图片的尺寸分别是left_on:524*259,right:535*259,结构代码如下: Document
上传图片等比例缩放问题
上传图片并保存缩小后的图片,但是不保存原图能实现吗?rnpublic bool ThumbnailCallback()rn rnrn return false;rnrn rn private void SaveImage(string filePath)rn rn string fileName = Path.GetExtension(upLoad.PostedFile.FileName).ToLower();rn string _filename = DateTime.Now.ToString("yyMMddHHmmss");rnrn System.Drawing.Image image = null, aNewImage = null;rnrn //下面是生成缩略图rn int newwidth = 0, newheight = 0;rn image = System.Drawing.Image.FromFile(filePath);rn System.Drawing.Image.GetThumbnailImageAbort callb = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);rnrn //取高和宽 rn int phWidth = image.Width;rn int phHeight = image.Height;rnrn //设置缩略的宽度和高度rn if (phWidth > 110)rn rn //指定宽度rn newwidth = 110;rn //根据宽度算出高度rn newheight = phHeight * newwidth / phWidth;rn rn aNewImage = image.GetThumbnailImage(newwidth, newheight, callb, new System.IntPtr());rn //将缩略图重新命名并保存rn aNewImage.Save(Server.MapPath("~/files/file/") + DateTime.Now.ToString("yyMMddHHmmss") + fileName);rn image.Dispose();rn rnrnSaveImage(string filePath)里面的filePath可不可以用上传空间里面得到的upLoad.PostedFile.FileName值?rn难道只能用服务器端的路径?rn
H5移动端很漂亮的注册界面
纯h5实现的简介漂亮的移动端注册界面,拿来即用,若有不妥之处,还请指正
html5移动端仿淘宝界面
html5移动端仿淘宝界面,商品分类,商品下单 结算,个人信息等等
css小技巧 移动端背景高宽等比例自适应
移动端背景等比例缩放,一般实现方法是,直接使用css3的background-size,但是有缺陷,高度不能固定缩放, 如果高度background-size: 100% 100%; 图片会变形,还有实现方法是用js来控制高度。 如果用css来实现,在网上找半天终于找到一种方法,宽度100%,图片都能等比例 小技巧,就是padding-bottom是按照父元素的宽度比计算的,而不是按高度算,...
仿win7界面弹出窗口放大缩小代码.zip
仿win7界面弹出窗口放大缩小代码是一款基于jQuery实现的仿Windows7桌面窗口打开关闭放大缩小特效。
等比例压缩图片
[code=&quot;java&quot;]package com.baitw.struts.utils; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * * 生成等比例高质量缩略图 * * */ public class ScaleI...
图片等比例压缩或等比例截取
图片等比例压缩或等比例截取,可以实现图片简单操作
等比例图片缩放
用上下文绘图的方法对图片进行等比例缩放/*! * 对图片进行等比例缩放 * * @param toSize 目标大小 * @param originalImg 模版图片 * * @return 缩放后的图片 */ -(UIImage *)scaleImageToSize:(CGSize)toSize withOriginalImage:(UIImage *
QT等比例
layout.setStretch(0,2);layout.setStretch(1,2);
图片自动等比例缩放的问题
我发现个问题,不设置高的的话,ff下,如果宽度没超过,高度超过了,那么图片显示不全,只显示上面一段,如果设置了高度,ie6下会显示出高和宽都小于max-height和max-width的图片,我一直刷新,有时前几张会显示正常rn[code=VB]rn.div1 img rn vertical-align:middle;rn max-height:190px;rn height:expression(this.width > 190 ? "190px" : this.height) !important; rn rn max-width:230px; rn width:expression(this.width > 230 ? "230px" : this.width);rn[/code]
图像等比例缩放 等比例缩放图片
图像等比例缩放 等比例缩放图片。。。。。。。。。。。。。。。。。。。。。。
等比例图片压缩
JAVA等比例图片压缩
ASP.NET图片等比例显示的问题
如题。一个[color=#FF0000]固定大小(有初始化大小)[/color]的图片框控件要显示图片经常是将图片铺满显示,这样对一些和图片框大小不同比例的图片来说会出现变形,请问我该如何让图片全部显示但让图片保持原比例呢?可以等比例缩放,但不要变形。(类似桌面背景图片的显示方式:平铺、拉伸、居中。我要的是居中效果!)rnrn rnrn注:WinForm里面的图片框就有mode模式,里面就能实现这个效果!rnrnPS:缩略图技术试过了,不行,这样只是让图片等比例缩放,显示的时候还是会铺满图片框!rnrn最好有例子,或者代码段,谢谢!rn
关于QWidget等比例缩小的问题
我在QWidget上画了一个坐标轴,但是,不论QWidget的大小如何变,所画的坐标轴都保持尺寸不变。rn请问有什么办法让画在窗口上的坐标轴,随着窗口大小的改变而等比例改变呢?
对话框与控件等比例的放大问题
为了使对话框与控件能够等比例的放大,我使用了MoveWindow(),但是发现该函数的几个参数都是int型的,这样我获得的放大数值(浮点型)都被类型转换了,精度发现问题,多次放大后,控件相对位置有了明显的变化....
双击放大缩小图片问题!
双击放大缩小问题!rnrn谁能指点一下,双击就可以放大图片和缩小图片呀。双击一次放大一定比例,再双击再放大一定比例!或缩小一定比例!
关于地图放大缩小的问题
请问不用放大镜怎样来实现地图的放大与缩小?要用到什么倥件来实现,怎么编写代码
js放大缩小 引发的问题
scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的sy 会导致 Y 坐标沿着 X 轴对折。 具体使用例子  可以找到很多 (http://www.w3school.com.
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件