今天给同学找我帮忙写js，是公司里的活。。我是不是应该跟他要钱哈哈，不过一顿饭肯定是免不了的了。

言归正传，今天写了三个小东西，因为兼容性的问题，用jq写的(很是别扭的说，但是没办法啊，一边看api一边写来着)

第一个问题是个简单的动画问题，没啥可说的。

第二个问题是要给常用的导航栏hover效果加个背景颜色渐变的动画。具体来说就是本来是鼠标移上去加上背景色，移除消除背景色，本来css加个hover背景色就解决的问题，需求非要让背景色添加/移除加上动画渐变。本来以为直接在backgroundColor上写动画就行了，从蓝色到白色，结果一查才知道jq是不支持背景颜色动画的，其实也是，因为动画的每个节点的颜色都是要变的，其中的函数需要另外去写（听说是有相关插件的，不过不到迫不得已我是不会用插件的，宁愿自己写。。）。然后又想到只要调透明度就行了呗，0到1。但是问题又来了，opacity属性是调这个元素的透明度的，而实际需要让文字一直显示。于是想到rgba来设置背景透明度，但是rgba本身是个css3效果，而且jq好像也没听说可以把rgba做成动画的。所以用了一个特别笨的办法，把文字和背景放在两个div里。让放背景的div透明度变化。如果亲们有其他的方法请不吝赐教。

第三个问题是关于定位的问题的，一个弹窗根据点击位置出现。在用jq的时候想到了之前一直忽略的问题。开始的时候获取div的scroll高度我写法是$(div).scrollTop写完了发现一直是0，才想到以前写scroll都是写body/htmlElement.scrollTop的。。查了下才知道，如果div没有滚动条的话，scroll就是0。

写的有点乱，先去吃饭了。。

问题杂烩(scrollTop/背景透明度动画)的更多相关文章

  1. android 背景透明度渐变动画

    button.setVisibility(View.VISIBLE); // 背景透明度渐变动画 ObjectAnimator alpha = ObjectAnimator.ofFloat(butto ...

  2. scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )

    今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...

  3. 日常css技巧小结（1）--背景透明度改变对内容无影响

    刚开始出现的错误,内容会受到背景透明度改变的影响:如图: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  4. js实现匀速运动及透明度动画

    1.html代码 <body> <div id="container"> <span id="btn"></span& ...

  5. 如何设置TextView控件的背景透明度和字体透明度

    如何设置TextView控件的背景透明度和字体透明度 设计师给的标注都是类似这样的: 字号:26 颜色:#000000 透明度:80% 其实,程序上只要需要一个色值就OK了,那么这个色值我如何计算呢? ...

  6. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  7. js动画实现透明度动画

    在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...

  8. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  9. 设置TextView控件的背景透明度和字体透明度

    TextView tv = (TextView) findViewById(R.id.xx); 第1种:tv.setBackgroundColor(Color.argb(255, 0, 255, 0) ...

随机推荐

  1. java中什么是bridge method（桥接方法）

    java中什么是bridge method(桥接方法) https://blog.csdn.net/z69183787/article/details/81115524

  2. 02 Memcache add详细介绍

    一:Memcached add 命令参数 ()add key flag expire length [增] key: 键名(起一个独立的名字) flag 标志,要求为一个正整数 备注:()当Memca ...

  3. tomcat下发布项目，遇到的问题总结

    以前一直是在eclipse下启动tomcat,然后访问web项目.今天脑门一热,就想用tomcat的bin目录下的startup.bat来启动tomcat,虽然tomcat的启动很顺利,但是访问网页的 ...

  4. MySQL合并多行

    select id,group_concat(re_id order by re_id separator ",") as re_idfrom tablenamegroup by ...

  5. [BJWC2012]冻结

    [BJWC2012]冻结 luogu BZOJ 分层图最短路,层与层之间连半边权边 #include<bits/stdc++.h> using namespace std; const i ...

  6. CentOS查看和修改MySQL字符集

    通过以下命令查看了MySQL的字符集 连接上mysql服务,输入以下命令 mysql>show variables like 'character_set%'; 显示如下: 为了让MySQL支持 ...

  7. Jquery禁用所有checkbox

    $("input[type=checkbox]").each(function(){ $(this).attr("disabled",false);});

  8. centos7 Authentication failure

    root@localhost ~]#su bash-4.2$ su Password: su: Authentication failure //这里切换的是系统用户,现在还不清楚为什么postgre ...

  9. 短时程突触可塑性（short-term synaptic plasticity）

    介绍 神经元的突触可塑性一般被认为是大脑学习与记忆的分子生物学机制,它是指突触传递效率增强或减弱的变化现象.若这种变化只持续数十毫秒到几分,便称之为短时程突触可塑性,其中效率增强与减弱分别叫做短时程增 ...

  10. C# Lambda表达式与Linq

    , , , , , , }; //linq写法 var res = from i in arry select i; //lambda写法 var res = arry.Select(i => ...