400-800-9385
网站建设资讯详细

网站前端制作之滑动滚动条时图片和文字同时滚动

发表日期:2020-01-17 09:26:01   作者来源:方维网络   浏览:4985   标签:网站前端制作    
在有的网站详情页(产品或案例)中,有时要实现的效果是主体内容左右布局,左侧是一张或多张图片组成的图片集,右侧是文字介绍(或者是其他内容),当滚动滚动条时图片集跟随滚动条往下滚动展示,右侧文字始终悬浮在浏览器的右侧不动,高度限制在浏览器一屏的高度之内,里面的文字超出限制的高度时,让它超出隐藏滑动显示;滚动条滚动时右侧里面文字介绍也跟随滚动,当滚动条滚动到右侧图片集底部时,右侧文字内容跟随着一起隐藏。
效果如下图:

1.进入详情页时:

前端示例1

2. 滚动滚动条往下浏览时:

3. 当滚动条滚动到右侧图片集底部时:

前端示例2


   html如图:
1. 左侧图片集:

html代码

2. 右侧文字内容:

html代码2

css代码我就不发出来了,主要是运用了js。
Js如图:

JS代码1

JS代码2

JS代码3

具体的可以看图片里的注释。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5520.html