<!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. hdoj 2579 Dating with girls(2)【三重数组标记去重】

    Dating with girls(2) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  2. Xcode5 上使用Base SDK iOS6程序和iOS6模拟器

    Xcode 5默认自带SDK 7.0,升级Xcode 5后,Xcode.5就没了,这样我想编译SDK 6.x的程序就难办了(除非同时安装Xcode 4.x和Xcode 5.x两个版本Xcode).其中 ...

  3. 49. Sort Letters by Case

    最后更新 一刷 还是Partition,只不过这次是按照大小写字母来. public class Solution { public void sortLetters(char[] chars) { ...

  4. redis整合spring @Bean写法

    jedis是一款java连接redis的客户端,spring基于jedis进行了封装,提供了简洁的操作redis的方法. 使用maven进行管理jar包之间的依赖: <dependency> ...

  5. SVN eclipse插件错误

    部分文章转载自:http://www.bkjia.com/ASPjc/1015687.html 出现如下问题该怎么做: 1.在Windows--Preferences--Team--SVN--接口换成 ...

  6. 【转】ST05

    一. SQL Trace 通过SQL跟踪,可以具体查询数据来源于哪些数据库表, 例如:可以查询某个交易(或几个交易)所涉及的数据库表. 为了减少在最终查询结果的工作量,要在屏幕显示你所要显示的数据的前 ...

  7. WINFORM 自定义开关按钮控件-

    本文章转载:http://www.cnblogs.com/feiyangqingyun/archive/2013/06/15/3137597.html OK,大工告成,上图演示效果. 源码下载:htt ...

  8. Swift编程语言的相关资料

    苹果官方Swift文档<The Swift Programming Language> 苹果开发人员Swift文档及介绍 网友整理的Swift中文文档<Apple Swift编程语言 ...

  9. Apache Mina 2.x 框架+源码分析

    源码下载 http://www.apache.org/dyn/closer.cgi/mina/mina/2.0.9/apache-mina-2.0.9-src.tar.gz 整体架构 核心过程(IoA ...

  10. [Whole Web, Node.js, PM2] Configuring PM2 for Node applications

    In this lesson, you will learn how to configure node apps using pm2 and a json config file. Let's sa ...