<!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. POJ1043 What's In A Name?

    题目来源:http://poj.org/problem?id=1043 题目大意: 一个犯罪团伙有n个成员,每人有一个唯一的字符串作为id,每人还有一个唯一的字符串作为name.该团伙有一个hideo ...

  2. 【分享】利用WMITool解决浏览器主页被hao123劫持问题

    我在别处发的帖子 http://www.52pojie.cn/thread-607115-1-1.html

  3. P2161 [SHOI2009]会场预约 （线段树：线段树上的不重复覆盖数）

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...

  4. JAVA对象转换JSON

    1. 把java 对象列表转换为json对象数组,并转为字符串 复制代码 代码如下: JSONArray array = JSONArray.fromObject(userlist); String ...

  5. git——更新分支、提交代码、切换分支、合并分支

    还是直接贴教程吧:https://git-scm.com/book/zh/v2 如何把本地idea上的项目上传到github上:https://www.cnblogs.com/gougouyangzi ...

  6. CAST 变类型，如 SELECT CAST('12' AS int)

    select distinct CAST(value as signed) valueprice,CAST(value as signed) valueid from app_coupon

  7. 在myecplise中更新代码发布后没效果

    requestmapping指定路径不能访问: 重新发布,重新访问,清除缓存,重新访问,重启浏览器,清除缓存,重新访问,清除Tomcat相关目录,重新发布,重新访问……折腾了很久,可还是没有解决问题. ...

  8. 2 - Bootstrap-引导类-Bootstrap/ServerBootstrap

    2.1 ChannelOption和属性 //设置属性 bootstrap.option("xxx", 1231231); bootstrap.attr("xxx&quo ...

  9. Java日志格式应该是占位符还是字符串拼接

    背景 ​ 上次在群中,有个群友说自己把所有项目中,所有使用占位符打印日志的方式都修改成为了字符串拼接的方式,因为他曾经看了一篇文章,说字符串拼接的形式比占位符形式的性能更好,这个话题引起了大家的广泛讨 ...

  10. JavaFX上手--第1天

    1.第一个JavaFX Application JavaFX 使用Java来制作可视化图形,可以做动画和3D效果,JavaFX从JDK中直接使用. package application; impor ...