<!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. Nacos深入浅出（九）

    然而Nacos的发布操作并不是上面我们想的那样通过代理去实现,通过下面的代码我们分析下: public class NacosConfigurationPropertiesBindingPostPro ...

  2. d190305面试01过程记录和总结（java开发）

    1.签到,做题,注意时间.(疑问:做笔试题的时候,没有人监管吗?作弊怎么办) 2.今天做的是比较基础的题,题型有判断题(8),选择题(10),简答题(3),编程(2)逻辑题(2) (ps:感觉做的还不 ...

  3. 压缩归档tar

    一:压缩.解压 1.compress/uncompress/zcat -d:解压 -c:输出到终端,不删除原文件 -v:显示详细信息 2.gzip/ungzip/zcat -d:解压 -c:将压缩或解 ...

  4. AX 2012 窗体增加分隔线

    在AX中将窗体控件分区一般通过group来实现,但是类似salesTable的可以调整大小的分区其实也是用group控件再加一些方法实现的. 1, 留意splitGroup属性: Autodeclar ...

  5. JavaScript刷新页面，不重复提交

    location.replace(location.href);//刷新页面,不重复提交

  6. js：数组里面获取键名和键值

    在写php时用ajax异步传回的返回数组时是json格式,在js里面处理时有时需要用到键名,此时可以用in来处理 js只有数字索引: <script> var data = new arr ...

  7. 【ACM】最少乘法次数 - 树

    最少乘法次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2 ...

  8. Python——连接数据库

    好用的教程(*^▽^*):https://www.cnblogs.com/fatcat132006/p/4081576.html

  9. 双层列表 datagrid里属性

    frozenColumns: [ [{ title: "姓名"}] ], columns: [ [{"title":"延时原因"}], [{ ...

  10. C# 多线程之线程池

    线程池System.Threading.ThreadPool,可用于发送工作项.处理异步I/O.代表其它线程等待以及处理计时器.基本用法: public void Main() { ThreadPoo ...