Jquery点击数字切换图片
<!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点击数字切换图片的更多相关文章
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- Jquery的动态切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片 布局 3d位移 变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标移 ...
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）
在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 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 ...
随机推荐
- 背包DP【bzoj2287】: 【POJ Challenge】消失之物
2287: [POJ Challenge]消失之物 Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. &q ...
- AT2166 Rotate 3x3
传送门 这个题网上有两种做法,一种是树状数组的,还有一种是暴力模拟的,暴力模拟显然不够优美,所以我用的树状数组 显然可以从初状态推到目标状态,我们也可以考虑倒推回去 首先可以容易发现每列的数字是不变的 ...
- JMeter - REST API测试 - 完整的数据驱动方法（翻译）
https://github.com/vinsguru/jmeter-rest-data-drivern/tree/master 在本文中,我想向您展示一种用于REST API测试的数据驱动方法.如果 ...
- Python网络爬虫(三)
AJAX学习 AJAX=Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).通俗来说,AJAX是一种无需加载整个网页的情况下,通过在后台与服务器 ...
- Models-查询详细操作
# 单表简单查询13种方法 1.all(): 查询所有结果 all: models.表名.objects.all() book_all=models.Book.objects.all() # 结果是q ...
- springcloud中常用的注解@
@SpringBootApplication是springboot启动类,包括三个注解,他们的作用分别是: @Configuration:表示将该类作用springboot配置文件类 @EnableA ...
- 034 Search for a Range 搜索范围
给定一个已经升序排序的整形数组,找出给定目标值的开始位置和结束位置.你的算法时间复杂度必须是 O(log n) 级别.如果在数组中找不到目标,返回 [-1, -1].例如:给出 [5, 7, 7, 8 ...
- jdbc操作步骤
package com.itheima.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql ...
- Jmeter-性能测试工具
0.概念和备注 //基本使用流程 测试计划-->右键 添加-> Threads(Users) --> 选择线程组 -->线程组-->右键 添加 --> Sample ...
- table-列组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...