js 左右图标翻页

最新推荐文章于 2022-06-13 19:33:05 发布

原创最新推荐文章于 2022-06-13 19:33:05 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现的鼠标悬停事件，当用户将鼠标悬停在特定图片元素上时，页面会根据不同的位置触发跳转到上一张或下一张图片的功能。通过设置CSS样式和事件监听，实现了一个简单的图片浏览交互效果。

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

$(document).ready(function(){
    var img_left = $(".fb_image img").eq(0).offset().left;
    var img_top = $(".fb_image img").eq(0).offset().top;
    var width = $(".fb_image img").eq(0).width();
    var height = $(".fb_image img").eq(0).height();
    var l_start_width = img_left;
    var l_end_width = img_left + (width/2);
    var r_start_width = l_end_width;
    var r_end_width = img_left+width;
    var  start_height = img_top;
    var end_height = height + img_top;
    $(".fb_image img").eq(0).mousemove(
        function(e){
            if(e.pageY > start_height && e.pageY < end_height){
                if(e.pageX > l_start_width && e.pageX < l_end_width){
                    $(".fb_image img").eq(0).css("cursor","url(http://icon.xgo.com.cn/photo/pre1.cur),auto");
                    $(".fb_image img").eq(0).title="查看上一张";
                    var prev_page = $("#prevUrl").attr("href");
                    $(".fb_image a").eq(0).attr("href",prev_page);
                }
                if(e.pageX > r_start_width && e.pageX < r_end_width){
                    $(".fb_image img").eq(0).css("cursor","url(http://icon.xgo.com.cn/photo/next1.cur),auto");
                    $(".fb_image img").eq(0).title="查看下一张";
                    var next_page = $("#nextUrl").attr("href");
                    $(".fb_image a").eq(0).attr("href",next_page);
                }
            }
        })
})

js&nbsp;左右图标翻页

js 左右图标翻页