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


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 鼠标点击事件及其它捕获
Jun 04 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
PHP4引用文件语句的对比
2006/10/09 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP读取xml方法介绍
2013/01/12 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
php获取微信openid方法总结
2019/10/10 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
JavaScript效率调优经验
2009/06/04 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Django中的forms组件实例详解
2018/11/08 Python
python反编译学习之字节码详解
2019/05/19 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
物流管理专业推荐信
2014/09/06 职场文书
python中如何对多变量连续赋值
2021/06/03 Python