JS 仿Flash动画放大/缩小容器

放大缩小容器

*{margin:0;padding:0;}
body { padding:1em; }
h2 { font-size:2em; }
div { display:inline-block; width:10em; padding:.5em; margin-bottom:1em; overflow:hidden; background:#eee; text-align:center; font-size:1em; }
p#text { position:absolute; right:10px; top:10px; }

标题

小容器

标题

大容器

function getDefaultStyle(obj,attribute){
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function pr_box(id,e){
clearInterval(document.getElementById(id).maxmin);
var obj=document.getElementById(id);
var cfont=getDefaultStyle(obj,"fontSize");// 得到默认的大小:附单位
var cp=cfont.replace(/[0-9]|[\.]/g,"");// 得到默认的单位
var fsize=parseFloat(cfont);// 得到默认的大小数值
var s=10;// 运动速度
if(!obj.fsizeTmpe){// 存储默认大小数值
obj.fsizeTmpe=fsize;
}
if(!objfont){// 如果没有设置当前大小,则赋予其默认大小
obj.style.fontSize = cfont;
}
var e = obj.fsizeTmpe*e/100;// 需要改变到的大小数值
var objfont = parseFloat(obj.style.fontSize);// 得到当前的大小
if(e obj.fsizeTmpe){obj.maxmin = setInterval(function(){pr_max(obj,e,cp)},s);}
if(e == obj.fsizeTmpe){
if(objfont obj.fsizeTmpe){
obj.maxmin = setInterval(function(){pr_min(obj,obj.fsizeTmpe,cp)},s);
}
}
}
function pr_max(obj,e,cp){
if(!obj.fs){
obj.fs=obj.style.fontSize;
}
var objfont=parseFloat(obj.fs);
if(e > objfont){
//document.getElementById("text").innerHTML+="放大 - 原始值:"+objfont+" + 递增值:"+e/10+"
";
obj.fs = objfont+e/10+cp;
obj.style.fontSize = obj.fs;
}
else if(e ";
obj.fs = objfont-e/10+cp;
obj.style.fontSize = obj.fs;
}
else if(e > objfont){
obj.fs = e+cp;
obj.style.fontSize = obj.fs;
}
else{clearInterval(obj.maxmin);}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js实现图片放大缩小功能后进行复杂排序的方法

    这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动. 首先来看下最终的效果图: 有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点. 首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小图的位置, 2.点击图片放大缩小, 重新排列顺序, 3. 当点击偶数列(2,4)时,它前面的那项将向提出来向后面排列 4.第一个项不能动,点第二个是将占第三四的位置,从后面取第一个小

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • JS实现用键盘控制DIV上下左右+放大缩小与变色

    用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作: 上:↑ 下:↓ 左:← 右:→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl + ↑ : 放大 Ctrl + ↓ : 缩小 用键盘控制DIV html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;bord

  • JS简单的图片放大缩小的两种方法

    以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 复制代码 代码如下: <script type="text/javascript">         //兼容IE和火狐   缩小放大.缩放         function ImageSuofang(args) {             var oImg = document.getElementById("oImg");             if (args) {        

  • 移动端手指放大缩小插件与js源码

    本文实例为大家分享了移动端手指放大缩小的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use

  • js实现双击图片放大单击缩小的方法

    本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT

  • js实现用滚动条来放大缩小图片的代码

    这段时间比较闲,就搞了这么一个功能来练练手. 因为没有系统的学习过javascript,很多东西都是现学现用.请大家多提宝贵意见,谢谢 无标题文档 //---------------------------------------------------------------------------------------------- // 功能说明:用于放大图片的滚动条,可放大至图片的原始大小.在ie6,ie7,ff1.5下可用 // 使用方法:在图片代码里加上resizeable=1,同

  • js实现移动端微信页面禁止字体放大

    由于微信自带字体放大功能,因此基于微信的页面都可以通过微信进行字体放大,但是有些情况下这并不是我们想要的,因为很多移动端页面的开发都是使用rem作为单位的,当使用微信进行字体放大是,会导致页面的整体布局乱掉的情况出现,这对用户体验来说是极其不友好的,我们希望能够禁止微信的字体放大功能,下面我通过查找资料找到的一些解决方法 1.安卓手机禁止字体放大js代码 <span style="font-size:14px;">/* * 页面加入这段代码可使Android机器页面不再受到

  • javascript 图片放大缩小功能实现代码

    看JS源码: 复制代码 代码如下: // 放大缩小控制 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function(){ this.elem = document.getElementById("focusphoto&qu

  • 移动端点击图片放大特效PhotoSwipe.js插件实现

    PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看,滑动切换下一张,图片保存到本地. <style> .pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px} .pnav a{padding:4px} .pnav a.cur{background:#00

随机推荐