牵不到你的手 - 高凌风

以前看过这2期《天天向上》都有他,挺有感染力的。2014年2月17日,因血癌在19点50分病逝

跳转页面定位到指定的位置

明天要回家了,今天也没啥事做。就分享下做过的一个小需求,还有很多朋友问过我类似的问题,当时也是跟他们说说简单的思路,并没有分享。今天我就整理下吧。

需求是这样的A页面有的链接,跳转到B页面中。并且要根据A页面的链接不同定位的不同的内容区域。我贴个图你大概就理解了:

A页面

B页面

当我点击A页面中3的链接的时候,就要跳转到B页面,并且定位到活动三内容区域;

这个都是一个简单的活动页面,当然你也可以很简单的实现,把B页面拆分成3个页面,分别对应A页面的3个不容的内容,但是没必要,下面就是用jquery来实现了,很简单的:

基本思路就是这样的,当点击A页面中的链接跳转到B页面中来,获取当前url地址

   <script type="text/javascript">
       $(document).ready(function(){
           var windowUrl=location.href.slice(-2);//获取当前url地址的最后2位字符
           $(".tab li").each(function(index, element) {
               var id=$(this).attr("id");    //获取当前对应活动的id
               if(windowUrl==id){//如果浏览器地址的最后2个字符串与对应的id号相同就为其添加点击过后的类,并且显示对应索引的内容
                   $("#"+id).addClass("click").siblings().removeClass("click");
                   var _index=$("#"+id).index();
                   $(".main>div").eq(_index).show().siblings().hide();
               }
               $(this).click(function(){
                   $(this).addClass("click").siblings().removeClass("click");
                   var index=$(this).index();
                   $(".main>div").eq(index).show().siblings().hide();
               });
           });
       });
   </script>  

线上地址:http://qqgame.qq.com/act/a2014113nc/index.html

演示下载:http://url.cn/Vam3PI

ie6,ie7下,父元素加了个filter滤镜渐变里面的子元素超出盒子就被隐藏了

这几天做了个超神英雄的首测页面,里面碰到两个小问题,就是ie6,ie7下,父元素加了个filter滤镜渐变里面的子元素超出盒子就被隐藏了。父元素加两个滤镜渐变,如下:filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2227', endColorstr='#1f2226',GradientType=0 ); /* IE6-9 */

效果如图所示:非ie6,ie7下面

ie6,ie7下面

ie6,ie7下面就成了这个鸟样,麻痹的,开始以为是没有触发hasLayout,后来加了zoom:1也没用,后来改了好久还是没解决,差点想用切个小背景平铺得了,后来在群里问了下志哥(http://www.linxz.de/),说如果是父元素加了滤镜渐变背景就有可能会照成,把子元素单独出来就可以了,ok,把它单独放出来就好了,麻痹的,解决了……。

推荐一个轻巧的滚动条模拟插件

一般不是特殊情况都避免去模拟滚动条的

下载地址:http://url.cn/UvmguW

Smooth Criminal - David Garrett

With an Orchid - Yanni

好喜欢的一个首

css3 animation循环动画

css3蛮早就关注了,以前还刻苦的坚持的实践了一段时间,对一些常见的属性也比较熟练运用,好久又没去练习了,今天看了下css3 animation,真的挺不错,用它可以来实现循环动画,可以指定多少时间内再执行。

里面就做个简单的说明:

http://jsbin.com/ugowItE/1/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <style type="text/css">
            
.item{
  -moz-animation: revolving 4s 0s infinite;
  -webkit-animation: revolving 4s 0s infinite;
  background:#F70000;
  color:#fff;
  width:100px;height:100px;
  line-height:100px;
  text-align:center;
  box-shadow:0px 5px 3px -2px rgba(0,0,0,0.6);
}
@-moz-keyframes revolving{
  0,75%{
    -moz-transform: perspective(700px) translateX(0px);
  }
  87.5%{
    -moz-transform: perspective(700px) translateX(150px);
  }
  100%{
    -moz-transform: perspective(700px) translateX(0px);
  }
}
@-webkit-keyframes revolving{
  0,75%{
    -webkit-transform: perspective(700px) translateX(0px);
  }
  87.5%{
    -webkit-transform: perspective(700px) translateX(100px);
  }
  100%{
    -webkit-transform: perspective(700px) translateX(0px);
  }
}
  </style>
<body>
  <div class="item">
      <strong>vison</strong>
  </div>
</body>
</html>

利用:after与:before做出不错的阴影效果

以前有些阴影效果总觉得非得切图才能实现,现在结合css3和伪类也能达到不错的效果。

http://jsbin.com/ElIjeGi/1/edit

让ie也支持canvas

excanvas库-让IE支持canvas

下载网址:http://code.google.com/p/explorercanvas/downloads/list

代码示例:

<!DOCTYPE html>
<html>
<head>
<title>excanvas demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="excanvas.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload = function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(30, 30);
    ctx.lineTo(150, 150);
    ctx.quadraticCurveTo(60, 70, 70, 150);
    ctx.lineTo(30, 30);
    ctx.fill();
}
</script>
</body>
</html>

