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. C - Heavy Transportation

    //改版dijkstra #include <iostream> #include <algorithm> #define Faster ios::sync_with_stdi ...

  2. html Css PC 移动端 公用部分样式代码整理

    css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li ...

  3. dzzoffice 任意文件删除漏洞分析

    dzzofiice 任意文件删除漏洞 \upload\dzz\system\dzzcp.php第199行 elseif($do=='deleteIco'){    $arr=array();    $ ...

  4. 阿里云-域名免费申请ssl证书过程

    1.运行证书服务docker docker run --entrypoint="/bin/sh" -it --name certbotsh certbot/certbot:late ...

  5. 使用Yeoman 创建 angular应用

    一.安装 Yeoman npm install yo -g 如果提示当前nodejs版本和npm版本太低,先升级下再安装yeoman. 安装成功后,默认只有webapp和Mocha这两个生成器. 二. ...

  6. GDB 格式化结构体输出

    转载:http://blog.csdn.net/unix21/article/details/9991925 set print addressset print address on打开地址输出,当 ...

  7. awk一些简单命令

    最简单地说, AWK 是一种用于处理文本的编程语言工具.AWK 在很多方面类似于 shell 编程语言,尽管 AWK 具有完全属于其本身的语法. 尽管操作可能会很复杂,但命令的语法始终是: awk ' ...

  8. ［异常］undefined method `visit' for #<RSpec::Core::ExampleGroup::Nested_1:0x16529f8 @example=nil>

    在进行Rspec 编译测试: bundle exec rspec spec/requests/static_pages_spec.rb 提示错误: FF Failures: 1) Static pag ...

  9. 爬虫requests库的基本用法

    需要注意的几个点: 1.后面的s是一个虚拟目录 2.url后面不用加问号,发起请求的时候会自动帮你加上问号 get_url = 'http://www.baidu.com/s' 3. url的特性:u ...

  10. Django之Form组件整理

    搬运自:http://www.cnblogs.com/haiyan123/p/7795771.html 一.Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验 ...