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


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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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学习 运算符与运算符优先级
2008/06/15 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP7内核之Reference详解
2019/03/14 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
JS的replace方法介绍
2012/10/20 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
初中女生自我鉴定
2013/12/19 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
技术总监管理职责范本
2014/03/06 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
吴仁宝观后感
2015/06/09 职场文书
教师培训学习心得体会
2016/01/21 职场文书
资产移交协议书
2016/03/24 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers