首页 > 代码库 > 2016/10/24 笔记总结

2016/10/24 笔记总结

2024-08-17 15:59:26   218人阅读

1.css3 动画：通过设置图片的opacity 来到hover时的动画：

.nr_mod_service_hp_bottom_ts .inner .item .pic a .d_img { filter: alpha(opacity=100); opacity: 1; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a:hover .d_img { filter: alpha(opacity=0); opacity: 0; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a .h_img { left: -30px; position: absolute; top: 0; filter: alpha(opacity=0); opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; 
-o-transition: 0.3s; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a:hover .h_img { left: 0; filter: alpha(opacity=100); opacity: 1; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a .hover_arrow { height: 52px; left: 36px; position: absolute; top: 76px; width: 32px; opacity: 0; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;
 -o-transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a:hover .hover_arrow { left: 86px; opacity: 1; }

2.返回顶部代码：

function gotoTop2(min_height) {
$("#gotoTop2").click(function () {$(‘html,body‘).animate({ scrollTop: 0 }, 700);})
            //获取页面的最小高度，无传入值则默认为300像素
            min_height ? min_height = min_height : min_height = 300;
            //为窗口的scroll事件绑定处理函数
            $(window).scroll(function () {
            //获取窗口的滚动条的垂直位置
            var s = $(window).scrollTop();
            //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
                if (s > min_height) {
                    $("#gotoTop2").fadeIn(100);
                } else {
                    $("#gotoTop2").fadeOut(200);
                };
            });
        };
        gotoTop2();

scrollTop([val])----------------------css

概述

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

参数

val                                    String, Number

设定垂直滚动条值

scroll([[data],fn])---------------------------事件

概述

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

参数

fn                                     Function

在每一个匹配元素的scroll事件中绑定的处理函数。

[data],fn                          String,Function

data:scroll([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的scroll事件中绑定的处理函数。

3.　tab     jquery简单实现tab选项卡效果

4.banner

1.通过li的淡入淡出实现

http://www.hxjq.cn/

技术分享 
<div class="banner_wrap" id="ban-ie">
    <div id="banner0">
      <div id="bannerin">
        <ul>
          <li id="firstimg"><a href="/1.html" target="_blank"><img class="sliderimg" src="/images/01.jpg" alt="颚式破碎机 30年精心打造" border=‘0‘ /></a></li>
 <li><a href="/6.html" target="_blank"><img class="sliderimg" src="/images/02.jpg" alt="圆锥破 亚洲最大生产基地" border=‘0‘ /></a></li>
 <li><a href="/8.html" target="_blank"><img class="sliderimg" src="/images/03.jpg" alt="移动式破碎站 灵动高效、性能可靠" border=‘0‘ /></a></li>
 <li><a href="/14.html" target="_blank"><img class="sliderimg" src="/images/04.jpg" alt="雷蒙磨粉机 高科技磨辊祝您实现高产能效益" border=‘0‘ /></a></li>
 <li><a href="/capacity.html" target="_blank"><img class="sliderimg" src="/images/05.jpg" alt="红星机器车间 高端矿机专家与领导者" border=‘0‘ /></a></li>
        </ul>
      </div>
      <div id="scrollin"> <span class="on"></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> </div>
      <div class="fadein" id="arrowin">
        <ul>
          <li class="arrow_left"> <a href="javascript:void(0)" class="fn-left"></a> </li>
          <li class="arrow_right"> <a href="javascript:void(0)" class="fn-right"></a> </li>
        </ul>
      </div>
    </div>
  </div>
View Code
   var index, picTimer, len, width;
      window.onload = window.onresize = function () {
          index = 0;
          len = $("#bannerin li").length;
          width = document.body.clientWidth || window.innerWidth;
          if (width > 1660) {
              width = 1660;
          };
          var scrollWidth = $("#scrollin").width();
          var height = parseInt(width * 450 / 1660);
          $("#banner").css(‘height‘, height);
          $("#bannerin").css(‘height‘, height);
          $("#bannerin li").width(width);
          $("#bannerin ul").width(width * len);
          $("#scrollin").css(‘left‘, parseInt((width - scrollWidth) / 1.99));
          $("#arrowin li").css(‘height‘, height);
          $("#arrowin a").css(‘top‘, parseInt((height - 120) / 2));
      };
      $("#scrollin span").mouseenter(function () {
          index = $("#scrollin span").index(this);
          showPics(index, width);
      });

      picTimer = setInterval(_scroll, 4000);
      $("#bannerin img").hover(function () {
          $("#arrowin").addClass(‘fadein‘);
          clearInterval(picTimer);
      }, function () {
          $("#arrowin").removeClass(‘fadein‘);
          picTimer = setInterval(_scroll, 4000);
      });
      $("#arrowin li").hover(function () {
          $("#arrowin").addClass(‘fadein‘);
          $("#arrowin a").css(‘opacity‘, ‘1‘);
      }
      , function () {
          $("#arrowin a").css(‘opacity‘, ‘0‘);
          $("#arrowin").removeClass(‘fadein‘);
      }
      );
      $("#arrowin a").click(function () {
          clearInterval(picTimer);
          if ($(this).is(‘.fn-left‘)) {
              index--;
          } else {
              index++;
          };
          if (index == len) {
              index = 0;
          };
          if (index == -1) {
              index = len - 1;
          };
          showPics(index, width);
          picTimer = setInterval(_scroll, 4000);
      });
      function showPics(index, width) {
          var nowLeft = -index * width;
          $("#scrollin span").stop(true, true).removeClass(‘on‘).eq(index).addClass(‘on‘);
          $("#bannerin ul").stop(true, true).animate({ "left": nowLeft }, 1000, ‘easeInOutQuint‘);
      }
      function _scroll() {
          showPics(index, width);
          index++;
          if (index == len) {
              index = 0;
          };
      }

 

2.通过ul的left实现

http://www.hxjq.com.cn/

  <div id="banner">
        
        <div id="banner_point">
            <ul>
                <li class="on" val="1"></li>
                <li val="2"></li>
                <li val="3"></li>
                <li val="4"></li>
            </ul>
        </div>
        <!--标题-->
        <div id="banner_list">
            <a
                style="display: inline;" href="http://www.hxjq.com.cn/product1.html">
                <img src="images/newbanner1.jpg" border="0" /></a><a class="Bnone"
                    style="display: none;"
                    href="http://www.hxjq.com.cn/9.html"><img src="images/newbanner2.jpg" border="0" /></a><a class="Bnone"
                        style="display: none;"
                        href="http://www.hxjq.com.cn/7.html"><img src="images/newbanner3.jpg" border="0" /></a><a class="Bnone"
                            style="display: none;"
                            href="http://www.hxjq.com.cn/18.html"><img src="images/newbanner5.jpg" border="0" /></a>
        </div>
    </div>
var t = n = 0, count;
jQuery(document).ready(function () {
  
    count = jQuery("#banner_list a").length;
    //jQuery("#banner_list a:not(:first-child)").hide();

    jQuery("#banner_info").html(jQuery("#banner_list a:first-child").find("img").attr(‘alt‘));
    jQuery("#banner_info").click(function(){window.open(jQuery("#banner_list a:first-child").attr(‘href‘), "_blank")});
    jQuery("#banner li").click(function() {
       var i = jQuery(this).attr("val") - 1;//获取Li元素内的值，即1，2，3，4
       n = i;
        if (i >= count) return;
        jQuery("#banner_info").html(jQuery("#banner_list a").eq(i).find("img").attr(‘alt‘));
        jQuery("#banner_info").unbind().click(function(){window.open(jQuery("#banner_list a").eq(i).attr(‘href‘), "_blank")})
        jQuery("#banner_list a").filter(":visible").fadeOut(50).parent().children().eq(i).fadeIn(800);
        document.getElementById("banner").style.background="";
        jQuery(this).toggleClass("on");
        jQuery(this).siblings().removeAttr("class");
    });
    t = setInterval("showAuto()", 5000);
    jQuery("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});
})

function showAuto(){
    n = n >=(count - 1) ? 0 : ++n;
    jQuery("#banner li").eq(n).trigger(‘click‘);
}
//点弹层
jQuery("#banner_point ul li").hover(function(){
    jQuery(this).addClass("cur");
},function(){
    jQuery(this).removeClass("cur");
});

//测量高度
//var h = jQuery("#banner_list a:first").height();
//jQuery("#banner").height(h);


//2016年8月2日11:49:05添加为了banner绽放时高度自动
   
 $(window).resize(function () {
           $.setApDiv();
       });
 jQuery.extend({
     setApDiv: function () {
         var bodywidth=document.body.clientWidth;
         if(bodywidth>1600)
         {
             bodywidth=1600;
             }
         var heightimg = bodywidth*383/1600;
         $("#banner").height(heightimg);
         //alert(heightimg); 
     }
 });
 document.onload =$.setApDiv();//打开就先执行一次，此方法应在在这条语句之前就被定义。
//2016年8月2日11:49:05添加为了banner绽放时高度自动
       
       
//banner左下三按钮
jQuery(function(){
    jQuery(".bcl").hover(function(){
        jQuery(this).toggleClass("bHover");
    },function(){
        jQuery(this).removeClass("bHover");
    });
})
//三按钮内菜单展开收缩
jQuery(document).ready(
function() 
{
    jQuery(".stepTitle").click(function(){
        
        jQuery(this).next("ul").slideToggle("fast")
        .siblings(".stepContent:visible").slideUp("fast");
        jQuery(this).toggleClass("active");
        jQuery(this).siblings(".active").removeClass("active");
        jQuery(this).parent().parent().find(".BtnC_rightContent img").attr("src",jQuery(this).find("a").attr("title"));
        
    
    });
});
jQuery(function(){
    jQuery(".stepContent li").click(function(){
        jQuery(".stepContent li").removeClass("active");
        jQuery(this).addClass("active");
    });
});

 

2016/10/24 笔记总结


联系
我们