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


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吗?
Feb 24 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
canvas知识总结
Jan 25 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
javascript this指向相关问题及改变方法
Nov 19 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实现生成带背景的图形验证码功能
2016/10/03 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript静态的url如何传递
2007/05/03 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python3解释器知识点总结
2019/02/19 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
车间统计员岗位职责
2014/01/05 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
党员干部一句话承诺
2014/05/30 职场文书
施工单位安全责任书
2014/07/24 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
干部作风建设工作总结
2014/10/29 职场文书
环卫个人总结
2015/03/03 职场文书
借条格式范本
2015/05/25 职场文书
施工现场安全管理制度
2015/08/05 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL