图片缩放中心

图片缩放中心

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

图片缩放中心

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片放大居中</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	*{margin:0; padding:0;}
    ul,li{margin-right: 0; padding:0;}
    li{list-style:none;}
    a{text-decoration: none;}
    .clearfix:before,.clearfix:after{display: table; content: "";}  
    .clearfix:after{overflow: hidden; clear: both;}
    .clearfix{zoom:1;}
    body{width: 100%; height: 100%; background-color: #000; overflow:hidden;}
    #box{width:330px; margin:100px auto; position: relative;}
    #box li{width:100px; height:100px; background:red; margin:10px 10px 0 0; float:left; color:#fff; line-height:24px;}
</style>
</head>
<body>
<ul id="box" class="clearfix">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="js/app/move.js"></script>
<script>
    window.onload = function(){
        var aLi = document.getElementById('box').getElementsByTagName('li');
        var arr = [];
        var i=0;
        var zIndex = 1;

        for(i=0; i<aLi.length; i++){
            aLi[i].innerHTML = 'left:'+aLi[i].offsetLeft + 'px' + '<br>top:'+ aLi[i].offsetTop + 'px';
            arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
        }

        for(i=0; i<aLi.length; i++){
            aLi[i].index = i;
            aLi[i].style.left = arr[i].left + 'px';
            aLi[i].style.top = arr[i].top + 'px';
            aLi[i].style.position ='absolute';
            aLi[i].style.margin = 0;

            aLi[i].onmouseover = function(){
                this.style.background = 'green';
                this.style.zIndex=zIndex++;
                startMove(this,{
                    width:200,
                    height:200,
                    left:arr[this.index].left - 50,
                    top:arr[this.index].top - 50
                });
            }
            aLi[i].onmouseout = function(){
                this.style.background = 'red';
                startMove(this,{
                    width:100,
                    height:100,
                    left:arr[this.index].left,
                    top:arr[this.index].top
                });
            }
        }

    }
</script>
</body>
</html>

版权声明:本文博客原创文章。博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117400.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 网页升级中每天自动更新什么意思_快照搜索

    网页升级中每天自动更新什么意思_快照搜索网站被收录是百度蜘蛛爬行、记录、筛选的结果。网站被爬行后会在搜索引擎数据库中留下数据,当判断收录的内容达到用户要求质量时,网站的快照才会被释放出来,而快照的时候很多时候都是最初的爬行时间。这也是我们很多站长发现被收录后,快照时间不是当天时间的原因了。  在我们的认知中,每次百度快照的更新都是搜素引擎对网站数据的一次爬行收录过程,也就意味着更新就会带来网站排名的微调动。所以,更多时候

  • Windows Socket UDP协议(服务器与客户端)

    Windows Socket UDP协议(服务器与客户端)

  • Reaver v1.4 用法整理 含高级参数说明 pin必备资料「建议收藏」

    Reaver v1.4 用法整理 含高级参数说明 pin必备资料「建议收藏」闲话少叙使用方法:airmon-ngstartwlan0//启动mon0监控reaver-imon0-bMAC-a-S-vv//普通用法 如果,90.9%进程后死机或停机,请记下PIN前四位数,用指令:reaver-imon0-bMAC-a-vv-pXXXX(PIN前四位数) 其他命令airodump-ngmon0用来扫

  • Mac系统Unity3D中的快捷键

    Mac系统Unity3D中的快捷键command+N新建场景command+O打开场景command+S保存场景Shift+command+S场景另存为Shift+command+B编译设置command+B编译并运行command+zUndo撤销shift+command+zRedo撤销command+XCut剪切command

  • 独立成分分析 ( ICA ) 与主成分分析 ( PCA ) 的区别「建议收藏」

    独立成分分析 ( ICA ) 与主成分分析 ( PCA ) 的区别「建议收藏」1.前言参考资料:https://www.zhihu.com/question/28845451书上写的是:1.主成分分析假设源信号间彼此非相关,独立成分分析假设源信号间彼此独立。2.主成分分析认为主元之间彼此正交,样本呈高斯分布;独立成分分析则不要求样本呈高斯分布。在利用最大化信息熵的方法进行独立成分分析的时候,需要为源信号假定一个概率密度分布函数g’,进而找出使得g(Y)=g…

  • python正则表达式匹配 模式匹配[通俗易懂]

    python正则表达式匹配 模式匹配[通俗易懂]Python正则式的基本用法初学Python,对Python的文字处理能力有很深的印象,除了str对象自带的一些方法外,就是正则表达式这个强大的模块了。但是对于初学者来说,要用好这个功能还是有点难度

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号