您的位置:首页 > Web前端 > JQuery

jQuery学习-悬停广告

2020-08-15 00:22 876 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.left,.right{
width: 200px;
height: 200px;
position: absolute;
top: calc(50% - 100px);
}
.left{
left: 0;
}
.right{
right: 0;
}
.left img,.right img{
height: 100%;
width: auto;
position: absolute;
right: 0;

}
h1{
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$(window).scroll(function(e){

var scrollY=$(window).scrollTop();
console.log(scrollY);

var height=$(window).height()//当前窗口高度
console.log(height);

//定位位置
var y=scrollY+height/2
$(".ad").stop(true).animate(
{
top:y+"px",
},1000)

})
})
</script>
<div class="left ad">
<img src="img/image1.jpg" >
</div>
<div class="right ad">
<img src="img/image2.jpg" >
</div>
<h1>内容1</h1>
<h1>内容2</h1>
<h1>内容3</h1>
<h1>内容4</h1>
<h1>内容5</h1>
<h1>内容6</h1>
<h1>内容7</h1>
<h1>内容8</h1>
<h1>内容9</h1>
<h1>内容10</h1>
<h1>内容11</h1>
<h1>内容12</h1>
<h1>内容13</h1>
<h1>内容14</h1>
<h1>内容15</h1>
<h1>内容16</h1>
<h1>内容17</h1>
<h1>内容18</h1>
<h1>内容19</h1>
<h1>内容20</h1>
<h1>内容21</h1>
<h1>内容22</h1>
<h1>内容23</h1>
<h1>内容24</h1>
<h1>内容25</h1>
<h1>内容26</h1>
<h1>内容27</h1>
<h1>内容28</h1>
<h1>内容29</h1>
<h1>内容30</h1>
<h1>内容31</h1>
<h1>内容32</h1>
<h1>内容33</h1>
<h1>内容34</h1>
<h1>内容35</h1>
<h1>内容36</h1>
<h1>内容37</h1>
<h1>内容38</h1>
<h1>内容39</h1>
<h1>内容40</h1>
<h1>内容41</h1>
<h1>内容42</h1>
<h1>内容43</h1>
<h1>内容44</h1>
<h1>内容45</h1>
<h1>内容46</h1>
<h1>内容47</h1>
<h1>内容48</h1>
<h1>内容49</h1>
<h1>内容50</h1>
<h1>内容51</h1>
<h1>内容52</h1>
<h1>内容53</h1>
<h1>内容54</h1>
<h1>内容55</h1>
<h1>内容56</h1>
<h1>内容57</h1>
<h1>内容58</h1>
<h1>内容59</h1>
<h1>内容60</h1>
<h1>内容61</h1>
<h1>内容62</h1>
<h1>内容63</h1>
<h1>内容64</h1>
<h1>内容65</h1>
<h1>内容66</h1>
<h1>内容67</h1>
<h1>内容68</h1>
<h1>内容69</h1>
<h1>内容70</h1>
<h1>内容71</h1>
<h1>内容72</h1>
<h1>内容73</h1>
<h1>内容74</h1>
<h1>内容75</h1>
<h1>内容76</h1>
<h1>内容77</h1>
<h1>内容78</h1>
<h1>内容79</h1>
<h1>内容80</h1>
<h1>内容81</h1>
<h1>内容82</h1>
<h1>内容83</h1>
<h1>内容84</h1>
<h1>内容85</h1>
<h1>内容86</h1>
<h1>内容87</h1>
<h1>内容88</h1>
<h1>内容89</h1>
<h1>内容90</h1>
<h1>内容91</h1>
<h1>内容92</h1>
<h1>内容93</h1>
<h1>内容94</h1>
<h1>内容95</h1>
<h1>内容96</h1>
<h1>内容97</h1>
<h1>内容98</h1>
<h1>内容99</h1>
<h1>内容100</h1>
</body>
</html>

结果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: