<html>

 <head>

     <meta name="name" content="content"charset="utf-8"/>

     <style type="text/css" media="screen">

         #main{ width: 800px;height: 300px;margin: 0 auto;position: relative;}

         #main .list{z-index: 10;}

         #main .list li{position: absolute;width: 800px;height: 300px;background: #ccc;list-style: none}

         #main .bt{ z-index: 200;position: absolute;bottom: 10px;right: 10px;}

         #main .bt li{list-style: none;float: left;width: 40px;height: 40px;border: 1px solid #ccc;text-align: center;line-height: 40px;}

         #main .bt li:hover{background:#ccc}

     </style>

     <script type="text/javascript" src="move.js"></script>

     <script type="text/javascript">

     window.onload=function  () {

          var bt=document.getElementsByTagName('ul')[1];

          var btli=bt.getElementsByTagName('li');

          var list=document.getElementsByTagName('ul')[0];

          var lis=list.getElementsByTagName('li');

          var index=5;

         lis[0].style.zIndex=index;

         for (var i = 0; i < btli.length; i++) {

             btli[i].index=i;

             btli[i].onmouseover=function  () {

                 lis[this.index].style.zIndex=index;

                 index++;

             }

             btli[i].onmouseout=function  () {

                 lis[0].style.zIndex=index;

                 index++;

             }

         };

     }

     </script>

     <title></title>

 </head>

 <body>

     <div id="main">

         <ul class="list">

             <li style="background: #f00;"></li>

             <li style="background: #ff0"></li>

             <li style="background: #f0f"> </li>

             <li style="background: #fcc"></li>

         </ul>

         <div class="bt">

             <ul>

                 <li>1</li>

                 <li>2</li>

                 <li>3</li>

                 <li>4</li>

             </ul>

         </div><!-- / -->

     </div>

 </body>

 </html>

闲着没事写的一段javascript代码。

[javascript]一段焦点图的js代码的更多相关文章

  1. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  2. Javascript系列： Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

  3. JS焦点图，JS 多个页面放多个焦点图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript点击焦点图

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

  5. 一段处理百分数的js代码

    function percent(s, e, i){ s = Number(s), isNaN(s) && (s = "0"); var n = "%&q ...

  6. JS - 焦点图

    下载地址:http://www.lanrentuku.com/js/jiaodiantu-1076.html 修改焦点图: CSS代码: /* 懒人图库 搜集整理 www.lanrentuku.com ...

  7. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  8. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. LODOP设置打印设计返回JS代码是变量

    前面有一篇博文是介绍JS模版的加载和赋值,赋值有两种,详细可查看本博客的那篇博文:LodopJS代码模版的加载和赋值简单来说,就是打印项的值是变量,在添加打印项前进行赋值:打印项的值是字符串,给打印项 ...

随机推荐

  1. 02_Python基本数据类型

    一.什么是数据 数据是描述客观事物的字符(比如95,不同的语义可表示成绩或体重),是计算机可以操作的对象,能够被计算机识别并输入给计算机处理的符号集合. 数据不仅仅包含整形,还包括图像.音乐.视频等非 ...

  2. ant基础[转]

    原文链接:http://www.cnblogs.com/wufengxyz/archive/2011/11/24/2261797.html 1,什么是antant是构建工具2,什么是构建概念到处可查到 ...

  3. 济南清北学堂游记 Day 1.

    快住手!这根本不是暴力! 刷了一整天的题就是了..上午三道题的画风还算挺正常,估计是第一天,给点水题做做算了.. rqy大佬AK了上午的比赛! 当时我t2暴力写挂,还以为需要用啥奇怪的算法,后来发现, ...

  4. ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

    1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...

  5. SDN期末作业

    期末项目 代码仓库:传送门 视频:组长已经发送给朱老师 选题:负载均衡场景3 选题内容: 该拓扑是数据中心拓扑的一部分,其中h1是数据中心外的一台客户机,h2-h5是数据中心内的服务器,请根据该拓扑实 ...

  6. 《CSS核心技术详解》

    前言 看似简单的CSS,却暗藏玄机,那是我们摸爬滚打好长时间后悟出的真理. 在很长的一段时间里,我并没有重视CSS,觉得CSS很简单,无非就是一些属性:后来才发现自己小看了CSS,对CSS的了解实在是 ...

  7. CentOS常用命令大全

    一:使用CentOS常用命令查看cpumore /proc/cpuinfo | grep "model name" grep "model name" /pro ...

  8. Docker Centos7 下建立 Docker 桥接网络

    为什么要让docker桥接物理网络? docker默认提供了一个隔离的内网环境,启动时会建立一个docker0的虚拟网卡,每个容器都是连接到docker0网卡上的.而docker0的ip段为172.1 ...

  9. [CJOJ2410]数列操作d

    [CJOJ2410]数列操作d 标签: 线段树 题解 没时间写题了,我来嘴巴AC吧. 注意区间加的这个值不是 确定的,随着元素位置的变化而改变. 只需要能维护这个东西剩下的就很好做了. 那么\(x*( ...

  10. 用户不在sudoers 文件中。此事将被报告 or （usermod：“sudo”组不存在）

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 异常处理汇总-服 务 器 http://www.cnblogs.com/dun ...