Created
July 25, 2014 05:46
-
-
Save wchaowu/67f94c48cedc92eef198 to your computer and use it in GitHub Desktop.
检测页面元素是否进入可视区
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <title>检测页面元素是否进入可视区</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <style type="text/css"> | |
| #testImg{ | |
| width:389px; | |
| height:500px; | |
| background-color:#ccc; | |
| border:1px red solid; | |
| margin:800px auto; | |
| } | |
| #main{ | |
| width:389px; | |
| height:500px; | |
| background-color:#fff; | |
| border:1px red solid; | |
| margin:111px auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <div id="testImg"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| //获取页面元素的位置 | |
| function getElementTopLeft(obj){ | |
| var top = 0; | |
| var left = 0; | |
| while(obj){ | |
| top += obj.offsetTop; | |
| left += obj.offsetLeft; | |
| obj = obj.offsetParent; | |
| } | |
| return {top:top,left:left}; | |
| } | |
| function isDisplay(obj){ | |
| var objHeight = obj.offsetHeight; | |
| var viewHeight = document.documentElement.clientHeight; //窗口可视区高度 | |
| var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条 | |
| if(getElementTopLeft(obj).top+objHeight/2 < viewHeight + scrollY){ //进入可视区 | |
| return true; | |
| }else{ | |
| return false; | |
| } | |
| } | |
| var testImg = document.getElementById('testImg'); | |
| window.onscroll = function(){ | |
| if(isDisplay(testImg)){ //进入可视区testImg对象1/2高度以内 | |
| if(testImg.getElementsByTagName('img').length < 1){ //防止重复加载 | |
| var imgObj = document.createElement('img'); | |
| imgObj.src = 'zyz.jpg'; | |
| testImg.appendChild(imgObj); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment