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. bzoj2502清理雪道

    传送门 好题啊,由于每个点既可以进,也可以出,就可以新建一个源点和汇点,对于每个点都连边,然后就是最小流板子了. 代码: #include<cstdio> #include<iost ...

  2. css实现发光的input输入框

    效果图截图: 案例代码示下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 消息队列介绍、RabbitMQ&Redis的重点介绍与简单应用

    消息队列介绍.RabbitMQ&Redis的重点介绍与简单应用 消息队列介绍.RabbitMQ.Redis 一.什么是消息队列 这个概念我们百度Google能查到一大堆文章,所以我就通俗的讲下 ...

  4. PARTITION RANGE ALL 的优化

    建议如下: 检查数据库的cpu 消耗 ,Sql_id :***** 消耗过多资源,这个新上线sql, 20号才上线,是对log 进行分析,平均每次执行时间300s.,使用的是PARTITION RAN ...

  5. [译]Understanding ECMAScript6 基本知识

    基本知识 ECMAScript 6在ECMAScript 5之上做了大量的改变.一些改变很大,比如添加新的类型或者语法,而其它的非常小,提供了语言之上的渐进改进.这个章节包含了那些渐进改进,它们可能不 ...

  6. Centos7中查看IP命令：IP addr

    Centos的IP地址是网卡的inet 的值,很明显第一个是本地服务地址,不是我们想要的.第二个没有inet这个属性值. 接下来配置网卡,我的网卡是上图黄色方框中第一行开始的那一部分:eno16777 ...

  7. bootstrap-table 基础用法

    1.需要添加的引用. <script src="@Url.Content("~/js/jquery-2.1.1.js")"></script& ...

  8. hdoj薛猫猫杯程序设计网络赛1003 球球大作战

    思路: 二分,check函数不是很好写. 实现: 1. #include <bits/stdc++.h> using namespace std; typedef long long ll ...

  9. sql server 2008怎么设置不允许windows身份验证

  10. spring 上传附件

    jsp: <form class='uk-form' action="savelead" method="post" enctype="mult ...