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


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 网页跳转的方法
Dec 24 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
javascript关于继承解析
May 10 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
vue数据字典取键值项目的字典问题
Apr 12 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
对python3新增的byte类型详解
2018/12/04 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python中如何进行连乘计算
2020/05/28 Python
python怎么自定义捕获错误
2020/06/29 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
硕士研究生自我鉴定
2013/11/08 职场文书
英语老师推荐信
2014/02/26 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
就业意向协议书
2015/01/29 职场文书
房贷工资证明范本
2015/06/12 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
优质护理服务心得体会
2016/01/22 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
JavaScript获取URL参数的方法分享
2022/04/07 Javascript