伤心太平洋 - 没事就在唱吧里面录歌

牵不到你的手 - 高凌风

以前看过这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

Next Page →