1、元素居中放大：

　　1>除了要改变元素的宽高以外，还要改变元素的定位（left,top）,如果图片放大一倍，那么位移放大宽高的一半。

　　2>元素必须是定位的。所以，在css中设置为浮动布局，需要使用js来转换布局，相对用户眼睛的位置保持不变

　　注意：在用js去设置css样式的时候，在同一个代码块中，有些css样式的设置的权限要高于其他样式。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

            padding: 0;

        }

       li{

           width: 100px;

           height: 100px;

           background-color: red;

           float: left;

           list-style: none;

           margin:10px 0 0 10px ;

       }

        #ul1{

            margin: 0;

            padding: 0px;

            width: 330px;

            margin: 100px auto 0;

            position: relative;

        }

    </style>

</head>

<script src="startMove.js"></script>

<script>

    window.onload=function () {

        var oUl=document.getElementById('ul1');

        var aLi=oUl.getElementsByTagName('li');

        var zIndex=1;

        for(var i=0;i<aLi.length;i++){

            aLi[i].style.left=aLi[i].offsetLeft+'px';

            aLi[i].style.top=aLi[i].offsetTop+'px';

            aLi[i].pos={left:aLi[i].offsetLeft,top:aLi[i].offsetTop};

        }

        for (var i=0;i<aLi.length;i++){

            aLi[i].style.position='absolute';

            aLi[i].style.margin='0px';

            aLi[i].onmouseover=function () {

                this.style.backgroundColor='blue';

                this.style.zIndex=zIndex++;

                startMove(this,{

                    width:200,

                    height:200,

                    left:this.pos.left-50,

                    top:this.pos.top-50

                });

            }

            aLi[i].onmouseout=function () {

                this.style.backgroundColor='red';

                startMove(this,{

                    width:100,

                    height:100,

                    left:this.pos.left,

                    top:this.pos.top

                });

            }

        }

    }

</script>

<body>

    <ul id="ul1">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>

 

利用js实现图片展开与收缩的更多相关文章

  1. 利用js将图片地址进行转义

    利用js将图片地址进行转义 在业务中经常需要将图片从后台获取,然后在前台显示.其中后台存取图片主要分为两种,一种是数据库中获取图片的地址,第二种是存取图片内容的信息.这次主要是前台代码处理第一种情况. ...

  2. 利用JS实现图片的缓存

    web页面使用HTML的<img>元素来嵌入图片,和所有HTML元素一样,<img>元素也是可以通过脚本来操控的(设置元素的src属性,将其指向一个新的URL会导致浏览器载入并 ...

  3. 利用js使图片外层盒子的高等于适应图片的高

    JS代码如下:<script> $(window).load(function(){ var width=$(window).width(); var img_1=$(".hot ...

  4. js 实现内容的展开和收缩

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. DataGridView之行的展开与收缩

    很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...

  6. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  7. 一款由jQuery实现的手风琴式相册图片展开效果

    之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...

  8. 利用Photoshop修改图片以达到投稿要求

    摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...

  9. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. SpringBoot | Velocity template

    SpringBoot版本: <parent> <groupId>org.springframework.boot</groupId> <artifactId& ...

  2. [題解]（狀壓/水）luogu_P1879玉米田

    大水題然而因為智障的錯誤调了半天......n,m别反着输入啊......內外循環和狀態數都不等價 别的就是記錄一下每一行不可行的點,也狀壓一下,dp的時候判一下即可 #include<bits ...

  3. Codeforces 526F Pudding Monsters

    先把题目抽象一下: 有一个静态的数组,求有多少个区间[i,j]满足:j-i==max{ai,...,aj}-min{ai,...,aj} 也就是要求max-min+i-j==0的区间数 所以肿么做呢? ...

  4. DB2 错误 54001

    DB2 语句太长或者太复杂 SQLSTATE=54001 对数据库的参数的修改: db2 update db cfg for DB_NAME using STMTHEAP 4096 db2 updat ...

  5. linux资源性能指标

    1.cpu Running:正在运行的进程 Waiting:已准备就绪,等待运行的进程 Blocked:因为等待某些事件完成而阻塞的进程,通常在等待I/O  命令获取数据: vmstat 1其中: u ...

  6. [已读]JavaScript DOM编程艺术

    看到过很多人将它作为推荐入门书籍,当时我刚看完ppk和javascript精粹,于是看到这本就觉得很一般了.怎么说,它适合基础.

  7. 如何理解linux多用户多任务

    Linux 的单用户.多任务: 容易理解. Linux 的多用户.多任务 举个例子,比如LinuxSir.Org 服务器,上面有FTP 用户.系统管理员.web 用户.常规普通用户等.在同一时刻,比如 ...

  8. 《javascript设计模式》笔记之第五章：单体模式

    一:单体的基本结构: 最简单的单体,实际就是一个对象字面量: var Singleton = { attribute1: true, attribute2, method1: function() { ...

  9. linux 简单的mysql备份和导入，以及文件的备份和导入

    一,数据库的备份与导入 1),数据库的备份 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 例:mysqldump -u dbadmin -p myblo ...

  10. Asp_基础之C#基础

    1.两个练习题 1)编程实现46天,是几周几天 int days = 46: int weeks = days / 7: int day =days % 7: //Console.WriteLine( ...