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


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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
JS函数式编程实现XDM一
Jun 16 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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
javascript常见用法总结
2014/05/22 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
详解创建自定义的Angular Schematics
2018/06/06 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
Python利用IPython提高开发效率
2016/08/10 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
小学生班会演讲稿
2014/01/09 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
21岁生日感言
2014/02/27 职场文书
家具商场的活动方案
2014/08/16 职场文书
初一年级组工作总结
2015/08/12 职场文书
七年级作文之冬景
2019/11/07 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android