jquery的应用

最新推荐文章于 2024-01-24 19:49:16 发布

YangtzeX

最新推荐文章于 2024-01-24 19:49:16 发布

阅读量151

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/YangtzeX/article/details/92798043

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jquery的总结

图片高度自适应:

$(function(){
   $("img").addClass("img-responsive center-block")
})

<head>
 	<style>
	 .stick{
	    position: fixed;
	    bottom: 100px;
	    right: 50px;
	    width: 50px;
	    display: flex;
	    flex-direction: column;
	    opacity: 0;
	    transform: translateX(150px);
	    z-index: 99;
 	    transition: all 0.5s;
	  }
	  /* show是通过jquery添加的样式- */
	  .show{ 
	    transform:none;
	    opacity: 1;
	  }
	  .stick>a{
	    width: 100%;
	    height: 50px;
	    border-radius: 50%;
	    background: #F97E05;
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-bottom: 10px;
	    z-index: 100;
	  }
	  .stick>a ul{
	    width: 0;
	    position: absolute;
	    top: 0;
	    right: 50%;
	    height: 50px;
	    display: flex;
	    background: #F97E05;
	    padding: 0 10px;
	    border-top-left-radius: 50px;
	    border-bottom-left-radius: 50px;
	    overflow: hidden;
	    z-index: -1;
	    opacity: 0;
	    transition: all 0.5s;
	  }
	  .stick>a ul li{
	    display: flex;
	    align-items: center;
	    margin-right: 15px;
	  }
	  .stick>a ul li span{
	    display: flex;
	    white-space: nowrap;
	    color: #fff;
	  }
	  .stick-btn:hover>ul{
	    opacity: 1;
	    width: 100px;
	  }
	  .stick i{   
	    margin-right: 10px;
	    margin-left: 10px;
	    color: #fff;
	    font-size: 25px;
	  }
	  .stick-btn li{
	    margin-left: 10px;
	  }
	</style>
</head>
<body>
	<div class="stick">
      <a class="stick-btn">
         <i class="iconfont icon-fanhuidingbu"></i>
         <ul>
           <li>
             <span>返回顶部</span>
           </li>
         </ul>
       </a>
    </div>
    <script>
		$(function(){
			$(".stick-btn").on("click",function(e){
				e.preventDefault();  //阻止事件的默认行为
				$("html,body").animate({scrollTop:"0px"},500);    // 滚动条跳到0的位置,页面移动速度500
				// $("html,body").animate({scrollTop:$(".footer).offset().top},500)  //返回底部
				return false;
			});
			var offset = $(window).height() - 100;
			$(window).on("scroll",function(){
				// scrollTop() 方法返回或设置匹配元素的滚动条垂直位置
				// offset:可选,规定相对滚动条顶部的偏移的位置
				if ($(this).scrollTop() > offset){
					$(".stick").addClass("show")
				} else {
					$(".stick").removeClass("show")	
				}
			})
		})
	</script>
</body>

效果:①当滚动条滚动到一定位置,页面右下角出现这个返回顶部的按钮
在这里插入图片描述
效果:②当鼠标悬停在这个图标上时,左侧滑出返回顶部字样,点击这个图标时页面到返回顶部

3.轮播图(基于bootstrap)

<head>
	<style>
		.swiper-container0{
    		width: 100%;
		}
		.swiper-container0 img{
		    width: 100%;
		    height: auto;
		    object-fit:cover;
		}
		@media (max-width: 1900px){
		    .swiper-container{
		        width: 100%;
		    }
		}
	</style>
</head>
<body>	
	<div class="swiper-container swiper-container0" style="width:100%;">
	    <div class="swiper-wrapper">
	      <div class="swiper-slide"><img class="img-responsive center-block" src="images/banner_1.jpg"></div>
	      <div class="swiper-slide active"><img class="img-responsive center-block" src="images/banner_2.jpg"></div>
	      <div class="swiper-slide"><img class="img-responsive center-block" src="images/banner_3.jpg"></div>
	      <div class="swiper-slide"><img class="img-responsive center-block" src="images/banner_4.jpg"></div>
	      <div class="swiper-slide"><img class="img-responsive center-block" src="images/banner_5.jpg"></div>
	    </div>
	    <div class="swiper-pagination"></div>
	    <div class="swiper-button-prevs" aria-disabled="false"><i class="iconfont icon-zuofanye-xue"></i></div>
	    <div class="swiper-button-nexts" aria-disabled="false"><i class="iconfont icon-youfanye-xue"></i></div>
	  </div>	
	  <script>	
			// 计算窗口高度
			$(function(){	
				if($(window).width<=1024px){
					$(".swiper-container0 img").css({"height" : "auto"});
				}	
			})	
			
			var swiper = new Swiper(".swiper-container0",{
				slidesPerView: 1,
				spaceBetween: 0,
				autoplay: {
					delay: 2500, //轮播速度
					disableOnInteraction: false,	
				},
				pagination: {
					el: ".swiper-pagination",
					clickable: true,	
				},
				navigation: {	
					nextEl: ".swiper-button-nexts",
					prevEl: ".swiper-button-prevs",	
				}
			})
	  </script>
</body>

效果:
在这里插入图片描述

YangtzeX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的应用

jquery的总结图片高度自适应:$(function(){ $("img").addClass("img-responsive center-block")})返回顶部效果<head> <style> .stick{ position: fixed; bottom: 100px; right: 50px; ...
复制链接

扫一扫