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


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 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
jquery插件validate验证的小例子
May 08 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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语法速查表
2007/01/02 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
jQuery操作css样式
2017/05/15 jQuery
vue.js 上传图片实例代码
2017/06/22 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
搭建vue开发环境
2018/07/19 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
使用python3构建文件传输的方法
2019/02/13 Python
python中温度单位转换的实例方法
2020/12/27 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
大学优秀班集体申报材料
2014/05/23 职场文书
法学院毕业生求职信
2014/06/25 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
redis 查看所有的key方式
2021/05/07 Redis
python获取对象信息的实例详解
2021/07/07 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