這是IE的預覽效果，打開的是IE7的文檔模式
直接粘代碼，採用優雅降級的方式實現兼容。 demo 中用到的圖片直接去百度下載就成，下大圖效果好實現。
1、*使用 jquery 的高版本實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>touch slide</title>
<link rel="stylesheet" href="css/common.css">
<style>
.progress-wraper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(0,0,0,0.4);
}
.progress{
background: greenyellow;
width: 100%;
height: 5px;
}
.content{
margin-top: 5px;
}
.content img{
width: 100%;
}
</style>
</head>
<body>
<div class="wraper">
<div class="progress-wraper">
<div class="progress"></div>
</div>
<div class="content">
<img src="images/timg-1.jpg" alt="">
<img src="images/timg-2.jpg" alt="">
<img src="images/timg-3.jpg" alt="">
<img src="images/timg-4.jpg" alt="">
<img src="images/timg-5.jpg" alt="">
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
percent(scrollTop);
});
function updateProgress(percent) {
$('.progress').animate({
width:percent+'%'
},0);
}
function percent(top) {
var conHeight = $('.content').height();
var bodyHeight = window.innerHeight;
var percent = (bodyHeight+top)/conHeight*100;
updateProgress(percent);
}
window.onscroll = function() {//爲了保證兼容性，這裏取兩個值，哪個有值取哪一個
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
percent(scrollTop);
//scrollTop就是觸發滾輪事件時滾輪的高度
}
</script>
</body>
</html>2、優雅降級 - - 兼容 IE7 及以上
兼容模式中，將document.ready 進行封裝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>touch ie</title>
<link rel="stylesheet" href="css/common.css">
<style>
.progress-wraper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(0,0,0,0.4);
}
.progress{
background: greenyellow;
height: 5px;
}
.content{
margin-top: 5px;
}
#content img{
width: 100%;
}
</style>
</head>
<body>
<div class="wraper">
<div class="progress-wraper">
<div class="progress"></div>
</div>
<div class="content">
<img src="images/timg-1.jpg" alt="">
<img src="images/timg-2.jpg" alt="">
<img src="images/timg-3.jpg" alt="">
<img src="images/timg-4.jpg" alt="">
<img src="images/timg-5.jpg" alt="">
</div>
</div>
<script src="js/document.ready.js"></script>
<script>
var progress = document.getElementsByClassName('progress')[0];
var content = document.getElementsByClassName('content')[0];
document.ready(function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
percent(top);
});
function updateProgress(width) {
setTimeout(function () {
progress.style.width = width+'px';
},0);
}
function percent(top) {
var conHeight = content.offsetHeight;
var bodyWidth = content.offsetWidth;
var bodyHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
var progressWidth = (bodyHeight+top)/conHeight*bodyWidth;
updateProgress(progressWidth);
}
window.onscroll = function() {//爲了保證兼容性，這裏取兩個值，哪個有值取哪一個
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
percent(scrollTop);
//scrollTop就是觸發滾輪事件時滾輪的高度
}
</script>
</body>
</html>document.ready.js 代碼如下：
/**
* Created by Administrator on 2017/6/26.
*/
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () {
for (var i = 0; i < fn.length; i++) fn[i]();
};
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try {
d.documentElement.doScroll('left');
run();
}
catch (err) {
setTimeout(arguments.callee, 0);
}
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
