朗读

jQuery实现弹窗和页面置顶

文章目录[x]
  1. 1:弹窗的实现
  2. 2:页面置顶

其实在学了bootstrap(基于jQuery)开源框架之后,这些功能都被封装好了,直接就可以使用,不过这篇文章用jQuery库实现,了解一下底层原理。

jQuery

先来叙述一下jQuery:

jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。

jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。

jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用,相当方便。

jquery的口号和愿望 :Write Less, Do More(写得少,做得多)

http://jquery.com/ 官方网站
https://code.jquery.com/ 版本下载

弹窗的实现

先看一下效果

代码实现:

css:

<style type="text/css">
.pop_con{

display: none;
}
.pop{
position: fixed;
width: 500px;
height: 300px;
background-color: #fff;
border:3px solid green;
left: 50%;
top:50%;
margin-left: -253px;
margin-top: -153px;
z-index: 9999;

}
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
left: 0;
top: 0;
z-index: 9990;

}
.close{

float: right;
font-size: 30px;
text-decoration: none;
width: 30px;
height: 30px;
background-color: rgba(220,120,150,1);
position: relative;
line-height: 20px;
text-align: center;
font-weight: bold;
border-radius: 50%;
color: #000;

}
#btn{
width: 100px;
height: 40px;
border-radius: 25px;
font-size: 20px;
font-weight: bold;
background-color: pink;

}

</style>

js:

<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){

$('.pop_con').fadeIn();
return false;

})

$(document).click(function(){

$('.pop_con').fadeOut();

})

$('.pop').click(function(){

return false;

})
$('#close').click(function(){

$('.pop_con').fadeOut();

})

})

</script>

body:

<body>
<input type="button" name="" value="弹出" id="btn">
<div class="pop_con">
<div class="pop">
弹框里面
<a href="" class="close" id="close">×</a>
</div>

<div class="mask">
</div>

</div>
</body>

页面置顶

先看一下效果

代码实现:

<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<style type="text/css">
body{

margin: 0;

}
.menu{
width: 694px;
height: 50px;
/*background-color: cyan;*/
margin: 50px auto 0;
font-size: 0px;

}

.menu a{
width: 98px;
height: 48px;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid gold;
font-size: 16px;
margin-left: -1px;
text-align: center;
line-height: 48px;
text-decoration: none;
color: pink;
font-family: Microsoft Yahei;
}
.menu a:hover{
background-color: gold;
color: #fff;
}
.totop{
width: 40px;
height: 40px;
background-color:#000;
color: #fff;

position: fixed;
right: 20px;
bottom: 50px;
line-height: 40px;
text-align: center;
font-size: 25px;
border-radius: 50%;
cursor: pointer;
display: none;
opacity: 0.6;

}
p{
text-align: center;
color: red;
}

</style>
<script type="text/javascript">
$(function(){
$totop = $('.totop');

$(window).scroll(function(){
var iNum = $(document).scrollTop();
if (iNum>400) {
$totop.fadeIn();

}else{

$totop.fadeOut();

}

})

$totop.click(function(){
$('html,body').animate({'scrollTop':0},800)

})

})
</script>

 

 

<!-- 只是body下的代码-->

<div class="menu">
<a href="" class="a">首页</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>
<a href="">公司简介</a>

</div>
<div class="totop">↑</div>
<p>这是一个p标签</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>这是一个p标签</p>

 

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00