<!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. Angular输入框内按下回车会触发其它button的点击事件的解决方法

    方法:给button按钮添加type=“botton”属性

  2. Jmeter 线程组、运行次数参数化(转)Jpara1=4 -Jpara2=5

    Jmeter的jmx文件保存了线程数和运行次数等参数,这个参数可以在命令行中传入参数的方式来修改数值 步骤如下 1.生成线程和运行次数的参数 Jmeter选项中函数助手对话框,选中__P参数,这个参数 ...

  3. css奇技淫巧—box-shadow与outline绘制多重边框效果

    css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...

  4. java基础---GC

    一.Java基础: GC即:garbage collection垃圾回收机制.Java是自动回收垃圾的,像c c++等语言没有自动垃圾回收机制,长时间开启服务器就会导致 内存泄漏,占用内存 Java的 ...

  5. mysql 帮助手册 以及 warning: World-writable config file 以及 ERROR 1840 (HY000) at line 24:

    1. mysql --help 2.报错 报错Warning: World-writable config file http://www.jb51.net/article/99027.htm 最近在 ...

  6. 转 rman-08120 以及查询隐含参数

    rman-08120 We need RMAN to automatically purge archivelogs from the FRA once they are applied to the ...

  7. 解决gradle下载慢的问题

    解决方法要做两部 一 打开用户主目录 linux平台/home/用户名/.gradle windows平台c:\Users\用户名\.gradle macos平台/Users/用户名/.gradle ...

  8. SpringMVC03 ParameterMethodNameResolver(参数方法名称解析器) And XmlViewResolver(视图解析器)

    参数方法名称解析器 1.配置依赖包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...

  9. Oracle 用户相关

    1.查询所有未修改过密码的Oracle用户 SELECT * FROM dba_users_with_defpwd d, dba_users du WHERE du.account_status = ...

  10. JAVA中日期格式转换各个字母代表含义

    G  Era 标志符  Text  AD  y  年  Year  1996; 96  M  年中的月份  Month  July; Jul; 07  w  年中的周数  Number  27  W  ...