分类: CSS

JS获取style属性

没有评论

2011 年 05 月 05 日 at 下午 5:36分类:CSS | HTML | JavaScript

<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>currentStyle</title>
    <!-- <style type="text/css">
    </style>-->
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
</head>
<body>
    <div id="qq" class="divtitle">
        测试样式
    </div>
    <script type="text/javascript"> 
//document.defaultView.getComputedStyle 这是w3c标准方法,取得元素的样式信息,因为有些样式是在外部css文件定义的,所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"]
   function GetCurrentStyle (obj, prop) 
   { 
      if (obj.currentStyle) //IE
      { 
          return obj.currentStyle[prop]; 
      }
      else if (window.getComputedStyle) //非IE
      { 
          propprop = prop.replace (/([A-Z])/g, "-$1"); 
          propprop = prop.toLowerCase (); 
          return document.defaultView.getComputedStyle(obj,null)[propprop]; 
      } 
     return null;
   } 
   var dd=document.getElementById("qq"); 
   alert(GetCurrentStyle(dd,"color")); 
    </script>
</body>
</html>
外部样式:StyleSheet
.divtitle
        {
            background: blue;
            color: #cdcdcd;
            width: 200px;
        }

JS函数

var getCss = function(o,key){
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 
};

php判断浏览器类型

没有评论

2010 年 12 月 27 日 at 下午 4:32分类:CSS | HTML | PHP | WEB开发

很多时候都需要判断浏览器类型来写代码,比如CSS的兼容性,若是PHP页面,可以用PHP来判断浏览器类型来显示不同的CSS代码。还有很多,都是需要 判断浏览器类型的。简单判断浏览器的方法主要是用$_SERVER["HTTP_USER_AGENT"],PHP比其它语言总是简单。下面就收藏这段代 码吧,总有用,可以判断IE6、IE7、IE8、firefox等浏览器。
代码1:

<?php
if(strpos($_SERVER["HTTP_USER_AGENT"],”MSIE 8.0″))
echo “Internet Explorer 8.0″; // 这里可以写其他的执行命令
else if(strpos($_SERVER["HTTP_USER_AGENT"],”MSIE 7.0″))
echo “Internet Explorer 7.0″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”MSIE 6.0″))
echo “Internet Explorer 6.0″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Firefox/3″))
echo “Firefox 3″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Firefox/2″))
echo “Firefox 2″;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Chrome”))
echo “Google Chrome”;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Safari”))
echo “Safari”;
else if(strpos($_SERVER["HTTP_USER_AGENT"],”Opera”))
echo “Opera”;
else echo $_SERVER["HTTP_USER_AGENT"];
?>

代码2:

<?php  
    //baseAgent类,抽象的基类  
    abstract class baseAgent  
    {  
        abstract function PrintPage();  
    }  
    //ieAgent类,用于客户端是IE时调用的类  
    class ieAgent extends baseAgent  
    {  
        function PrintPage()  
        {  
            return "当前浏览器是IE!";  
        }  
    }  
    //otherAgent类,用于客户端不是IE时调用的类  
    class otherAgent extends baseAgent  
    {  
        function PrintPage()  
        {  
            return "当前浏览器不是IE!";  
        }  
    }  
    //判断并创建不同的对象类型,对象名为$currPage  
    if(strstr($_SERVER["HTTP_USER_AGENT"], "IEAGENT"))  
    {  
        $currPage = new ieAgent();  
    }   
    else  
    {  
        $currPage = new otherAgent();  
    }  
    //输出  
    echo $currPage->PrintPage();  
?>  

FCKEditor+jQuery+PHP实现分页

没有评论

2010 年 12 月 04 日 at 下午 3:38分类:CSS | JavaScript | jQuery | PHP

一、插入新闻
FCKEditor是一款很流行的即插即用WEB编辑器,它支持ASP、PHP、Java等语言。这里要介绍的是利用编辑器的“插入分页符”功能,实现页面的无刷新分页。
编辑新闻时,在需要插入分页的段落处插入分页符,保存即可。
二、读取新闻
在读取新闻字段时,通过PHP分页函数对新闻字段数据进行处理,代码如下:

function pageBreak($content)
{
    $content  = $content;
    $pattern  = "/<div style=\"page-break-after: always\"><span style=\"display: none\">&nbsp;<\/span><\/div>/";
    $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY); 
    $count    = count($strSplit);
    $outStr   = ""; 
    $i        = 1;
    
    if ($count > 1 ) {
        $outStr   = "<div id='page_break'>";
        foreach($strSplit as $value) {
            if ($i <= 1) {
                $outStr .= "<div id='page_$i'>$value</div>";
            } else {
                $outStr .= "<div id='page_$i' class='collapse'>$value</div>";
            }
            $i++;
        }
        
        $outStr .= "<div class='num'>";
        for ($i = 1; $i <= $count; $i++) {
            $outStr .= "<li>$i</li>";
        }
        $outStr .= "</div></div>";
        return $outStr;
    } else {
        return $content;
    }
}

CSS样式控制分页的样式,代码如下

#page_break {
    
}
#page_break .collapse {
    display: none;
}
#page_break .num {
    padding: 10px 0;
    text-align: center;
}
#page_break .num li{
    display: inline;
    margin: 0 2px;
    padding: 3px 5px;
    border: 1px solid #FF7300;
    background-color: #fff;
    
    color: #FF7300;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
    font-size: 12px;
    overflow: hidden;
}
#page_break .num li.on{
    background-color: #FF7300;
    
    color: #fff;
    font-weight: bold;
}

