基于jquery的图片的切换(以数字的形式)


Posted in Javascript onFebruary 14, 2011

具体的代码如下:
鼠标进入数字的时候添加了如下的CSS:

<style type="text/css"> 
.mouseOver 
{ 
cursor:hand; 
border:1px solid red; 
} 
</style>

图片切换的JS代码如下:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var imgPaths = ["//img.jbzj.com/demoimg/201008/o_p1.jpg", 
"//img.jbzj.com/demoimg/201008/o_p3.jpg]; 
$(function () { 
$("#showImg").attr("src", imgPaths[0]); 
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())-1]); 
}); 
}); 
</script>

HTML代码如下:
<div> 
<img id="showImg" alt="" height="400" width="300" src="" /> 
</div> 
<div id="popDiv" style="width:300px;height:20px;text-align:right"> 
<span>1</span> 
<span>2</span> 
</div>

具体的运行的效果,大家可以自己复制上面的代码进行运行,如果想要更好的效果,可以自行的修改以上的代码。
Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
jquery isType() 类型判断代码
Feb 14 #Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 #Javascript
jquery each()源代码
Feb 14 #Javascript
jquery trim() 功能源代码
Feb 14 #Javascript
jquery uaMatch源代码
Feb 14 #Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 #Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
求职意向书
2014/04/01 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
校本研修个人总结
2015/02/28 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
二婚主持词
2015/06/30 职场文书
建议书的格式及范文
2015/09/14 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS