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


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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
ES6的新特性概览
Mar 10 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
用JS实现选项卡
2020/03/23 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python中的元组介绍
2019/01/28 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python写一个随机点名软件的实例
2019/11/28 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
python中if及if-else如何使用
2020/06/02 Python
python文件读取失败怎么处理
2020/06/23 Python
PHP如何对用户密码进行加密
2014/07/31 面试题
酒店采购员岗位职责
2014/03/14 职场文书
法院授权委托书格式
2014/09/28 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
python基础之函数的定义和调用
2021/10/24 Python