<!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. [USACO08JAN]电话线Telephone Lines

    多年以后,笨笨长大了,成为了电话线布置师.由于地震使得某市的电话线全部损坏,笨笨是负责接到震中市的负责人.该市周围分布着N(1<=N<=1000)根据1……n顺序编号的废弃的电话线杆,任意 ...

  2. 从bug中学习怎么写代码

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:从bug中学习怎么写代码.

  3. SmartbBear给出的11条代码审查最佳实践

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:SmartbBear给出的11条代码审查最佳实践.

  4. 深入浅出Android动态载入jar包技术

    在实际项目中.因为某些业务频繁变更而导致频繁升级client的弊病会造成较差的用户体验,而这也恰是Web App的优势,于是便衍生了一种思路.将核心的易于变更的业务封装在jar包里然后通过网络下载下来 ...

  5. Delphi调用C++写的dll示例

    最近做一个读市民卡的项目,读卡器公司提供的读市民卡dll是用C++写的. 下面记录一些自己的心得,供需要的朋友参考. 声明dll函数要加上stdcall关键字,否则可能会报地址非法的错误. 代码: u ...

  6. Java的递归算法

    递归算法设计的基本思想是:对于一个复杂的问题,把原问题分解为若干个相对简单类同的子问题,继续下去直到子问题简单到可以直接求解,也就是说到了递推的出口,这样原问题就有递推得解. 关键要抓住的是: (1) ...

  7. 电子设计省赛--SPWM（死区时间）

    //2014年4月17日 //2014年6月20日入"未完毕" //2014年6月21日 有两种方案:双定时器和单定时器 学长表示双定时器输出波形不好,还是单定时器好. 原理例如以 ...

  8. phpmailer,smtp发送邮件实例(转)

    一,用phpmailer发送邮件 查看复制打印? <?php   include "class.phpmailer.php";    //包函邮件发送类      //邮件发 ...

  9. QT软键盘

    如何实现鼠标单击弹出软键盘 默认情况下,如果当前编辑框无焦点,则需要鼠标点击两次才弹出软键盘,其中第一次是让该编辑框获得焦点,第二次点击才弹出软键盘: 如果当前编辑框已经获得焦点,则点击一次就会弹出软 ...

  10. c++基础语法 构造函数 析构函数 类的组合

    1 构造函数 1.不能指定任何返回值,甚至连void都不能有. 2.与Java不同,c++不同new对象,对于无参的构造函数声明对象时括号应该省略. 2 析构函数 1. 前加~,不能有参数,不能有返回 ...