h5实现图片滚动,h5里怎么做图片的滑动效果
在最近的项目中,老板提出了一个很好的要求。
背景图片被页面覆盖,他要求滚动条滑动。他告诉我的想法是用js得到背景图片的高度和当前窗口的高度。当窗口的高度小于背景图片的高度时,将窗口的高度设置为背景颜色的高度。反之,就是窗户的高度。太麻烦了,用css就能实现他的要求。
htmlheadmeta http-equiv= Content-Type Content= text/html;charset=UTF-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0 meta name= apple-mobile-we B- app-capable content= yes meta name= apple-mobile-we B- app-status-bar-style content= black meta name= forma-detection content= telephone=no title long网上说可以直接设置成100vh。如果没有,可以微调body {background: URL(。/images/download _ bg.png)不——自己repp。背景尺寸:100%;//方案1min-height:185 VH;//方案2本质上等同于方案1。如果两个方案同时打开,就用高度小的那个,这个已经测试过了。//高度:1200px} # BTN { margin-top:150 px;文本对齐:居中;}/style body div id= http://www.cnblogs.com/fanbi a href= BTN img src=。/images/download _ BTN . png width= 90% alt=跳转到网页地址//a/div /body/html这是网上找到的代码。
我改了。
body { background:-WebKit-linear-gradient(到底部,#699eef,# 8e 92 ef);背景:-o-线性-梯度(到底部,#699eef,# 8e 92 ef);背景:-moz-linear-gradient(到底部,#699eef,# 8e 92 ef);背景:线性渐变(至底部,#699eef,# 8e 92 ef);}.app {宽度:100%;/*高度:900px*/min-身高:120vh/*位置:固定;*//* top:0;*//* left:0;*/background: url(././images/bg.jpg )不重复;背景尺寸:100%自动;}给正文添加与图片颜色相同的背景色。
解决问题。
这就是这篇关于需要长滚动条滑动效果的h5页面背景图片的文章。关于html5页面背景图片中滚动条滑动的更多信息,请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。