2016/10/24 笔记总结

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>

   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");
    });
});
时间： 2024-11-08 19:06:40

2016/10/24 笔记总结的相关文章

2016.10.24 继续学习

今天继续学习,进入面向对象的学习. 1.输出换行可以这样输出 System.out.println(); 2.数组学得有点蒙.... public class PracMultiArray { public static void main(String[] args) { int[][] a1 = {{1, 2, 4}, {3, 1, 2}, {14, 5, 3}}; System.out.println(a1[1][2]); for(int i=0;i<a1.length;i++){ for

2016/1/24 笔记 集合类 异常

集合类: 一,与数组的区别 数组 ①数组必须先指定长度  ②长度固定  ③一般放基本数据类型 集合 ①不用指定长度  ②长度可变  ③一般访对象 二,分类 Collection list 1, Arraylist ①实现了可变数组  ②有序数据集合         ③方法 add(对象实例)  size()  get(索引)                                            set(索引,对象)                                 

每日一記（2016/10/24）

1,測試IO性能的小工具Bonnie 2,redo log切換hang住問題 症狀表現alert日誌是checkpoint not completed ,就是dbwr寫buffer(準確的是寫checkpoint queue鏈)的速度趕不上redo log切換的速度,redo log切換必須是寫inactive/unsued狀態的redo log.此時從v$log裡面看,除了當前的current狀態,其餘都是active狀態 原因從如下幾個方面考慮: ①DBWn進程太少,太繁忙(通過觀察dbwn

Andriod学习过程（每日更新2016/10/9）

从2016/10/9日开始自学Andriod,菜鸟晋级有很多不会的东西,整理出自己觉得比较好用的笔记仅供后人参考.首先下载Andriod studio,网址http://www.android-studio.org/  安转后会提示没有还要安装SDK,SDKhttp://android-sdk.en.softonic.com/  都配置好以后新建项目, Application name:项目名称 Company Domain:公司域名 Package name:app打包名称 project l

每周例行报告2016.10.07-2016.10.14

PSP 日期 类型 任务 开始时间 结束时间 被打断时间(min) 实际(min) 2016.10.07 需求分析 看spec,分析每个功能的需求 14:59 15:38 3 36 编码学习 设计文件存放.分词.词频统计,阅读同学的代码 15:44 17:11 5 82 编码学习 词频排序.读取目录下书目.主函数设计 19:00 21:26 19 127 2016.10.08 编码学习 学习重定向 15.01 15:39 2 36 代码复审 写博客.调试运行结果 15:45 17:12 6 81

背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

原文:背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 示例1.ModelMVVM/Model/Product.cs /* * Model 层的实

每周进度及工作量统计——2016.10.13-2016.10.20

项目:四则运算出题程序--GUI支持和改进 项目类型:结对项目 项目成员:张金生    张政 项目完成情况:已完成 项目改进:已变更,GUI支持,错题本,倒计时等 项目日期:2016.10.11-2016.10-13 C类别 C内容 S开始时间 E结束时间 I间隔 T净时间 P预计时间 分析 改进设计  9:25  10:39  9  65  60 编码 功能优化  10:42  22:43  163  557  500   补全功能 +18:18 +21:54  47  169  240 编码

每周进度及工作量统计——2016.10.06-2016.10.13

项目:词频统计--web支持 项目类型:个人项目 项目完成情况:已完成 项目改进:新项目 项目日期:2016.10.9-2016.10.10 C类别 C内容 S开始时间 E结束时间 I间隔 T净时间 P预计时间 分析 设计  9:12  10:37  55  30  20 学习 查阅资料  10:37  11:46  0  69  30 编码 实现上传  16:03  21:53  127  223  180 优化 改进 9:56 17:41  149  316  120 文档 程序说明,随笔

2016.10.30 对时间的感悟

2016.10.30 对时间的感悟 时间的单位是什么,年,月日,时,分秒? 对于我们来说时间应该是这辈子,然后被我们 切割成一个个时间段,这很有意思, 其实我想说, 有时候我们感觉来不及, 我们很烦躁, 我们快乐不起来, 可能是因为我们没有在自己规定的时间段完成规定的目标, 我们希望小孩上好的学校, 希望工资高点, 希望今天公安局办理身份证的人员有上班等等, 当我们完不成目标的时候就会有各种不良反应, 不是说有目标不好,有目标是很好的,这没毛病, 问题是我们在不够了解这个世界的规则的情况下常常高