2016/10/24 笔记总结

.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