<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        width: 400px;
        position: relative;
        margin: 100px auto;
    }

    li {
        width: 100px;
        height: 100px;
        background: red;
        margin: 10px;
        float: left;
        list-style: none;
        z-index: 1
    }
    </style>
    <script>
    window.onload = function() {
        var oUl = document.getElementById("test");
        var oLi = oUl.getElementsByTagName('li');
        var curZIndex = 2;
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].style.left = oLi[i].offsetLeft + "px";
            oLi[i].style.top = oLi[i].offsetTop + "px";

        }
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].style.position = "absolute";
            oLi[i].style.margin = 0

            oLi[i].onmouseover = function() {
                this.style.zIndex = curZIndex++;
                this.style.width = 150 + "px";
                this.style.height = 150 + "px";
                this.style.marginLeft = -25 + "px";
                this.style.marginTop = -25 + "px";
                this.style.backgroundColor = "blue";

            }

            oLi[i].onmouseout = function() {
                this.style.width = 100 + "px";
                this.style.height = 100 + "px";
                this.style.marginLeft = 0 + "px";
                this.style.marginTop = 0 + "px";
                this.style.backgroundColor = "red";
            }

        }

    }
    </script>
</head>

<body>
    <ul id="test">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

js hover放大效果的更多相关文章

  1. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  2. js实现放大效果

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>放 ...

  3. 鼠标hover元素scale/zoom中心点放大效果实例页面

    CSS代码: .box { /* 可见视觉区域 */ width: 480px; height: 250px; position: relative; overflow: hidden; cursor ...

  4. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  5. css3放大效果

    参考案例: http://www.web-designers.cn/ http://www.harmay.com/ 鼠标经过图片,图片放大. 1.html: <body> <div& ...

  6. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

  7. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  8. 用CSS3实现对图片的放大效果

    用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -moz-tra ...

  9. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. Zabbix lld发现磁盘监控

    一.软件版本 操作系统:CentOS-6.5-x86_64 zabbix版本:3.0.3 二.脚本编写: 1.python版本: #!/usr/bin/env python import json i ...

  2. 性能优化-列表类型转换(ConvertList<TSource, TResult>)

    之前,在项目中看到过一段通用列表类型转换的代码,直接的实现便是用反射.大概看了下,它用在领域模型转DTO和SOA接口中契约实体的转换等等.首先,它使用了反射,其次,还是在循环中使用,便有了优化的想法. ...

  3. 有关UIImageView+AFNetworking 下载图片的线程问题

    今天写了一个demo,从服务器获取图片,然后显示在cell上,大家都知道cell的重用机制,当往下拉的时候,上面的cell遮住了,下面的cell就会重用被遮住的cell, 贴代码: NSString ...

  4. [Javascript] Fetch API

    fetch() does the same thing as XHR, but fetch return a promise. fetch('password.txt', { 'method': 'P ...

  5. perl 线程创健

    http://www.cnblogs.com/zhangchaoyang/articles/2057178.html

  6. partition例子

    10.13 标准库定义了名为partition的算法,它接受一个谓词,对容器内容进行划分,使得谓词为true的值会排在容器的前半部分,而使谓词为false的值会排在后半部分.算法返回一个迭代器,指向最 ...

  7. 动作-CCActionInterval之CCGridAction家族

    CCGrid3DAction // 作用:x轴3D反转特效 CCActionInterval *flipX3D= CCFlipX3D::create(4); //    作用:Y轴3D反转特效 CCA ...

  8. ArcPy 函数列表（按字母顺序）

    Function name Category AddError Messages and error handling AddFieldDelimiters Fields AddIDMessage M ...

  9. angular下H5上传图片（可多张上传）

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...

  10. 安卓项目-利用Sqlite数据库，开发新闻发布系统

    本教程致力于程序员可以快速的学习安卓移动端手机开发. 适合于已经习得一种编程语言的同仁. 更多志同道合,想要学习更多编程技术的大神们. 小弟不才,麻烦关注一下我的今日头条号-做全栈攻城狮. 本文章是基 ...