纯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



牵不到你的手 - 高凌风

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

Next Page →