随身笔记

作者： admin

  • 基于jquery让图片滚动到页面可视窗口后加载图片

    滚动加载图片 图片 滚动 加载

    scroll_pic
    scroll_win

    function load_img(){
  $('.scrollimg').each(function(){
      if(($(this).offset().top)< ($(window).scrollTop()+$(window).height()) && $(this)[0].title=='') { //判断图片是否在可视区域 并且title==''，为了防止已经加载成功的图片又再次去请求
            if( !$(this).data('loading') ){//图片没data-loading=""的属性才执行，防止正在加载的图片又在不断请求
               $(this).data('loading','true');
               $(this).attr({ src:$(this).data('url') });
               $(this).load(function(){ $(this)[0].title='ok' });
               $(this).error(function(){ $(this)[0].title='no' });
            }
       }
  });
}
load_img();


$(window).scroll(function(){
  load_img();
});


<img class="scrollimg" title="" data-url="http://lorempixel.com/100/100?0.7218343850690871" src="loading.jpg" height="100" width="100">


这里注意 尽量要事先定义好图片的宽高，不然图片的offset().top定位就不准确了，因为DOM加载完成后JS代码就执行了，不等待图片加载完。

    本站案例：https://sdeno.com/zp/scroll_img/1.html

    《jquery 分屏加载图片 滚动加载图片》介绍的是张鑫旭的滚动加载图片效果

  • 让谷歌浏览器支持小于12px的字体

    css font 字体小于12px 号 字体

     

    p{font-size:8px;}
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}

<p><span class="shrink">我是一个小于12PX的字体</span></p>

     http://www.w3ci.com/front/xHTMLCSS/34.html

  • event || window.event 或者 e || window.event什么意思

    不管是对于刚刚学习JS的初学者来说还是有几年前端经验的人，对于类似

    event || window.event  或者
e || window.event

    都很好奇这什么作用。其实本人之前也见过别人封装插件也写过类似的方法，也不明白什么意思。直接举例子说明

    document.getElementById('drag').onclick=function(event){
  document.title=event.x+'--'+event.y;
};

    上面的例子是JS原生绑定属性的写法，把event当做参数传入进来写对于用惯jQuery的开发者来说这并没有什么错都很正常，但是在IE6/7/8中这样写是会报错的，因为在低版本的浏览器中event是存在全局的环境中。

     

    应该修改成：  做兼容性处理

    document.getElementById('drag').onclick=function(event){
  var e =event || window.event;
  document.title=e.x+'--'+e.y;
};

    但是我们知道在IE中有attachEvent监听绑定事件跟现代浏览器addEventListener功能一样，如果使用此方法绑定事件就不存在event当参数传入的问题了。

  • html中默认行为有哪些

    js a form

    在HTML中默认行为主要存在于a标签和form标签中。

    在a标签中添加href，默认点击会跳转到页面
<a href="http://qq.com"></a>

禁止跳转的解决方法：
1，javascript:;，javascript:void(0); 这些没有 # 系列的问题了，但是会让 IE6 的动态 GIF 停止播放  <a href="javascript:void(0)"></a>
2，为a标签添加事件，在事件的最前面加上
if( event.preventDefault ){
    event.preventDefault();  //支持DOM浏览器写法
}else{
   event.returnValue=false; //IE
}


在我们测试页面中我们通常会在href中设置#来代替未来需要添加的URL地址也默认有了手型的样式，但是添加#的时候点击也会默认置顶的行为，我们可以
<a href="#!"></a>这样不仅达到有手型的行为也防止了，默认置顶。

     

    在form标签中

1、如果form里面只有一个input type＝text，那么无论有没有submit按钮，在input中回车都会提交表单。
2，在form中如果点击input或者是button类型type为submit提交数据的同时也会闪烁一次。
3, 在form里面同时存在input type="submit"和button，如果input获取焦点后回车会先执行排在最前面的click事件
<form>
 <input type="number">
 <input type="text">
 <p><input type="submit" value="submit" onclick="alert(1)"></p>
 <p><button onclick="alert(2)">button</button></p>
</form>
禁止回车键的默认行为添加一下代码：
$(document).keydown(function(event){ switch(event.keyCode){ case 13:return false; } });

更多了解：http://www.oschina.net/question/1092_25864
解决方法：
使用event.preventDefault();
或者推荐一款表单插件 jquery.form.js https://sdeno.com/?p=4749

  • 根据地址获取百度地图相应的位置

    map_baidu

     

    要需要百度此功能需要先申请密钥，免费的。申请教程

     

    案例：https://sdeno.com/zp/map_baidu/map.html

    别人的案例：http://www.hainanfz.com/house/maps

    工具：

    http://api.map.baidu.com/lbsapi/createmap/index.html

    http://developer.baidu.com/map/jsdemo.htm#i8_4

     

    百度地图如何支持https

    百度地图开放平台很早就已经支持https了，看了一下你的请求url，需要注意加一下s=1这个特殊字段，格式如下：

    https://api.map.baidu.com/api?v=2.0&ak=你的秘钥& s=1