使用jQuery代码实现分页,代码如下:

$(document).ready(function(){
    $('#page_break .num li:first').addClass('on');
        
    $('#page_break .num li').click(function(){
        //隐藏所有页内容
        $("#page_break div[id^='page_']").hide();
                
        //显示当前页内容。
        if ($(this).hasClass('on')) {
            $('#page_break #page_' + $(this).text()).show();            
        } else {
            $('#page_break .num li').removeClass('on');
            $(this).addClass('on');
            $('#page_break #page_' + $(this).text()).fadeIn('normal');
        }
    });
});

根据以上步骤,即可实现使用FCKEditor+jQuery+PHP实现无刷新页面分页。

TP隐藏了网站的入口文件index.php

没有评论

2010 年 11 月 19 日 at 上午 8:30分类:CSS | PHP

今天使用伪静态将网站的入口文件index.php隐藏起来了,按照thinkphp官方手册上面讲的方法,我试了N次都没有成功,我也找不出是什么原因,最后实在没得办法只得自己手动一条一条的写.htaccess文件里面的规则,但是当我上传到虚拟主机上面去的时候发现,还是没有效果index.php文件依然没有隐藏,然后问了主机提供商,他们讲iis是不支持.htaccess文件的,iis只支持httpd.ini,然后又将.htaccess修改成httpd.ini文件。

值得注意的是.htaccess与httpd.ini之间的规则还是有些区别的,如果伪静态的文件不对还可能会出现错误500或错误404。

以下是我的httpd.ini文件中的两条
[ISAPI_Rewrite]
RewriteRule /Index/index/p/([0-9]+)/ /index.php/Index/index/p/$1
RewriteRule /blog/([0-9]+) /index.php/blog/$1

对应的.htaccess的规则则是

RewriteRule ^/blog/([0-9]+)$ /index.php/blog/$1

我在网上查找了一些资料,有的资料讲httpd.ini的文件中的特殊字符必须要转义才可以,但是我的没有转义也可以,不知道是不是服务器上面的伪静态软件的版本的问题。

css滤镜效果

没有评论

2010 年 09 月 08 日 at 下午 8:06分类:CSS

http://zhangjingqiang.blog.51cto.com/648409/186838

<html>

<head>

<title>

</title>

<style>

div{ border:0px solid red; background-color:red; width:303px; height:180px; }

a:hover img{ filter:alpha(opacity=50); }

</style>

</head>

<body>

<div>

<a href=”"><img src=”kai.jpg” border=”0″></a> </div>

</body><

/html>

<html>

<head>

<title>alpha滤镜</title> <style>

<!– body{ background:url(bg1.jpg); margin:20px; } img{ border:1px solid #d58000; } .alpha{ filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100); /* 从上到下渐变 */ } –> </style>

</head>

<body>

<img src=”kai.jpg” border=”0″> <img src=”kai.jpg” border=”0″>

</body>

</html>

<html>

<head>

<title>alpha滤镜</title>

<style>

<!– body{ background:url(bg1.jpg); margin:10px; } .alpha1{ filter:alpha(opacity=100,finishopacity=0,style=2); /* 圆形渐变,中间不透明,四周透明 */ } .alpha2{ filter:alpha(opacity=0,finishopacity=80,style=2); } –> </style>

</head>

<body>

<center> <img src=”kai.jpg”><br><br> <img src=”kai.jpg”> </center> </body> </html

<html> <head> <title>alpha滤镜</title> <style> <!– body{ background:url(bg1.jpg); margin:10px; } .alpha1{ filter:alpha(opacity=100,finishopacity=0,style=3); /* 矩形渐变,中间不透明,四周透明 */ } .alpha2{ filter:alpha(opacity=0,finishopacity=100,style=3); /* 反之 */ } –> </style> </head> <body> <center> <img src=”kai.jpg”> <img src=”kai.jpg”> <img src=”kai.jpg”>
</center>
</body>
</html>
<html>
<head>
<title>MotionBlur滤镜</title>
<style>
<!– body{ margin:10px; } .motionblur{ filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);    /* 水平向右 */ } –> </style> </head> <body> <img src=”kai.jpg”> <img src=”kai.jpg”>
</body>
</html>

网站全部变灰效果

没有评论

2010 年 09 月 08 日 at 下午 8:03分类:CSS

方法一是:
在你的网站页面上
<head></head>
之间加上下面这段代码:

<style type=”text/css”>
body {filter:gray}
</style>
方法二是:
在你的网站页面上
<head></head>
之间加上下面这段代码:

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
方法三是:
找到你的网站CSS文件,把下面的代码放到网站的css文件头部中(此为教育网采用的方法)

body{
filter:gray;
}
方法四是:
找到你的网站CSS文件,把下面的代码放到网站的css文件头部中

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
方法五是:
找到你的CSS文件然后修改css代码文件。在以下的文件当中
form,div,span,img,ul,ol,li, {
加入filter: Gray;

有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和</object>之间插入:
复制内容到剪贴板
代码:
<param =”false” name=”menu”/>
<param =”opaque” name=”wmode”/>