<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. Django的思维导图

    本人在学习Django的过程中整理的一些知识点 现在整理成思维导图,在以后查阅的时候可以方便自己.

  2. CSS中的选择器之html选择器和伪类选择器

    1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...

  3. iOS-属性字符串添加下划线、删除线

    常用到的属性字符串 ///定义属性字符串NSMutableAttributedString *att = [[NSMutableAttributedString alloc]initWithStrin ...

  4. python中的线程

    1.线程的创建 1.1 通过thread类直接创建 import threading import time def foo(n): time.sleep(n) print("foo fun ...

  5. 洛谷 [P1129] [ZJOI2007] 矩阵游戏

    这竟然是一道二分图 乍一看,可能是用搜索做,但是这个数据范围,一定会T. 我们观察发现,无论怎样变换,同一行的一定在同一行,同一列的一定还在同一列.所以说,一行只能配一列.这样,我们的目标就是寻找是否 ...

  6. BZOJ 4537: [Hnoi2016]最小公倍数 [偏序关系 分块]

    4537: [Hnoi2016]最小公倍数 题意:一张边权无向图,多组询问u和v之间有没有一条a最大为a',b最大为b'的路径(不一定是简单路径) 首先想到暴力做法,题目要求就是判断u和v连通,并查集 ...

  7. 简单DNA序列组装（非循环子图）

    生物信息学原理作业第四弹:DNA序列组装(非循环子图) 原理:生物信息学(孙啸) 大致思想: 1. 这个算法理解细节理解比较困难,建议看孙啸的生物信息学相关章节. 2. 算法要求所有序列覆盖整个目标D ...

  8. VS2010+opencv2.4.10+gsl_1.8配置实现RobHess的SIFT程序

    最近在做sift方面的毕业设计,弄了一天终于把RobHess的SIFT程序调通了.虽然网上有很多相关博文,但是我还是想把我的调试的过程跟大家分享一下.由于工程没法在博文上传,所以有需要的可以在下方留言 ...

  9. word设置每页50行

    1. 显示行号:页面布局-行号-每页重编行号 2. 调整页边距:页面布局-页边距-调整上下边距为2 3. 调整行数:页面布局-文档网格-只指定网格-设置行数

  10. Android查缺补漏（IPC篇）-- 款进程通讯之AIDL详解

    本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8436529.html 进程间通讯篇系列文章目录: Android查缺补漏(IP ...