页面滚动到图层位置 图片出现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.4.1.js"></script> <script> $(window).scroll(function () { var _ismobile = false; var windowTop = $(window).scrollTop(); var windowBottom = windowTop + $(window).height(); var showNum = !_ismobile ? 4 : 16; $('.ani-view').each(function(){ var pageQ1 = $(this).offset().top + $(this).height() / showNum; var pageQ3 = $(this).offset().top + $(this).height() / 1; if( ( pageQ1 <= windowBottom ) && ( pageQ3 >= windowTop ) ){ if( $(this).hasClass("fade-in-down") ) $(this).addClass('fadeInDown'); if( $(this).hasClass("fade-in-left") ) $(this).addClass('fadeInLeft'); if( $(this).hasClass("fade-in-right") ) $(this).addClass('fadeInRight'); }else { // if( $(this).hasClass('fadeInDown') ) $(this).removeClass(' fadeInDown'); // if( $(this).hasClass('fadeInLeft') ) $(this).removeClass('fadeInLeft'); // if( $(this).hasClass('fadeInRight') ) $(this).removeClass(' fadeInRight'); if( $(this).hasClass('fadeInDown') ) $(this).removeClass('ani-view fade-in-down fadeInDown'); if( $(this).hasClass('fadeInLeft') ) $(this).removeClass('ani-view fade-in-left fadeInLeft'); if( $(this).hasClass('fadeInRight') ) $(this).removeClass('ani-view fade-in-right fadeInRight'); } }); }); </script> <style> @charset "utf-8"; /* css animation */ .trans { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } .ind-fr1{ position: relative; margin: 55px 110px 0 110px; width: 268px; height: 398px; overflow: hidden; } /* page animation */ .ani-view { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-100px) } 100% { opacity: 1; transform: translateX(0) } } .ani-view.fade-in-left { opacity: 0; opacity: 1 /IE9; transform: translateX(-10px); } .ani-view.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; }</style> </head> <body> <div style="height:1300px;"></div> <div class="ind-fr1 fr ani-view fade-in-left"> <div class="con"> <img src="./files/img7.jpg" width="224" height="398"> </div> <div class="bot"> <img src="./files/bg6.png" width="224" height="67"> </div> </div> </body> </html>