引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法创建的就不行了
var canvas=document.createElement(”canvas”);
if(canvas.getContext){
alert(”support getContext()”);
}
这段代码在ie下不工作,于是把google搞的这个让ie支持canvas的代码大概地读了一遍,知道了是怎么回事。将代码放到aptana里面看,10分钟不到,785行代码,还不错,我想,这得益于之前仔细看过犀牛书前面js core部分7遍以及对canvas和vml的了解吧。

原来,加载并执行excanvas.js这个脚本代码的时候,G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素,然后初始化这些元素,亦即是将标准canvas的那些个方法赋予ie下的canvas:
var els = doc.getElementsByTagName(”canvas”);
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
如果是文档原来就有的canvas标签,那就没有问题,这段脚本将找到的canvas元素作为参数传递给G_vmlCanvasManager_.initElement()这个方法。但是通过createElement方法创建的canvas就不行了,因为调用这段脚本的时候,后来新创建的canvas元素还没有被它找到。
那么,解决办法就是新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。

但是,G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的,我在全局范围下就没有办法引用到,还好,在excanvas.js文件的后面,有一句语句,
G_vmlCanvasManager = G_vmlCanvasManager_;
由于js的函数中,如果一个变量不通过var来定义,那么就会把这个变量当作一个全局变量,好啦,现在有一个全局变量来引用它了。
那么,下面是解决问题的代码:
$(function(){
   var canvas=document.createElement(”canvas”);
   document.body.appendChild(canvas);
   if($.browser.msie){
       canvas=window.G_vmlCanvasManager.initElement(canvas);
   }
   if(canvas.getContext){alert(”support”);}
});
这里我用了jquery,在DOM ready以后才执行这段脚本。
另外,记得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要将新创建好的canvas追加到文档流中:document.body.appendChild(canvas);

 

另外与jquery混合使用的时候必须使用jquery1.7以上的版本

原文地址:http://rockyuse.iteye.com/blog/1618298

sort()排序

在默认情况下,sort()方法按升序排列数组项目——即最小的值位于最前面,最大的值位于最后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串,如下所示:

var value=[8,10,0,5,20];
value.sort(value);
alert(value);//0,10,20,5,8

可见,即使例子中值的顺序没有问题,但sort()方法也会根据测试字符串的结果改变原来的顺序。因为数值5虽然小于10,但是在进行字符串比较时候5位于10的前面,于是数组的顺序就被修改了,不用说,这种排序方式在很多情况下都不是最佳方案。因此sort()方法可以接收一个比较函数作为参数,以便我们指定那个值位于哪个值前面。

比较函数接收两个参数,如果第一个参数应该位于第二个参数前面则返回一个负数,如果两个参数相等则返回0,如果第一个参数位于第二个参数之后则返回一个正数。以下就是一个简单的比较函数:

<script type="text/javascript">
                   
    function compare(value1,value2){
      if(value1<value2){
        return -1;
      }else if(value1>value2){
        return 1;
      }else{
        return 0;
      }
    }
    function gradeDown(value1,value2){
      if(value1<value2){
        return 1;
      }else if(value1>value2){
        return -1;
      }else{
        return 0; 
      }
    }
    var values=[0,8,4,9,15];
    var down=[0,8,4,9,15];
    values.sort(compare);
    down.sort(gradeDown);
    document.write("升序:"+values+'<br />')
    document.write("降序:"+down+'<br />');
    var value=[8,10,0,5,20];
        value.sort();
        alert(value);
  </script>

对于数值类型或者其valueof()方法会返回数值类型的对象类型,可以使用一个更简单的比较函数。这个函数只要第二个值减去第一个值即可。

function va(value1,value2){
     return value2-value1;
    }//升序
    function vac(value1,value2){
     return value1-value2;
    }//降序
    var co=[88,22,44,11,20]
    co.sort(va)
    var ka=[99,22,44,88,23]
    ka.sort(vac)
    document.write(co+'<br>');
    document.write(ka)

如果只是想反转数组原来的顺序,使用reveres()方法会更快一点。

Next Page →