在图片上显示左右箭头类似翻页的代码


Posted in Javascript onMarch 04, 2013

使用JS实现在图片上显示左右箭头的翻页代码,预览效果网址:http://www.keleyi.com/keleyi/phtml/picnext/
本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。

语法
onmousemove="SomeJavaScriptCode"
SomeJavaScriptCode是必需参数。规定该事件发生时执行的 JavaScript。

下面是核心代码(完整代码请在效果页面查看源代码):

<script type="text/javascript"> 
function KeleyiImgNext(bigimg) { 
var lefturl = "01.html"; 
var righturl ="03.html"; 
var imgurl = righturl; 
var width = bigimg.width; 
var height = bigimg.height; 
bigimg.onmousedown = bigimg.onmousemove = function () { 
if (event.offsetX < width / 2) { 
imgurl = lefturl; 
if (imgurl != "#") 
bigimg.style.cursor = 'url(images/arr_left.cur),auto'; 
else 
bigimg.style.cursor = 'default'; 
} else { 
imgurl = righturl; 
if (imgurl != '#') 
bigimg.style.cursor = 'url(images/arr_right.cur),auto'; 
else 
bigimg.style.cursor = 'default'; 
} 
} 
bigimg.onmouseup = function () { 
if (imgurl != '#') 
top.location = imgurl; 
} 
} 
</script> 
<img onmouseover="KeleyiImgNext(this)" src="http://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" alt="keleyi" />
Javascript 相关文章推荐
Js实现动态添加删除Table行示例
Apr 14 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 #Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 #Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
You might like
PHP编程风格规范分享
2014/01/15 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
浅析vue深复制
2018/01/29 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Python中元组,列表,字典的区别
2017/05/21 Python
解决python 输出是省略号的问题
2018/04/19 Python
python对日志进行处理的实例代码
2018/10/06 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
strstr()的简单实现
2013/09/26 面试题
一组SQL面试题
2016/02/15 面试题
最新大学生自我评价
2013/09/24 职场文书
幼师自荐信范文
2013/10/06 职场文书
医院门卫岗位职责
2013/12/30 职场文书
经典大学生求职信范文
2014/01/06 职场文书
运动会广播稿200字
2014/10/18 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
宇宙与人观后感
2015/06/05 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
Python装饰器详细介绍
2022/03/25 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript