<!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. 一切皆WEB

    所有应用都应该成为Web应用吗?当然不是.总有一些重要的例外,有些种类的软件跟网络也毫无关系.但是,这些是少数情况,是一些特殊应用.它们固然是重要的小生态环境,但不管怎么说,就只是“小生态”. 如果你 ...

  2. MySQL 5.7 for Windows 解压缩版 MySQL 服务无法启动

    MySQL 5.7 for Windows 解压缩版配置安装 http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html basedi ...

  3. Android Studio更新失败

    解决方案: Windows平台下 如果是运行的Android studio是32位的需要在修改一下文件: 在andriod studio的启动目录下.找到studio.exe.vmoptions这个文 ...

  4. 如何在eclipse中安装Jess

    如何在eclipse中安装Jess 浏览:49 | 更新:2014-05-12 16:39 这个文章帮了不少忙,感谢! 但经我实践,还要把插件那些文件向/dropins/sdk下也放一份,才能成功. ...

  5. YUV422蓝屏显示输出功能辅助调试

    YUV422蓝屏显示输出功能辅助调试 YUV422有YUYV,YVYU,UYVY,VYUY四种,以下笔者就就以UYVY为例介绍一下数据构成.因为常常要跟视频输入打交道,所以YUV422这种常见的视频信 ...

  6. Dragons

    http://codeforces.com/problemset/problem/230/A Dragons time limit per test 2 seconds memory limit pe ...

  7. vs调试 本地IIS

    http://www.cnblogs.com/minesky/p/3389955.html 准备篇-配置IIS环境 网站发布到测试环境或者生产后,经常会出现各种让人解不开的疑问,想调试也调试不了.可以 ...

  8. sigar监控

    相关参照博客: http://liningjustsoso.iteye.com/blog/1254584 http://blog.csdn.net/aoxida/article/category/12 ...

  9. C# - 系统类 - String类

    String类 ns:System String类封装了一系列不能被改变的Unicode字符序列 字符属于引用类型 但它又具有值类型的行为 固定不变意味着 一旦在托管堆中分配了一块内存来存储字符 字符 ...

  10. 神奇的 BlocksKit（1）：源码分析（上）

    高能预警:本篇文章非常长,因为 BlocksKit 的实现还是比较复杂和有意的.这篇文章不是为了剖析 iOS 开发中的 block 的实现以及它是如何组成甚至使用的,如果你想通过这篇文章来了解 blo ...