图片无缝 滚动 不用JS 可以实现吗

html-css023

图片无缝 滚动 不用JS 可以实现吗,第1张

可以。假如是自动的横向滚动就可以

html是静态的显示,所以他只能保证显示的内容而不是显示的动画所以无法解决动态问题。

css3增加了许多的动画效果,所以当你期望没有任何事件进行,图片在可视界面里面自动滚动的话,css3是可以实现的。

如果是用鼠标进行滚动,那么就必须使用js。

html是内容的静态展示。

css是样式的渲染。

js是事件的触发。

如果是在回调里置顶DIV的话(比如点击事件),可以用scrollIntoView。 scrollIntoView如果不想吸顶 可以加个before伪类设置高度 CSS3滚动置顶目前有两种解决方案: 第一种(主流):transform: translate3d(x,y,z) 第二种(未来):position: stickytop:xxx 假设需求: 需求一:滚动过程中A ,C区域不吸顶,B区域吸顶 VUE框架推荐直接使用vantUI插件,indexbar索引栏。https://youzan.github.io/vant/#/zh-CN/index-barvantUI原理用的是transform。 以上面图片为例大致讲解: 1.transform对JS的能力要求高些,页面加载完毕后,给每个B区域对应的DIV设置translate3d的Y轴值,值为B对应div离顶部的高度。 2.当开始滚动起来后,Y轴值为原来值减去滚动条滚动距离值 3.当Y轴值小于0的时候,锁死为0,就自动吸顶了 4.当待置顶DIV的translate3d Y轴值小于DIV的高度时,已置顶DIV的Y轴值开始变为负数,这样会有一个顶出的效果 5.已置顶DIV被待置顶DIV顶出一定距离(一般两倍DIV高度),取消translate3d属性, 6.回滚反向计算即可 需求二:滚动过程中 C不吸顶,B吸顶,A一直吸顶 B在A下面 这个需求vantUI(v2.9.3)目前解决不了,采用translate太复杂,决定采用CSS3新属性position: sticky。 如果是2018年使用该属性兼容性还是个问题,但来到2020年下半年,对大部分生产环境都不是问题。博主测试的IOS11和安卓小米 华为 都支持该属性。博主的建议是:如果是公司APP内嵌H5页面或者微信打开可以使用该属性,如果纯H5页面 ,建议translate. position: sticky字面意思就是粘性定位。 可以粘顶部也可以粘底部 右侧 左侧。 所以除了position: sticky还要给一个定位值,比如top:0px或者right:0px就可以了 非常简单。 比如直接给Bdiv设置下面样式就行 实际使用要注意下面几点: 1.如果想兼容IOS12 IOS11 必须带position: -webkit-sticky而且要在样式表里写,不能写在style里。 2.容器相关。只有要移除容器范畴才起作用。比如body的height不要设置100%,height:100%表示所有元素一直在屏幕范围

一、HTML5+CSS3

HTML5和CSS3是通往Web工程师路上必须学会的基本内容,主要包括了解常用浏览器和浏览器内核了解语义化的概念掌握HTML5语法及使用技巧掌握HTML5常用标签。掌握CSS语法及使用技巧掌握DIV+CSS布局方式掌握常见网页布局模式。掌握HTML5新布局标签、多媒体标签掌握CSS32D、3D变换、动画效果能够使用CSS3新属性美化修饰网页了解移动端屏幕、移动端浏览器、操作系统的不同等内容。

二、JS交互设计

JS交互技术可以赋予页面一个动态的效果展示,提升用户的浏览体验,这部分主要是通过JS的学习掌握JavaScript基本语法掌握常见JavaScript算法掌握DOM的各种操作熟练使用面向对象思想进行DOM编程掌握JavaScript的高级语法掌握JavaScript常见兼容性方案。熟练使用jQuery操作DOM熟练使用和编写jQuery案例。

三、Node开发

Node.js不仅仅是一个框架,它是一个完整的JavaScript环境,配备了开发人员可能需要的开发工具。所以学好Node是在打通前后端开发中需要掌握的技术。这部分需要掌握ES6的基础用法和兼容性掌握ES6的核心语法使用ES6实现前端模块化开发。使用Webpack模块打包器使用Node.js进行Web服务端开发掌握JavaScript异步编程模型掌握JavaScript模块化编程方式使用Node.js操作MongoDB数据库独立开发基于后台接口的动态网站、Ajax数据交互的项目独立完成企业网站从前台到后台的基本开发工作。

四、前端框架

前端框架是Web开发人员需要熟练掌握的技能,并且在实际开发中是会被广泛应用的,那么对于前端框架方面需要掌握现在主流的Vue、React、Angular等,掌握D3.js进行大数据可视化交互开发掌握Vue技术栈进行项目开发掌握React技术栈进行项目开发掌握使用主流框架开发门户网站、管理系统、移动Web等客户端掌握Webpack项目构建配置流程掌握Web项目的部署与发布模式掌握常见网站业务模块开发等。

五、小程序与APP开发 现在移动应用越来越受欢迎,掌握了小程序和APP开发技术可以增强自身竞争力,这就需要掌握小程序的开发基础能够独立开发小程序项目能够掌握Canvas的使用能够掌握小程序的部署与发布能够掌握小程序开发框架mpvue的使用掌握第三方AI平台的使用。能够掌握小游戏开发基础能够独立开发小游戏项目能够掌握小游戏的部署与发布能够独立使用ReactNative开发原生App。

视频教程:

网页链接