<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. Notice！

    之后的小车内容在这里更新,开源社区,新浪博客不再更新.

  2. MongoDB之副本集

    MongoDB之副本集 一.简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库 ...

  3. 单元测试系列：Mock工具Jmockit使用介绍

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6760272.html Mock工具Jm ...

  4. mysql 删匿名帐户

    mysql默认安装,带有匿名帐户 删除它很简单 登录进入msyql并执行以下三行语句: use mysql; delete from user where user=''; flush privile ...

  5. linux中vim常用的快捷键

    移动光标的方法 h或者向左箭头:光标向左移动一个字符 j或者向下箭头:光标向下移动一个字符 k或者向上箭头:光标向上移动一个字符 i或者向右箭头:光标向右移动一个字符 Ctrl+f:屏幕向下移动一页[ ...

  6. 使用.bat来执行Java程序基础

    将java程序做成可运行的jar后,又希望使用.bat文件来调用jar时,有几点需要注意的. 1.设置path和classpath .bat文件中扥的内容如下: @echo off set MY_HO ...

  7. php 数组变成树状型结构

    <? php $stime = microtime(true); $nodes = [ ['id' = > 1, 'pid' = > 0, 'name' = > 'a'], [ ...

  8. CentOS 挂载 cdrom, iso文件作为源

    在生产系统环境中的机器都没有连接互联网,因此都是使用本地源. 首先,需要将cdrom, 或 iso文件挂载到本地目录. 1.挂载光驱: 将cdrom 放入光驱. $  mkdir /media/cdr ...

  9. win10+anaconda+cuda配置dlib，使用GPU对dlib的深度学习算法进行加速（以人脸检测为例）

    在计算机视觉和机器学习方向有一个特别好用但是比较低调的库,也就是dlib,与opencv相比其包含了很多最新的算法,尤其是深度学习方面的,因此很有必要学习一下.恰好最近换了一台笔记本,内含一块GTX1 ...

  10. Angular4.0用命令行创建组件服务出错

    之前使用cnpm创建的angular4.0项目,由于cnpm下载的node_modules资源经常会有部分缺失,所以在用命令行创建模板.服务的时候会报错: Error: ELOOP: too many ...