当滑动到页面某处显示该效果做法*滚动条大于150位置显示 从左往右移动效果*

（1）/*对话动画效果css*/ .s_default{ -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); opacity: 0; filter: alpha(opacity=0)\9; } .s_active{ -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; filter: alpha(opacity=100)\9; } （2）js: $(window).scroll(function() { if($(window).scrollTop() >= $(".scene").offset().top-$(window).height()+100) { $(".hd_position").addClass('s_active'); /*setTimeout("$('.hd_position').addClass('s_active');", 500);*/ } else { $(".hd_position").removeClass('s_active'); } }); 注意：（移动端就加上这段js,随便你）移动端自适应所以手机，使用单位rem(当前是以苹果6 设计稿)

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(!clientWidth) return; if(clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

（3）html:                             <div class="content scene"> <div class="margin_32 title"> <div class="hd_position hd s_default"> <p class="img_bg">世界之窗站连续3个小时雨量达50mm,可能出现积涝</p> </div> <img src="img/xl_yycj_04.jpg" width="100%"> <div class="xl_bottom_text text_bg"> 防火防灾办公室应用 </div> </div> </div> （4）css .xl .content {padding-bottom: 0.20rem;position: relative;} .xl .hd_position { width: 3.5rem; height: 1.2rem; background: url(../img/xl_yycj_03.png) no-repeat; background-size: 100% 100%; position: absolute; top: 1.65rem; right: 0.83rem; } .xl .hd{ text-align: left; color: #fff; font-size: 0.24rem; } .xl .img_bg{ padding: 0.25rem 0.2rem; }