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


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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
深入了解JS之作用域和闭包
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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php抽象类用法实例分析
2015/07/07 PHP
激活 ActiveX 控件
2006/10/09 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
python开发之函数定义实例分析
2015/11/12 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python实现根据文件格式分类
2019/10/31 Python
Python for循环与getitem的关系详解
2020/01/02 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
理工学院学生自我鉴定
2014/02/23 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers