关于字体的优化

关于手机端CSS Sprite图标定位的一些领悟

也闲了一段时间了,今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面。

地址这里我也分享下吧:http://m.ctrip.com/html5/

在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来代替,有些图标不多的时候就自己单个的切出来控制了。

看了下携程的手机端的网站这些图标是用了雪碧图来合并的,因为一直以来手机端的屏幕大小不一,所以通常都会把设计图等比例缩放的形式展现,百分比的方式来布局,达到自适应。

下面我们就来说说这个携程手机端的案例吧:

首先这个雪碧图的原理与PC端的是一样的,只不过手机端的要按比例缩放一下。

首先是合并的雪碧图:


大家发现没有,雪碧图的尺寸与原图刚好缩放了2倍。

再个就是原始 宽度和高度,以及图标的坐标位置。很明显通常元素的宽度和高度也就是要显示的图标的宽度和高度,这里也要缩放2倍。

下面的图就是其中某个显示图标元素,包括宽度、高度和左边值刚好都是缩放过2倍的,所以看到这里都明白了吧,手机端的雪碧图就是这么做的,也挺简单的吧,比PC端就是多了一步缩放的计算,哈哈。


纯css美化file控件

在项目开发过程中可能经常也会遇到file控件,但是这个控件比较另类,能够修改的属性不多,而且样式外观各个浏览器的表现也不一样。通常都是不建议模拟的,有时候产品很执着说为了统一风格还是希望要去模拟下,好吧,出发点都是好的,能做就做吧。也没想象的那么困难,只是觉得没太大的必要。

看到很多群里面有很多人问起过,很多人的解决方案都不怎么简洁,还用Js来控制了,很麻烦的说。后来我就想了下用把file空间透明度调到0的假象来达到模拟的效果,做发就是file控件用一个div包起来,然后这个div设置背景,背景就是所需要模拟的那个背景按钮。

下面你看下效果吧,也是我最近做的一个内部系统的一个案例:

最近动手实践中发现这个方法更好,ie6都支持……,

http://jsbin.com/kajadufezu/1/edit?html,css,output

 


指定内容多少行后未显示全就用省略号代替

相信大家也开始接触移动端的项目了,移动端兼容各种设备想必让你也头疼吧。不过移动端也有它好的一面,就是可以用比较新的css3属性了,从而在布局上面来说也是福音。下面就说的就是文字内容超出就用省略号代替的问题,相信大家在PC端都知道多换文字是无法实现内容超出就用省略号显示的,多半是用字符串截取的方式了。那移动端就可以结合css3来实现,下面的例子就是多行内容如果没有显示全就用省略号代替了。

当内容如果2行内还未显示全就用省略号替代了。

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



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

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

需求是这样的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

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 →