Post Jobs

Javascript绝句欣赏,跟我学习css3之transition

图片 2
  1. 取整同时转成数值型:

    ‘10.567890’|0

HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开
发了比较成功的产品。我在2011年的时候也跟着技术潮流初浅的学习了html5+css3。毕竟那
时候我没有把学习的知识与实际工作结合起来。因此,这种没有实践的学习很容易忘记。在
去年年底的时候公司有个页面的浮层图标需要优化,就是鼠标划过能变大,划出复原。其实
要做这个功能很简单,也有很多的方法。但是,我后来就用了css3的transition属性。

本人比较懒,相信不少朋友也是,懒得每次去生成dedecms的HTML,同时为了现已不太有效的伪静态优化,所以还是搞搞伪静态吧。

结果: 10

图片 1 
 
  图片 2

dedecms全站伪静态教程分为五部分,包括“Apache设置、.htaccess文件设置、首页伪静态、列表页伪静态、文章页伪静态”。

'10.567890'^0

简单的示例结构:

用4.0测试OK,5.X没测。

结果: 10

图片 3图片 4

一、Apache文件设置

-2.23456789|0
<!DOCTYPE HTML>  <html lang="en-US">  <head>      <meta charset="UTF-8">          <title></title>      <style type="text/css">          #scrollTop { margin:0; _margin-bottom:30px; padding:0;     height:77px; position:fixed; _position:absolute; right:2px; bottom:30px;     _bottom:0; _top:expression(eval(document.documentElement.scrollTop    +document.documentElement.clientHeight-this.offsetHeight-(parseInt    (this.currentStyle.marginTop,10)||0)-(parseInt    (this.currentStyle.marginBottom,10)||0))); z-index:60000;}          #scrollTop a {display:block; width:28px; height:77px; margin:0;     padding:0; text-decoration:none; background:#FFF url    (http://s.hqbcdn.com/assets/v3/images/scrollTop_ico.png) no-repeat;}                </style>  </head>  <body>      <div style="display:none;" id="scrollTop"><a     href="javascript:;">&nbsp;</a></div>  </body>  </html>

这是重头戏,以前用本地测试时因 httpd.conf 文件没设置好,搞得焦头烂额。

结果: -2

View Code

1、如果是虚拟主机,一般 apache 的 LoadModule rewrite_module
modules/mod_rewrite.so 是开启的,请咨询你的主机提供商以确认是否支持伪静态。

~~-2.23456789

方法一:
给元素添加:hover伪类样式

2、如果是自己的服务器或本地机器,请按以下设置:

结果: -2

#scrollTop a:hover {width:84px; background:#b4b9bd url    (http://s.hqbcdn.com/assets/v2/images/scroll_top.jpg) no-repeat 50% 50%; text-    decoration:none; opacity:0.8;}

关闭 apache 服务。

  1. 日期转数值:

    var d = +new Date(); //1295698416792

  2. 类数组对象转数组:

    var arr = [].slice.call(arguments)

  3. 漂亮的随机码:

    Math.random().toString(16).substring(2); //14位
    Math.random().toString(36).substring(2); //11位

  4. 合并数组:

    var a = [1,2,3];
    var b = [4,5,6];
    Array.prototype.push.apply(a, b);
    uneval(a); //[1,2,3,4,5,6]

  5. 用0补全位数:

    function prefixInteger(num, length) {
    return (num / Math.pow(10, length)).toFixed(length).substr(2);
    }

  6. 交换值:

    a= [b, b=a][0];

  7. 将一个数组插入另一个数组的指定位置:

    var a = [1,2,3,7,8,9];
    var b = [4,5,6];
    var insertIndex = 3;
    a.splice.apply(a, Array.concat(insertIndex, 0, b));
    // a: 1,2,3,4,5,6,7,8,9

  8. 删除数组元素:

    var a = [1,2,3,4,5];
    a.splice(3,1);

  9. 快速取数组最大和最小值

    Math.max.apply(Math, [1,2,3]) //3
    Math.min.apply(Math, [1,2,3]) //1

这个方式功能是达到了,但是交互的效果有点生硬,大家都喜欢运动效果的交互。

打开 httpd.conf
文件(一般放在apache安装目录的conf目录下)把 #LoadModule
rewrite_module modules/mod_rewrite.so 前的 # 号去掉,代表开启
rewrite 规则。

(出自)

方法二:
为了有运动的交互效果,我们可以使用一些js框架的运动效果
这里我就使用大家常使用的jquery+jquery-easing.1.3.js来实现

搜索 “AllowOverride None”(不包括引号,下同) ,有多个,全部替换为
“AllowOverride All”。

  1. 条件判断:

    var a = b && 1;

$('#scrollTop a').hover(function(){          $(this).animate({width:'84px'}, 2000, 'easeInOutQuad')      },       function(){          $(this).animate({width:'28px'}, 2000, 'easeInOutQuad')      })

开启 apache 服务。

相当于

方法三:
使用css3的transition给#scrollTop a:hover多添加一条css,如下:

二、.htaccess文件设置

if (b) {
  a = 1
}
#scrollTop a:hover {transition:width .2s ease-out;}

在网站根目录建一 .htaccess 文件,内容为:

 

这样是不是比方法二简单方便,当然这个方法是不是没有缺点,只要懂一点前端的就是知道
这个方法不适合IE10以下的浏览器。不过,也没有关系,这个方法是结合方法一的,所以在
IE以下的功能能实现只是没有交互的效果,谁叫他们使用IE是吧^_^!

RewriteEngine On
RewriteBase /
RewriteRule ^(.*)index\.html$ $1/index.php
RewriteRule ^(.*)list-([0-9]+)\.html$ $1/plus/list.php?tid=$2
RewriteRule ^(.*)list-([0-9]+)-([0-9]+)\.html$
$1/plus/list.php?typeid=$2&PageNo=$3
RewriteRule ^(.*)view-([0-9]+).html$ $1/plus/view.php?aid=$2
RewriteRule ^(.*)view-([0-9]+)-([0-9]+).html$
$1/plus/view.php?aid=$2&pageno=$3

var a = b || 1; 

以上说了那么多无关transition的话,只是为了下面来学习了解它

三、dedecms首页伪静态

相当于

transition:支持从一个属性值平稳过渡到另一个属性值

不要更新首页html就行。如果已更新,请删除index.html即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图