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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <style type="text/css">

        .mouseOver

        {

            cursor: hand;

            border: 1px solid red;

        }

    </style>

    <title></title>

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        var imgPaths = ["http://img4.cache.netease.com/sports/2011/2/14/2011021405120433a90.jpg",

        "http://img3.cache.netease.com/sports/2011/2/14/2011021407333047e73.jpg"];

        $(function () {

            $("#showImg").attr("src", imgPaths[]);

            var top;

            var left;

            var width;

            var height;

            top = $("#showImg").offset().top;

            left = $("#showImg").offset().left;

            width = $("#showImg").width();

            height = $("#showImg").height();

            $("#popDiv").css({ position: "absolute", top: top + height - $("#popDiv").height(), left: left + width - $("#popDiv").width(), padding: "1px" });

            $("#popDiv span").hover(function () {

                $(this).addClass("mouseOver");

            },

            function () {

                $(this).removeClass("mouseOver")

            }

            ).click(function () {

                $("#showImg").attr("src", imgPaths[eval($(this).text()) - ]);

            });

        });

    </script>

</head>

<body>

    <div>

        <img id="showImg" alt="" height="" width="" src="" />

    </div>

    <div id="popDiv" style="width: 300px; height: 20px; text-align: right">

        <span></span> <span></span>

    </div>

</body>

</html>

Jquery点击数字切换图片的更多相关文章

  1. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  2. Jquery的动态切换图片

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

  3. jQuery箭头切换图片 - 学习笔记

    jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z):        x 代表横向坐标移向量的长度       y 代表纵向坐标移 ...

  4. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  7. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  9. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

随机推荐

  1. SP1716 GSS3

    题意翻译 \(n\) 个数,\(q\) 次操作 操作\(0\) \(x\) \(y\)把\(A_x\) 修改为\(y\) 操作\(1\) \(l\) \(r\)询问区间\([l, r]\)的最大子段和 ...

  2. 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法

    解决办法是给menu的default-active绑定route.path形如:<el-menu :default-active="$route.path" ...>每 ...

  3. 瓷砖覆盖（状压DP)

    题目描述 Description 用1*2的瓷砖去铺N*M的地面,问有多少种铺法 输入描述 Input Description 第一行有两数n,m.表示地面的大小 输出描述 Output Descri ...

  4. 积分图像的应用（二）：非局部均值去噪（NL-means）

    非局部均值去噪(NL-means)一文介绍了NL-means基本算法,同时指出了该算法效率低的问题,本文将使用积分图像技术对该算法进行加速. 假设图像共像个素点,搜索窗口大小,领域窗口大小, 计算两个 ...

  5. Codeforces Round #375 (Div. 2) Polycarp at the Radio 优先队列模拟题 + 贪心

    http://codeforces.com/contest/723/problem/C 题目是给出一个序列 a[i]表示第i个歌曲是第a[i]个人演唱,现在选出前m个人,记b[j]表示第j个人演唱歌曲 ...

  6. Murano PL

    To develop applications, murano project refers to Murano Programming Language (MuranoPL). It is repr ...

  7. <Win7硬件故障分析>

    查看当前系统正在运行的硬件信息. 右击计算机——属性——设备管理器看到下面: 一些常见的硬件故障: 主板故障 >开机不正常,偶尔出现突然的断电现象 >明明自己选择了关机,但是还是无法关机或 ...

  8. arcgis js 几种拓扑关系详解

    arcgis js的拓扑关系,在处理复杂逻辑和分析时,可以通过拓扑关系,减小客户端的工作量 拓扑关系: 1.overlaps 重叠 这里的重叠跟平时我们理解的不太一样,这里的重叠,必须是A与B有交集, ...

  9. Javascript 执行上下文 context&scope

    执行上下文(Execution context) 执行上下文可以认为是 代码的执行环境. 1 当代码被载入的时候,js解释器 创建一个 全局的执行上下文. 2 当执行函数时,会创建一个 函数的执行上下 ...

  10. java如何调用服务端的WSDL接口

    如何使用http://192.168.0.170:8090/kaoshi?wsdl调用服务端暴露在外面可以使用的接口 1.首先创建调用ws的web项目,就一个普通的web项目就行: 2.通过eclip ...