<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. mysql安装(CentOS 7.1 (64-bit system) MySQL 5.6.24)

    环境:CentOS 7.1 (64-bit system) MySQL 5.6.24yum install libaio //安装依赖的包wget http://dev.mysql.com/get/m ...

  2. Android开发——Viewpager的介绍使用

    目录: 一.Viewpager的简单介绍 二.简单的Viewpager使用 三.简单显示图片的Viewpager实现 四.广告图的实现及Viewpager指示器(小圆点)的实现 五.APP引导页的实现 ...

  3. ABP 多租户 对应多数据库 租户启动报错

    什么是多租户? “软件多租户是指一个软件体系结构,其中一个软件实例在一个服务器上运行,并为多个租户提供服务*租户是一组共享具有软件实例特定权限的公共访问权限的用户. 架构中,软件应用程序旨在为每个租户 ...

  4. BZOJ 3585: mex [主席树]

    3585: mex Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 787  Solved: 422[Submit][Status][Discuss] ...

  5. Retrofit 实践

    Retrofit是一套RESTful架构的Android(Java)客户端实现,基于注解,提供JSON to POJO(Plain Ordinary Java Object,简单Java对象),POJ ...

  6. 事务与隔离级别------《Designing Data-Intensive Applications》读书笔记10

    和数据库打交道的程序员绕不开的话题就是:事务,作为一个简化访问数据库的应用程序的编程模型.通过使用事务,应用程序可以忽略某些潜在的错误场景和并发问题,由数据库负责处理它们.而并非每个应用程序都需要事务 ...

  7. 让我们一起摇摆 Turnipbit体感遥控车

    相信大家对Microbit是非常熟悉的,而今天我们做的这个小玩具所用的核心板是Turnipbit,是基于 Microbit开发的一块适合儿童适用的板卡.基本使用原理是一样的,这里就不多介绍了,代码这方 ...

  8. shell脚本实现nfs服务安装配置，共享文件分发

    ##############################Deploy nfs######################## echo "start deploy nfs-server& ...

  9. iterm2 快捷键大全

    Mac 原来自带的终端工具 Terminal 不好用是出了名的,虽然最近几个版本苹果稍微做了些优化,功能上,可用性方面增强不少,无奈有个更好用的 Iterm2 摆在那,基本上也就没有多少出场机会了 I ...

  10. python并发编程之多进程(二)：互斥锁（同步锁）&进程其他属性&进程间通信（queue）&生产者消费者模型

    一,互斥锁,同步锁 进程之间数据不共享,但是共享同一套文件系统,所以访问同一个文件,或同一个打印终端,是没有问题的, 竞争带来的结果就是错乱,如何控制,就是加锁处理 part1:多个进程共享同一打印终 ...