利用js实现图片展开与收缩

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>

 

时间: 2024-10-17 22:04:34

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

利用JS实现图片的缓存

web页面使用HTML的<img>元素来嵌入图片,和所有HTML元素一样,<img>元素也是可以通过脚本来操控的(设置元素的src属性,将其指向一个新的URL会导致浏览器载入并展示一张新的图片).为了让图片缓存起来,客户端JS定义了一个API,首先利用Image()构造函数来创建一个屏幕外图片对象,之后将该对象的src属性设置 期望的URL,由于图片元素并没有添加到文档中,因此它是不可见的,但是浏览器还是会加载图片并将其缓存起来. //需要预加载的图片路径存放在数组里 var im

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

在业务中经常需要将图片从后台获取,然后在前台显示.其中后台存取图片主要分为两种,一种是数据库中获取图片的地址,第二种是存取图片内容的信息.这次主要是前台代码处理第一种情况.数据库存取的是地址,然后根据前台规则,将图片所在的地址进行转义. 主要代码如下: 1 function test(){ 2 var x = "img/2.jpg"; 3 var arr = x.split(""); 4 for(var i=0;i<arr.length;i++){ 5 if(

多图片展开收缩实例

运用运动框架进行多图片展开收缩的实例展示 在展示时未插入图片用ul li 来代替 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多图片的展开收缩</title> <style type="text/css"> body {margin:0;} #ul1 {margin:0

【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)

转载自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括,如果你的项目已经在google play 或Apple Store 等平台上架了,那么当你项目需要做一些活动或者修改前端的一些代码等那么你需要重新提交一个新版本给平台,这时候你的上架时候是个不确定的时候,具体什么时候能上架,主要跟平台有关,你再着急,也没有用的. 那么如果你的项目是使用脚本语言进行

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将其他的图片收缩起来. 在线预览   源码下载 实现的代码 html代码: <article id="home"> <header> </header> <article id="gallery"> <section&

分别用css3、JS实现图片简单的无缝轮播功效

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

jQuery图片旋转展示收缩效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏 这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的"块儿"是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按一次按键之后他像下跳一格这样的就非常好实现了. 通过我目前会的知识,实现的步骤大概是这样的: 建一个4X4的表格,制作2张150X100的图片,一张全白色,一张全黑色,命名为0.JPG,1.JPG 就是说当文件名为0的时候就是白色的