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. struts2学习笔记 day02 获取参数 访问ServletAPI 结果类型

  2. win10子系统linux编译ffmpeg

    android-ndk-r14b(linux版) ffmpeg-4.0 开启win10子系统(控制面板->程序和功能->启用或关闭Windows功能 然后在 适用与 Linux 的 Win ...

  3. python使用rabbitmq实现简单的消息转发

    准备: 1.下载elang语言的支持环境http://www.erlang.org/download.html (rabbitmq使用它开发的) 2.下载rabbitmq软件http://www.ra ...

  4. 软件管理命令-- rpm

    RPM(红帽软件包管理器) 安装软件 rpm -ivh filename.rpm 升级软件 rpm -Uvh filename.rpm 卸载软件 rpm -e filename.rpm -i 安装一个 ...

  5. GCC在windows下的配置

    http://blog.csdn.net/lan120576664/article/details/46806991 http://blog.csdn.net/shaynerain/article/d ...

  6. 自定义xml配置文件之dtd文件校验

    用了很多第三方库,也看了些源码,总是想如果自己写一个类似的库,读取xml配置文件(properties配置文件比较简单) 该如何给配置文件添加头,添加校验,因为xml配置文件相对于properties ...

  7. Redis的下载安装

    Redis官网只提供了Linux版,MicroSoft自己搞了个Windows版,可在GitHub下载: https://github.com/microsoftarchive/redis/relea ...

  8. [windows]win7设置wifi热点

    1.启用并设定虚拟WiFi网卡:netsh wlan set hostednetwork mode=allow ssid=whylaughing key=124025621 2.开启无线wifi网络: ...

  9. 学习用5W1H来管理自己的项目/工作

    学习用5W1H来管理自己的项目/工作   最近开始需要系统化的思维模型,这只是一个开始,一下用脑图的形式来简介5W1H的具体内容: 先写xmind思维树的文本导出,后面附上图片.^ _ ^ 5W1H ...

  10. 增加和减少mongodb复制集中的节点

    MongoDB Replica Sets不仅提供高可用性的解决方案,同时也提供负载均衡的解决方案,增减 Replica Sets节点在实际应用中非常普通.例如,当应用的读压力暴增时,3台节点的环境已不 ...