How to implement scrolling image with javascript in web page

最新推荐文章于 2024-11-13 01:18:00 发布

garcon1986

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量889

点赞数

分类专栏： jQuery JavaScript 文章标签： image javascript web structure function scroll

本文链接：https://blog.csdn.net/garcon1986/article/details/8039854

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jQuery

10 篇文章 0 订阅

订阅专栏

/*by Jiangong SUN*/

I want to implement a scrolling section in web page.

The height of left part is fixed, the right part is variable and a scrolling section inside.

Here is the page structure:

JS code :

$(document).ready(function () {
            $window = $(window), //window object
            $ImageToRight = $(".ImageToRight"), //Image to scroll
            $contenuTextoLeft = $(".contenuTextoLeft"), // left part with fixed height
            $contenuTextoRight = $(".contenuTextoRight"); //variable right part depending the scrolling image
            var elTop = $ImageToRight.offset().top; //image top position
            var clTop = $contenuTextoLeft.offset().top; //left part top position

            $window.scroll(function () {
                var windowTop = $window.scrollTop();
                if (windowTop >= elTop && windowTop <= clTop + $contenuTextoLeft.height() - $ImageToRight.height()) {
                    var pos = windowTop - elTop;
                    $ImageToRight.stop()
                            .animate(
                                 { "marginTop": pos + "px" }, "slow");
                } else if (windowTop < elTop) {
                    $ImageToRight.stop()
                            .animate(
                                 { "marginTop": 0 + "px" }, "slow");
                }
            });
 });

That's all!