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


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实现的动态文字变换
Jul 28 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
js实现可爱的气泡特效
2020/09/05 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
Python的一些用法分享
2012/10/07 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python机器学习之神经网络(三)
2017/12/20 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python 发送邮件方法总结
2020/08/10 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
SQL数据库笔试题
2016/03/08 面试题
工作会议欢迎词
2014/01/16 职场文书
国际商务专业求职信
2014/07/15 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript