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


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 lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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根据分类合并数组的方法实例详解
2013/11/06 PHP
php后门URL的防范
2013/11/12 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python中的Numpy矩阵操作
2018/08/12 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python解析yaml文件过程详解
2019/08/30 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
2014年清明节寄语
2014/04/03 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
寒假生活随笔
2015/08/15 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