<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. 【mac】mac os X更新High Sierra后出现的问题

    今天更新了一下macbook pro的系统到10.13.1版本,出现了几个小问题,总结一下解决方案: git客户端无法使用 解决方案如下: http://blog.csdn.net/kedongjun ...

  2. 多线程编程学习笔记——编写一个异步的HTTP服务器和客户端

    接上文 多线程编程学习笔记——使用异步IO 二.   编写一个异步的HTTP服务器和客户端 本节展示了如何编写一个简单的异步HTTP服务器. 1.程序代码如下. using System; using ...

  3. Trusted Execution Technology (TXT) --- 基本原理篇

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://www.cnblogs.com/tsec/p/8409600.html 1. Intel TXT 介绍 TXT是Trusted Ex ...

  4. MySQL死锁[转]

    案例描述       在定时脚本运行过程中,发现当备份表格的sql语句与删除该表部分数据的sql语句同时运行时,mysql会检测出死锁,并打印出日志. 两个sql语句如下:       (1)inse ...

  5. bzoj 4869: [Shoi2017]相逢是问候 [扩展欧拉定理 线段树]

    4869: [Shoi2017]相逢是问候 题意:一个序列,支持区间\(a_i \leftarrow c^{a_i}\),区间求和.在模p意义下. 类似于开根操作,每次取phi在log次后就不变了. ...

  6. 【转】我读过最好的epoll讲解（来自知乎）

    首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象.不管是文件,还是套接字,还是管道,我们都可以把他们看作流.之后我们来讨论I/O的操作,通过read,我 ...

  7. （python功能定制）复杂的xml文件对比，产生HTML展示区别

    功能的设计初衷: 处理复杂的xml对比,屏蔽同节点先后顺序的影响 主要涉及知识点: 1.xml解析 ------- ElementTree库 2.文件比对差别 ------- difflib库 3.获 ...

  8. 安装php的memcached模块和扩展支持sasl

    memcached的1.2.4及以上增加了CAS(Check and Set)协议,对于同一key的多进行程的并发处理问题.这种情况其实根数据库很像,如果同时有几个进程对同一个表的同一数据进行更新的话 ...

  9. [记]WIndow/Linux 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)

    Linux 获取本机IP.MAC地址用法大全 //#include <sys/types.h> #include <ifaddrs.h> #include <sys/io ...

  10. ArrayList源码阅读

    前言 数组是我们最常用最简单的数据结构,Java里对数组做了一个简单的包装,就是ArrayList,提供自动扩容的功能. 最常用法 list在我们日常代码中最为常用的做法是创建一个list,放入数据, ...