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


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学习历程和心得小结
Aug 16 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue下的@change事件的实现
Oct 25 Javascript
vue实现浏览器全屏展示功能
Nov 27 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
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
jquery 指南/入门基础
2007/11/30 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
js+css3实现简单时钟特效
2020/09/13 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
解决Python的str强转int时遇到的问题
2018/04/09 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
基于Python正确读取资源文件
2020/09/14 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
美国留学经济担保书
2014/05/20 职场文书
大学学生个人总结
2015/02/15 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书