jquery图片点击自动翻页实现

最新推荐文章于 2022-11-14 10:58:03 发布

前端小小鸟

最新推荐文章于 2022-11-14 10:58:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/forest_donglin/article/details/12998731

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用JQuery实现图片点击时自动向上或向下翻页的功能。通过判断鼠标位置来改变图片样式及链接地址，从而实现翻页效果。注意在Chrome浏览器中layerX和layerY属性已废弃。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用JQuey要实现图片点击自动向上，向下翻页！代码：

$(document).ready(function() {
	$("img").mousemove(function(e){  
		var positionX=e.originalEvent.layerX||e.originalEvent.x||0;
		if(positionX<=$(this).width()/2){           
			 this.style.cursor='url("/image/single/pre.cur"),auto';
			 $(this).attr('title','点击查看上一张');
			 $(this).parent().attr('href','$url&goto=up'); 
		}else{  
			 this.style.cursor='url("/image/single/next.cur"),auto';
			 $(this).attr('title','点击查看下一张');
			 $(this).parent().attr('href','$url&goto=down');
		} 
	});
});

以上基本实现功能啦！！！

付：

关于chrome下：

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

详细可以访问http://stackoverflow.com/questions/7825448/webkit-issues-with-event-layerx-and-event-layery。