<!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. Oracle数据库字符串连接方法

    转至:http://database.51cto.com/art/201011/232267.htm 和其他数据库系统类似,Oracle字符串连接使用“||”进行字符串拼接,其使用方式和MSSQLSe ...

  2. Notepad++中的颜色属性大全

    Indent guideline style  缩进参考线的颜色 Brace highlight style 鼠标指针在框架左右时框架的颜色(如css中{}   js中的()) Bad brace c ...

  3. 使用freemarker生成html

    http://herryhaixiao.iteye.com/blog/677524 由于freemarker这个技术很久很久就有了,注释我就没写得很详细了,相信大家都看得懂.下面就直接上代码以及一些代 ...

  4. 【05】了解C++默默编写并调用那些函数

    1.如果没有声明copy构造方法,copy赋值操作符,和析构方法,编译器会自动生成这些方法,且是inline. 2.如果没有声明任何构造方法,编译器会自动生成一个default构造方法,且是inlin ...

  5. 【solr基础教程之九】client

    一.Java Script 1.因为Solr本身能够返回Json格式的结果,而JavaScript对于处理Json数据具有天然的优势,因此使用JavaScript实现Solrclient是一个非常好的 ...

  6. Android SDK Manager无法更新问题解决

    有时候在网络不好的情况下,android sdk manager更新可能一直报错.原因跟国内对于google相关服务的访问受限有关系,需要设置代理访问. 最近也遇到了这个问题.解决方法如下. 启动An ...

  7. HDU3746 Cyclic Nacklace 【KMP】

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. Android Studio快捷键指南（本文持续更新）

    这是我在使用Android Studio过程中接触到的一些快捷键,和大家分享,后面会继续完善此文,也欢迎大家踊跃补充,一起完善. 快捷键 删除并剪贴行:Ctrl+X 复制一行:Ctrl+D 代码格式整 ...

  9. 快速安装VIM开发环境

    *Mac上当前用户的.vim目录打包*:附件地址:http://pan.baidu.com/s/1sj5FjZJ 1. 备份好系统的原来的vim配置文件,以备恢复使用:         mv ~/.v ...

  10. SQL错误：sql server 目录名无效

    今天遇到一个错误,在网上找了半天,还有人说需要重装sql.我出错误的是网站服务器..重装影响太大了.想找一个比较不影响网站运作的办法.终于也不负我努力(啊喂!其实满百度都是可是你看不懂好吧!)找到了一 ...