分类 HTML & CSS & JS 下的文章

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用jquery制作滚动到指定位置触发动画</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
.gs{
position:relative;
top:100px; 
background-color:#099; 
left:150px; width:80px; 
}
.xz{
animation:roate 2s;
animation-fill-mode:forwards;
animation-direction:alternate;
}
@keyframes roate{
    from { transform:rotate(0deg);
    width:100px;
  height:100px; }
    to{transform:rotate(360deg);
    width:200px;
  height:200px;
    }}
.xs{ width:50px; float: left; height:30px; background-color: #F90; position:fixed; left:700px; top:0px;}
</style>
</head>
 
<body>
<script type="text/javascript">
/*var a,b,c;
a=$("#dh").offset().top;//元素相对于窗口的距离
b=$(window).scrollTop(); //监控窗口已滚动的距离;
c=$(document).height();//整个文档的高度
d=$(window).height();//浏览器窗口的高度
element  标签
cssname  动画
offset  相对于窗口的距离
*/
function scrollnumber(element,cssname,offset){
    var a,b,c,d;
    d=$(element).offset().top;
    a=eval(d + offset);
    b=$(window).scrollTop(); 
    c=$(window).height();
    if(b+c>a){
        $((element)).addClass((cssname));
    }
}
 
function scrollfun(){
    scrollnumber("#dh1",'xz',100);
    scrollnumber("#dh2",'xz',100);
    scrollnumber("#dh3",'xz',100);
    scrollnumber("#dh4",'xz',100);
}
    
$(document).ready(function(e) {
    scrollfun();
    $(window).scroll(function(){
        scrollfun();
    });
});
</script>
 
<div style="height:auto; background-color:#999; width:500px; margin: 0 auto;">
    <div class="com" style="height: 500px;background-color: darkgray;position: relative;">
        <div id="dh1" class="gs" >触发动画111</div>
    </div>
    <div style="height: 600px;background-color: cadetblue;" ></div>
    <div class="com" style="height: 500px;background-color: darkgray;position: relative;">
        <div id="dh2" class="gs" >触发动画222</div>
    </div>
    <div style="height: 600px;background-color: darkseagreen;" ></div>
    <div class="com" style="height: 500px;background-color: darkgray;position: relative;">
        <div id="dh3" class="gs" >触发动画333</div>
    </div>
    <div style="height: 600px;background-color: cadetblue;" ></div>
    <div class="com" style="height: 500px;background-color: darkgray;position: relative;">
        <div id="dh4" class="gs" >触发动画444</div>
    </div>
</div>
</body>
</html>

https://blog.csdn.net/yaoyyl/article/details/51396891

$(function () {
    var imgList=document.getElementById('pic_list');
    if(imgList!=null){
        var imgs=imgList.getElementsByTagName('img');
        var w=imgList.offsetWidth;
        for(var i=0;i<imgs.length;i++){
          imgs[i].onload=function(){
              console.info( this.width,this.height )
              if( w < this.width ) this.width=w;
          }
        }
    }
});

//判断是支付宝app的浏览器
 var userAgent = navigator.userAgent.toLowerCase();

    if(userAgent.match(/Alipay/i)=="alipay"){
        return true;
    }else{
        return false;
    }



//判断是微信app的浏览器
function isWechat(){
    var userAgent = navigator.userAgent.toLowerCase();

    if(userAgent.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

http://blog.csdn.net/xiejunna/article/details/74989704

var time_range = function (beginTime, endTime, nowTime) {
    var strb = beginTime.split (":");
    if (strb.length != 2) {
        return false;
    }

    var stre = endTime.split (":");
    if (stre.length != 2) {
        return false;
    }

    var strn = nowTime.split (":");
    if (stre.length != 2) {
        return false;
    }
    var b = new Date ();
    var e = new Date ();
    var n = new Date ();

    b.setHours (strb[0]);
    b.setMinutes (strb[1]);
    e.setHours (stre[0]);
    e.setMinutes (stre[1]);
    n.setHours (strn[0]);
    n.setMinutes (strn[1]);

    if (n.getTime () - b.getTime () > 0 && n.getTime () - e.getTime () < 0) {
        return true;
    } else {
        alert ("当前时间是：" + n.getHours () + ":" + n.getMinutes () + "，不在该时间范围内！");
        return false;
    }
}
time_range ("21:30", "23:30", "3:22");

效果

2012091317403446

var time_range = function (beginTime, endTime) {
    var strb = beginTime.split (":");
    if (strb.length != 2) {
        return false;
    }

    var stre = endTime.split (":");
    if (stre.length != 2) {
        return false;
    }

    var b = new Date ();
    var e = new Date ();
    var n = new Date ();

    b.setHours (strb[0]);
    b.setMinutes (strb[1]);
    e.setHours (stre[0]);
    e.setMinutes (stre[1]);

    if (n.getTime () - b.getTime () > 0 && n.getTime () - e.getTime () < 0) {
        return true;
    } else {
        alert ("当前时间是：" + n.getHours () + ":" + n.getMinutes () + "，不在该时间范围内！");
        return false;
    }
}
time_range ("21:30", "23:30");

百度、谷歌网站统计可以设置不显示网站统计，但站长统计等就不能了。
如果觉得比较难看，可以把统计代码输出内容隐藏掉，一个很简单的css样式就可以做到。
这不影响统计功能。

<span style="display:none">统计代码</span>

html 标签内容

<div id="navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="photos.html">Photos</a></li>
    <li><a href="live.html">Live</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

JavaScript 代码

function highlightPage() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("navigation")) return false;
  var nav = document.getElementById("navigation");
  var links = nav.getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    var linkurl = links[i].getAttribute("href");
    var currenturl = window.location.href;
    if (currenturl.indexOf(linkurl) != -1) {
      links[i].className = "here";
      var linktext = links[i].lastChild.nodeValue.toLowerCase();
      document.body.setAttribute("id",linktext);
    }
  }
}

利用溢出隐藏CSS样式实现两个浮动DIV保持同高度，让左边栏DIV和右内容DIV高度保持一致。实例代码如下：

HTML代码

<div id="center">
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS代码

#center{
 width:100%;
 height:100%;
 overflow:hidden;
}

#left{
 width:20%;
 float:left;
 background:#9c9c9c;
 margin-bottom:-3000px;
 padding-bottom:3000px;
}

#right{
 width:80%;
 float:right;
 background:#323232;
 margin-bottom:-3000px;
 padding-bottom:3000px;
}
  1. 1
  2. 2