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. [Python]'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape 错误

    f = open('C:\Users\xu\Desktop\ceshi.txt') 这时报标题的错误信息 f = open(r'C:\Users\xu\Desktop\ceshi.txt') 改成这个 ...

  2. JAVA 操作远程mysql数据库实现单表增删改查操作

    package MysqlTest; import java.sql.DriverManager; import java.sql.ResultSet; import com.mysql.jdbc.C ...

  3. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  4. A.走方格

    链接:https://ac.nowcoder.com/acm/contest/368/A 题意: 在一个n*n的方格中,你只能斜着走. 你还有一次上下左右走的机会 给你一个起点(sx,sy),和终点( ...

  5. 个人常用Git操作记录

    本地分支与远程分支建立联系 Git - 新建本地分支与远程分支关联问题 查看本地分支与远程分支关系: git branch -vv 当前分支与远程分支建立关系: git branch --set-up ...

  6. csu 1552: Friends 二分图 + Miller_Rabin

    http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1552 把那n个数写两次,分成相同的两堆,判断相加是质数的,连一条边,然后找最大匹配,ans = ...

  7. NOIP数学相关模板整理

    $O(n)$递推求逆元 #include<cstdio> #include<cstring> #include<algorithm> using namespace ...

  8. listView onItemClick失效

    1.先检查list是否设置监听onItemClick事件 2.ListView中有按钮时,会使子项的onItemClick事件无效,如果onItemClick不能触发,在ListView子项目布局文件 ...

  9. HDinsight 系列-使用证书登陆中国区Azure

    使用azure explorer 插件的时候,登陆默认是globle的azure网站,中国区的azure不能直接使用 可以使用auth文件认证 auth 文件生成 az cloud show -o j ...

  10. 如何让Sublime Text编辑器支持新的ABAP关键字

    ABAP 7.40推出了许多新的关键字 - keyword,您的Sublime Text可能无法针对这些新关键字实现期望的语法高亮显示(syntax highlight)或者自动完成(auto com ...