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


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 相关文章推荐
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
单元选择合并变色示例代码
May 26 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
js格式化时间的简单实例
Nov 27 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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中一个有意思的日期逻辑处理
2012/03/25 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
js 对象是否存在判断
2009/07/15 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
探究Python中isalnum()方法的使用
2015/05/18 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
详解django三种文件下载方式
2018/04/06 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python实现打砖块游戏
2020/02/25 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
商务考察邀请函范文
2014/01/21 职场文书
求职信需要的五点内容
2014/02/01 职场文书
文明之星事迹材料
2014/05/09 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
阿甘正传观后感
2015/06/01 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL