基于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 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 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
用PHP 4.2书写安全的脚本
2006/10/09 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python计算时间差的方法
2015/05/20 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
解决python flask中config配置管理的问题
2019/07/26 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python 获取字典键值对的实现
2020/11/12 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
冬季安全检查方案
2014/05/23 职场文书
应届生自荐书
2014/06/23 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书