博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在图片上显示左右箭头的翻页代码
阅读量:6279 次
发布时间:2019-06-22

本文共 971 字,大约阅读时间需要 3 分钟。

使用JS实现在图片上显示左右箭头的翻页代码,预览效果网址:

本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。

语法

οnmοusemοve="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 οnmοuseοver="KeleyiImgNext(this)" src="http://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" alt="keleyi" />

本文转载自柯乐义

你可能感兴趣的文章
this的用法
查看>>
windows下安装redis
查看>>
CentOS7 yum 安装git
查看>>
启动日志中频繁出现以下信息
查看>>
httpd – 对Apache的DFOREGROUND感到困惑
查看>>
分布式锁的一点理解
查看>>
idea的maven项目,install下载重复下载本地库中已有的jar包,而且下载后jar包都是lastupdated问题...
查看>>
2019测试指南-web应用程序安全测试(二)指纹Web服务器
查看>>
树莓派3链接wifi
查看>>
js面向对象编程
查看>>
Ruby中类 模块 单例方法 总结
查看>>
jQuery的validate插件
查看>>
5-4 8 管道符 作业控制 shell变量 环境变量配置
查看>>
Enumberable
查看>>
开发者论坛一周精粹(第五十四期) 求购备案服务号1枚!
查看>>
validate表单验证及自定义方法
查看>>
javascript 中出现missing ) after argument list的错误
查看>>
使用Swagger2构建强大的RESTful API文档(2)(二十三)
查看>>
Docker容器启动报WARNING: IPv4 forwarding is disabled. Networking will not work
查看>>
(转)第三方支付参与者
查看>>