背景图片滚动演示

评论资讯 [ 总 424 则 ]

·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ css-doodle中文版
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 105
·JS插件 : 46
·黑石音画 : 318
·代码集锦 : 50
·小工具集合 : 23
·网友作品精选 : 6
·svgdr : 26

·今日访问 : 405
·页面点击 : 410
·当前在线 : 14

背景图片滚动演示

位置: 首页 > 前端三套件[ 发布时间: 2024.4.6 作者: 马黑阅读: 271 ]

背景图片滚动演示

图片尺寸：640*423
盒子尺寸：640*423

演示背景滚动的目的，在于展现实现背景图片无缝循环的基本原理。演示是单张图片做背景，通过拖曳滑杆滑块，我们会发现背景图片在往左或往右移动，同时左边或右边出现空当，当滑到两边的尽头，背景图片消失。空当部分如果用合适的背景图适时弥补，便可实现背景图片在滚动时无缝衔接，这在布局技巧和精细算法上需要下一点功夫，目前我们已经实现利用伪元素令单图背景无缝循环滚动的功能，详情请看附一示例。

附一：袖舞江南

附二：本演示核心代码

<style>

#mydiv {

margin: 20px auto;

width: 640px;

height: 423px;

/* 背景设为不重复，位置为 begin 0，begin是左右移动的变量 */

background: url('https://638183.freep.cn/638183/t23/3/mwhxyb.jpg') no-repeat var(--begin) 0;

border: 1px solid red;

position: relative;

--begin: 0px;

}

</style>

</div>

//滑杆输入事件：驱动背景改变位置

bgmov.oninput = () => {

bgmsg.value = bgmov.value;

mydiv.style.setProperty('--begin', bgmov.value + 'px');

};

</script>

前一篇: CSS+JS实现单图片模拟背景循环无缝滚动
下一篇: 9块9包邮的canvas放大镜

发表评论:

评论列表 [1条]

#1 | 悄然于 2024-4-6 13:32 发布: 老师厉害，又出一个演示……这个太方便了，用来理解代码原理……早上看帖子代码时知道是用伪元素实现的滚动……接缝1像素素怎么处理的，算法很是烧脑……今天糊涂，目前没看懂………