效果圖展示一下
實(shí)現(xiàn)的是滾動(dòng)哪一個(gè)區(qū)域,然后展示這個(gè)類名,離開這一個(gè)區(qū)域類名刪除
jq代碼
第一個(gè)函數(shù)? H_heighs 只需要傳兩個(gè)參數(shù) 一個(gè)是需要執(zhí)行動(dòng)畫的區(qū)域,第二個(gè)是執(zhí)行動(dòng)畫添加的類名,我用的直接是?animate這個(gè)css庫(kù).
第二個(gè)函數(shù)?zi_heighs 傳3個(gè)參數(shù) 第一個(gè)是需要執(zhí)行動(dòng)畫的區(qū)域 ,第二個(gè)是動(dòng)畫類名 第三個(gè)是 執(zhí)行動(dòng)畫的子元素
第三個(gè)函數(shù)?adds 參數(shù)和第二個(gè)參數(shù)含義一樣 實(shí)現(xiàn)的效果是 鼠標(biāo)劃過直接效果
哪個(gè)區(qū)域需要效果 直接調(diào)用函數(shù)一次 添加類名就行
思路:? 滾動(dòng)的時(shí)候判斷? 頁(yè)面滾動(dòng)大于內(nèi)容區(qū)域距離頂部區(qū)域的時(shí)候添加類名(為了偏差故意減去300);? ?
在判斷刪除類名? ?頁(yè)面滾動(dòng)小雨內(nèi)容區(qū)域距離頂部區(qū)域的時(shí)候 并且??頁(yè)面滾動(dòng)大于內(nèi)容區(qū)域距離頂部區(qū)域 并加上 這個(gè)區(qū)域元素本身的高度 刪除類名;
附上jq代碼:
$(function () {
? ? ? ? ? ? // 外面總元素添加事件
? ? ? ? ? ? function H_heighs(pa_one, pa_two, daughter) {
? ? ? ? ? ? ? ? var zong = $(window).scrollTop();
? ? ? ? ? ? ? ? var hei_1 = $(pa_one).offset().top - 300;
? ? ? ? ? ? ? ? var data_he = $(pa_one).height();
? ? ? ? ? ? ? ? if (zong > hei_1) {
? ? ? ? ? ? ? ? ? ? $(pa_one).addClass(pa_two);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (zong < hei_1 || zong > hei_1 + data_he) {
? ? ? ? ? ? ? ? ? ? $(pa_one).removeClass(pa_two);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? $(window).on("scroll", function () {
? ? ? ? ? ? ? ? H_heighs('.i_data_one', 'animated bounceInLeft');
? ? ? ? ? ? ? ? H_heighs('.i_data_two', 'animated lightSpeedIn');
? ? ? ? ? ? ? ? H_heighs('.i_data_thr', 'animated fadeInLeft');
? ? ? ? ? ? ? ? H_heighs('.i_data_four', 'animated fadeInRight');
? ? ? ? ? ? })
? ? ? ? ? ? // 子元素添加事件
? ? ? ? ? ? function zi_heighs(pa_one, pa_two, daughter) {
? ? ? ? ? ? ? ? var zong = $(window).scrollTop();
? ? ? ? ? ? ? ? var hei_1 = $(pa_one).offset().top - 300;
? ? ? ? ? ? ? ? var data_he = $(pa_one).height();
? ? ? ? ? ? ? ? if (zong > hei_1) {
? ? ? ? ? ? ? ? ? ? $(pa_one).find(daughter).addClass(pa_two);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (zong < hei_1 || zong > hei_1 + data_he) {
? ? ? ? ? ? ? ? ? ? $(pa_one).find(daughter).removeClass(pa_two);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? $(window).on("scroll", function () {
? ? ? ? ? ? ? ? zi_heighs('.i_brilliant', 'animated rotateInDownLeft', '.wrap');
? ? ? ? ? ? ? ? zi_heighs('.i_arrange', 'animated bounceInDown', '.wrap');
? ? ? ? ? ? })
? ? ? ? ? ? // 加上$.fn是綁定頁(yè)面元素的插件? $.是綁定jq上的插件
? ? ? ? ? ? $.extend({
? ? ? ? ? ? ? ? adds: function (a, b, c) {
? ? ? ? ? ? ? ? ? ? $(a).hover(function () {
? ? ? ? ? ? ? ? ? ? ? ? $(this).find(b).addClass(c);
? ? ? ? ? ? ? ? ? ? }, function () {
? ? ? ? ? ? ? ? ? ? ? ? $(this).find(b).removeClass(c);
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? $.adds('.i_data_fl', 'img', 'animated shake');
? ? ? ? })
