滚动条样式插件怎么用（插件不是用来学习的）
滚动条样式插件怎么用（插件不是用来学习的）<title>随鼠标滚动的广告图片</title> <meta charset="UTF-8"> <!DOCTYPE html><html><head>
插件不是用来学习的，学习一定要多敲码：随鼠标滚动的广告图片
插件不是用来学习的，想学好就一定要多敲码：随鼠标滚动的广告图片
随鼠标滚动的广告图片：不管页面拉到什么位置广告图片都会在左上角显示；
1.制作一个HTML页面用CSS简单修饰：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main{text-align:center;width:600px;margin:0 auto;}
#adver{
position:absolute;
left:50px;
top:30px;
z-index:2;
}
</style>
</head>
<body>
<<div id="adver">
<img src="https://img.aigexing.comimages/001.png"/>
</div>
<div id="main">
<img src="https://img.aigexing.comimages/01.png"/>
<img src="https://img.aigexing.comimages/02.png"/>
<img src="https://img.aigexing.comimages/03.png"/>
<img src="https://img.aigexing.comimages/04.png"/>
<img src="https://img.aigexing.comimages/05.png"/>
<img src="https://img.aigexing.comimages/06.png"/>
</div>
</body>
2.用JS把图片定位：
<script type="text/javascript">
var adverTop; //层距页面顶端距离
var adverLeft;
var adverObject; //层对象
window.onload =function(){
adverObject = document.getElementById("adver"); //获得层对象
if(adverObject.currentStyle){
adverTop = parseInt(adverObject.currentStyle.top);
adverLeft = parseInt(adverObject.currentStyle.left);
}
else{
adverTop = parseInt(getComputedStyle(adverObject null).top);
adverLeft = parseInt(getComputedStyle(adverObject null).left);
}
} ;
window.onscroll = function (){
adverObject.style.top = adverTop document.documentElement.scrollTop document.body.scrollTop "px";
adverObject.style.left= adverLeft document.documentElement.scrollLeft document.body.scrollLeft "px";
};
</script>
版权归属：康诺科技
2017/7/19
