fideasray官网总结

最新推荐文章于 2021-12-10 22:35:44 发布

米儿web

最新推荐文章于 2021-12-10 22:35:44 发布

阅读量209

点赞数

分类专栏： web前端-项目总结

本文链接：https://blog.csdn.net/qq_24767091/article/details/78084869

版权

web前端-项目总结专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、用到的jq

1.获取当前点击的元素

	 $(document).click(function  (e) {
	 	var e_id= $(e.target).attr('id');
	 })

2.几秒之后执行动作

setTimeout(function  () {
             btn.removeAttribute('disabled');
              window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=activity.com.packetvision';
  },2000);

3.获取页面路径，截取路径，根据页面更改页面内容

// 获取页面地址
		var pagePath = window.location.href;
		var indexL = pagePath.lastIndexOf("\/")+1;
		var indexR = pagePath.lastIndexOf("\.");

		str = pagePath.substring(indexL,indexR);
		
		// 获取页面宽度
		var pageWidth = $(window).width();
		var imgPath;
		if (pageWidth>767) {
			// 手机
			imgPath = "/fbook/Public/Home/img/website/"+str+".jpg";
		}else{
			// PCbanner
			imgPath = "/fbook/Public/Home/img/website/"+str+"-xs.jpg";
		}
		$("#bannerImg").attr('src',imgPath);

3.css矩阵动画

.article-title{text-align: center;padding-bottom: 20px;visibility: hidden;opacity: 0;transform: matrix(0.9, 0, 0, 0.9, 0, 10);-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;}
.article-title.title-show{visibility: inherit;opacity: 1;transform: matrix(1, 0, 0, 1, 0, 0);}
// 滑动出现动画
                function titleMatrixShow(object){
                    var titleOffTop = object.offset().top-750;
                    $(window).scroll(function(){
                        if ( $(window).scrollTop()>=titleOffTop) {
                            console.log(1);
                            object.addClass('title-show');
                        }
                    })
                }
titleMatrixShow($('.artical-wrap .article-title-one'));