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


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异步编程Promise模式的6个特性
Apr 03 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
js自制图片放大镜功能
Jan 24 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 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中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
JS定时器实例
2013/04/17 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python查看列的唯一值方法
2018/07/17 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python中的面向接口编程示例详解
2021/01/17 Python
基于PyTorch中view的用法说明
2021/03/03 Python
军训生自我鉴定范文
2013/12/27 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
大学生标准自荐书
2014/06/15 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
志愿者事迹材料
2014/12/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python