-
<html>
-
<head>
-
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
-
<title>放大缩小容器：仿动画</title>
-
<styletype="text/css">
- *{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;}
-
</style>
-
</head>
-
<body>
-
<pid="text"></p>
-
<divid="box1"onmouseover="pr_box('box1',150);"onmouseout="pr_box('box1',100);">
-
<h2>标题</h2>
-
<p>测试鼠标滑动效果</p>
-
</div>
-
<divid="box2"onmouseover="pr_box('box2',150);"onmouseout="pr_box('box2',100);">
-
<h2>标题</h2>
-
<p>测试鼠标滑动效果</p>
-
</div>
-
<divid="box3"onmouseover="pr_box('box3',150);"onmouseout="pr_box('box3',100);">
-
<h2>标题</h2>
-
<p>测试鼠标滑动效果</p>
-
</div>
-
<divid="box4"onmouseover="pr_box('box4',150);"onmouseout="pr_box('box4',100);">
-
<h2>标题</h2>
-
<p>测试鼠标滑动效果</p>
-
</div>
-
</body>
-
<scripttype="text/javascript">
- functiongetDefaultStyle(obj,attribute){//返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
- returnobj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
- }
- functionpr_box(id,e){
- clearInterval(document.getElementById(id).maxmin);
-
varobj=document.getElementById(id);
-
varcfont=getDefaultStyle(obj,"fontSize");//得到默认的大小:附单位
-
varcp=cfont.replace(/[0-9]|[\.]/g,"");//得到默认的单位
-
varfsize=parseFloat(cfont);//得到默认的大小数值
-
vars=10;//运动速度
- if(!obj.fsizeTmpe){//存储默认大小数值
-
obj.fsizeTmpe=fsize;
- }
- if(!objfont){//如果没有设置当前大小，则赋予其默认大小
-
obj.style.fontSize=cfont;
- }
-
vare=obj.fsizeTmpe*e/100;//需要改变到的大小数值
-
varobjfont=parseFloat(obj.style.fontSize);//得到当前的大小
-
if(e<obj.fsizeTmpe){obj.maxmin=setInterval(function(){pr_min(obj,e,cp)},s);}
-
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_max(obj,obj.fsizeTmpe,cp)},s);
- }
-
if(objfont>obj.fsizeTmpe){
-
obj.maxmin=setInterval(function(){pr_min(obj,obj.fsizeTmpe,cp)},s);
- }
- }
- }
- functionpr_max(obj,e,cp){
- if(!obj.fs){
-
objobj.fs=obj.style.fontSize;
- }
-
varobjfont=parseFloat(obj.fs);
-
if(e>objfont){
-
//document.getElementById("text").innerHTML+="放大-原始值："+objfont+"+递增值："+e/10+"<br/>";
-
obj.fs=objfont+e/10+cp;
-
objobj.style.fontSize=obj.fs;
- }
-
elseif(e<objfont){
-
obj.fs=e+cp;
-
objobj.style.fontSize=obj.fs;
- }
- else{clearInterval(obj.maxmin);}
- }
- functionpr_min(obj,e,cp){
- if(!obj.fs){
-
objobj.fs=obj.style.fontSize;
- }
-
varobjfont=parseFloat(obj.fs);
-
if(e<objfont){
-
//document.getElementById("text").innerHTML+="缩小-原始值："+objfont+"-递减值："+e/10+"<br/>";
-
obj.fs=objfont-e/10+cp;
-
objobj.style.fontSize=obj.fs;
- }
-
elseif(e>objfont){
-
obj.fs=e+cp;
-
objobj.style.fontSize=obj.fs;
- }
- else{clearInterval(obj.maxmin);}
- }
-
</script>
-
</html>
http://www.corange.cn/archives/2008/10/1939.html
分享到：
相关推荐
放大缩小容器：仿动画 – www.jb51.net *{margin:0;padding:0;} body { padding:1em; } h2 { font-size:2em; } div { display:inline-block; width:10em; padding:.5em; margin-bottom:1em; overflow:hidden; ...
"仿抖音个人中心，下拉放大缩小效果"是一个典型的例子，它实现了用户在个人中心页面下拉时，页面内容放大，松手后恢复原状的弹性动画效果。这种效果通过巧妙地运用Android Design Support Library中的`...
这个项目专注于创建一个可拖拽、放大和缩小的地图功能，让我们深入了解一下这些技术细节。 首先，我们要明白地图的基本原理。地图是通过经纬度坐标系统来定位地球表面的点，而Web上的地图通常是通过切片（tiles）...
在微信小程序中实现滑动放大缩小效果主要依赖于swiper组件，这是微信小程序中一个用于轮播展示图片或者其他内容的组件。通过合理配置swiper组件的属性和绑定事件，可以实现用户在滑动时图片放大缩小的交互效果。 ...
在网页设计中，实现图片的放大缩小功能是提高用户体验的重要一环，特别是对于展示细节丰富的图像，如新闻网站上的图片。本项目旨在模仿新浪网的图片放大缩小效果，让用户能够轻松查看图片细节，同时保持良好的浏览...
放大缩小容器 *{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:...
在本文中，我们将深入探讨如何在 UniApp 中实现视图容器的随机拖拽滑动和放大缩小功能，主要关注 `movable-view` 和 `movable-area` 这两个组件。这两个组件是 UniApp 提供的用于创建交互式、可移动和可缩放视图的...
这个"jquery图片放大缩小"的项目就是一个典型的示例，它实现了当鼠标经过图片时，图片在div容器内自动放大的功能。下面我们将详细探讨相关的jQuery知识、图片处理技巧以及如何在HTML中应用这些技术。 首先，jQuery...
然后，通过JavaScript来改变图片的大小，实现放大和缩小效果。这可以通过修改图片的`style.width`和`style.height`属性来完成。还可以使用CSS的`transform-origin`属性来控制缩放的中心点。 2. **图片放大**：当...
标题和描述提到的"仿微信放大缩小图片，图片预览功能"，正是Photoswipe的一个核心特性，它可以为用户提供与微信图片浏览相似的交互体验。 首先，Photoswipe提供了丰富的API和自定义选项，开发者可以根据项目需求...
总结来说，使用jQuery实现手机网页上的图片放大缩小功能主要涉及以下几个核心知识点： 1. jQuery选择器和事件监听：用于获取和操作DOM元素，响应用户的点击或触摸。 2. CSS变换：通过`transform`属性实现图片的缩放...
本示例中的“jquery div容器拖拽放大缩小浮动层代码”是一个利用jQuery实现的功能，允许用户对div元素进行拖动、缩放以及使其在页面上浮动。下面将详细介绍这一功能的实现原理和相关知识点。 1. **jQuery选择器**：...
本篇文章将详细讲解如何使用ArcGIS for Android实现地图的定位以及放大缩小功能。 首先，我们需要理解ArcGIS for Android的基本架构。ArcGIS的核心组件包括Map、MapView和LocationDisplay。Map是地图内容的容器，...
标题“WPF可移动和放大缩小控件”暗示我们将探讨如何实现这一功能，这通常涉及到自定义控件或者使用现有的WPF控件进行扩展。 描述中提到“根据Thumb控件设计，添加事件”，这意味着我们将通过利用`Thumb`控件及其...
在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多强大的功能，其中之一就是能够实现图片的放大缩小效果。这个效果不仅可以提升用户的交互体验，还能为网站增添视觉吸引力。本篇我们将深入探讨如何...
这个压缩包中的资源提供了一个实现滚动放大缩小和拖动查看图片的例子。下面将详细解释这个实现过程及其涉及的关键知识点。 首先，`test.html`是主HTML文件，它包含了整个预览功能的基本结构。在HTML中，你需要创建...
总的来说，使用jQuery Zoom插件实现图片放大缩小功能涉及以下几个步骤：引入jQuery和插件库，设置HTML结构，初始化插件，并可选地调整配置选项。这个过程结合了HTML、CSS和JavaScript，展示了前后端技术在增强网页...
"图片放大缩小"这个主题涉及到JavaScript（JS）技术，用于在不失真的情况下等比例地调整图片大小。JavaScript是一种广泛使用的客户端脚本语言，它允许我们在用户的浏览器上执行动态操作，如改变元素的尺寸、响应用户...