伸缩放大的js

window.onload = function() {
        var div1 = document.getElementById(‘div1‘);
        div1.onmouseover = function(){
             startMove(this,400);
        }
        div1.onmouseout = function(){
             startMove(this,200);
        }

function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(
                function() {
                    var speed = (iTarget-obj.offsetHeight)/3;
                    obj.style.height = obj.offsetHeight + speed + ‘px‘;
                    obj.style.width = obj.offsetWidth + speed + ‘px‘;                
                }, 30)
        };
    }

时间: 2024-10-10 12:14:21

伸缩放大的js的相关文章

纯js实用DOM元素放大缩小特效插件

Zoomerang.js是一款非常实用的HTML DOM元素放大缩小js特效插件.它可以将页面上的任何元素进行放大缩小.当某个元素处于Zoomerang的监听状态时,点击该元素可以将它放大到屏幕的中间,再次点击它又会回到原来的位置. 使用注意事项: 该元素放大缩小效果依赖于CSS Transform(IE浏览器至少要IE10才能支持) 在固定尺寸的元素上效果最佳:display: block.display: inline-block和img. 避免在很长的文本段上使用. 在mobile上使用时

H5 应用程序返回button的js代码设计,设计仿stack

history.back(); 该代码具有天然的缺陷,二手知道,于H5应用,尤其是模仿移动应用程序时,,这是不够. 在放大期js为了实现类似特征,请轻喷. 不多说,上代码: /** * Created by [email protected] on 2015/5/28. */ var historyUtils = { add : function (url) { var historyArray = historyUtils.getLocal(); if (!historyArray) { hi

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

Unity GUI自适应屏幕分辨率(一)布局自适应

这里我们先谈第一个问题坐标矩阵变化实现布局自适应. 选取基准尺寸 通常你需要选择一个基准的屏幕尺寸,象现在开发的应用也需要跨平台在iOS(iPhone/iPad)/Android都可以运行,我这边选取的是iphone4的屏幕尺寸: 480 * 320. 设计师设计的GUI的素材时就是按照这个尺寸来设计.但是紧接着的问题是如何保证它在其他不同尺寸/分辨率的平台上运行时不会出现各种诡异的位置大小错乱了. 举一个实际的例子来更好描述这个问题,比如我们的游戏是水平方向的, 然后游戏进行中间的暂停界面中,

Linux下PHP自动生成文章预览图,html转换成各种格式图片、PDF-----转自phpboy的文章

原文地址:http://www.phpboy.net/linux/575.html 用WordPress建立博客站点,选择了一套可以显示文章缩略图的模板,几经折腾将原有模板改得面目全非,最后还是直接上线吧,不想折腾了. 站点上线没几天,在公司做项目时,对图片做了一个放大的JS,自己博客也加上点击缩略图查看原图的功能,然后迅速的加了. 过了几天,突发奇想,想做文章预览图,即点击缩略图查看文章预览图,也就是你们现在首页和文章列表页看到的那个功能. 不费话了,不知道什么时候又要折腾... Linux下

jQuery照片伸缩效果,不是单纯的图片放大缩小,不影响其他元素的布局

之前在网上看到这种特效,无奈当时没有收藏网址,导致后来一度不知道这个特效是怎么实现的.今天特意在网上搜罗了一下,果然功夫不负有心人,被我找到了. 我也努力过自己尝试着写: 但只是单纯的图片放大,而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间). 后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的.其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是

js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用. 目标 获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上.下.左.右.放大.缩小). 难点 双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手. 双指特性 1.在快

JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能

 效果图: HTML结构如下: <div id="preview"> <div id="mediumDiv"> <img id="mImg" src="images/products/product-s1-m.jpg"/> <div id="mask"></div> <div id="superMask"></

js、css3实现图片的放大效果

今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mouseout事件,但是不知道如何使图片从中间放大,日后再行尝试吧,代码如下: <!DOCTYPE html> <html> <head> <title>网易图片动画</title> <style> div.img { width: 220px