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


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中encodeURI和decodeURI方法使用介绍
May 06 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
jquery实现手风琴效果
Nov 20 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
async/await地狱该如何避免详解
May 10 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 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中json_encode()和json_decode()
2014/05/25 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
经济学人订阅:The Economist
2018/07/19 全球购物
如何提高JDBC的性能
2013/04/30 面试题
公司庆典活动邀请函
2014/01/09 职场文书
和平主题的演讲稿
2014/01/12 职场文书
教师职称自我鉴定
2014/02/12 职场文书
个性车贴标语
2014/06/24 职场文书
弄虚作假心得体会
2014/09/10 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
伏羲庙导游词
2015/02/09 职场文书
同学聚会祝酒词
2015/08/10 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
SpringBoot详解执行过程
2022/07/15 Java/Android