<!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. swarm

    https://blog.51cto.com/lookingdream/2060292 一.规划 1.swarm01作为manager节点,swarm02和swarm03作为worker节点. # c ...

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

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

  3. 给奇数的li标签添加蓝色，给偶数的li标签添加红色

    今天遇到的面试题,哎,不看参考手册还是写的蛋疼啊!给奇数的li标签添加红色,给偶数的li标签添加蓝色 直接撸代码吧: <!DOCTYPE html> <html lang=" ...

  4. Webpack热加载和React（其中有关于include和exclude的路径问题）

    看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...

  5. Eclipse设置控制台字体

    打开 Window - preferences-- general - appearance - colors and fonts --debug - console font 进行设置.

  6. 026 Remove Duplicates from Sorted Array 从排序数组中删除重复项

    给定一个有序数组,你需要原地删除其中的重复内容,使每个元素只出现一次,并返回新的长度.不要另外定义一个数组,您必须通过用 O(1) 额外内存原地修改输入的数组来做到这一点.示例:给定数组: nums ...

  7. Java BIO

    目录 BIO 字节流 OutputStream InputStream 字符流 Reader Writer 转换流 InputStreamReader OutputStreamWriter BIO I ...

  8. java字符串与二进制的相互转化

    public class StrBinaryTurn { // 将Unicode字符串转换成bool型数组 public boolean[] StrToBool(String input) { boo ...

  9. Mysql 如何设置字段自动获取当前时间，附带添加字段和修改字段的例子

    --添加CreateTime 设置默认时间 CURRENT_TIMESTAMP  ALTER TABLE `table_name`ADD COLUMN  `CreateTime` datetime N ...

  10. es6-Module 的加载实现

    浏览器加载 传统方法 在 HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本. <!-- 页面内嵌的脚本 --> <script type= ...