首页 > > 网页制作 > css >

前端开发常用技巧

2018-06-24 00:52:24来源：未知阅读 ()

1、背景图片中部放大、缩小

<html>
<head>
    <title>测试背景图片属性</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <style>
        .back{width:200px;height:200px;line-height:200px;background-image:url("http://a.hiphotos.baidu.com/image/pic/item/f9dcd100baa1cd11daf25f19bc12c8fcc3ce2d46.jpg");background-repeat:no-repeat;background-size:90%;background-position:center;}
    </style>
</head>
<body>
    <div class="back"></div>
    <script>
        $(".back").mouseover(function(){
            $(".back").animate({backgroundSize:'95%'},1000,function(){});
        });
        $(".back").mouseout(function(){
            $(".back").animate({backgroundSize:'90%'},500,function(){});
        });
    </script>
</body>
</html>

2、字母、数字、下划线两种及以上组合正则表达式：

//验证密码的规则，字母数字下划线符号，6-20位
function checkPwd(pwd) {
    var regex = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)(?![\_]+$)[0-9A-Za-z\_]{6,20}$');
    return regex.test(pwd);
}

3、Cookie跨页面访问取不到值

指定可访问cookie的路径
　　默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie，可以被www.xxxx.com/html/b.html或

www.xxx.com/ html/ some/c.html所访问，但不能被www.xxxx.com/d.html访问。为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：document.cookie="name=value; path=cookieDir";其中cookieDir表示可访问cookie的目录。例如：document.cookie="userId=320; path=/shop";就表示当前cookie仅能在shop目录下使用。如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：document.cookie="userId=320; path=/";

指定可访问cookie的主机名
　　和路径类似，主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：document.cookie="name=value; domain=cookieDomain";以google为例，要实现跨主机访问，可以写为：document.cookie="name=value;domain=.google.com";这样，所有google.com下的主机都可以访问该cookie。

4、img设置默认图片地址

<img src="图片的url地址" alt="图片XX"/>

　　当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了"图片XX"的提示信息，也起不了多大作用。

　　其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如：

　　a、让这个图片元素隐藏：

<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

　　b、用默认的图片替换：

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

　　注意：如果使用不当，在IE内核的浏览器下会造成死循环。比如：当【默认图片的url地址】也加载不成功（比如网速比较慢的时候）或不存在的话，就会反复的加载，最后造成堆栈溢出错误。

　　因此，需要用下面两种方法解决：

　　a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小，并且存在。

　　b、控制onerror事件只触发一次，需要增加这句话：this.onerror=null; 增加后如下：

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址;this.onerror=null'"/>

经测试，上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。

5、js返回顶部：

document.documentElement.scrollTop = document.body.scrollTop =0;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：css样式之border-image

下一篇：Flexible 弹性盒子模型之CSS flex-basis 属性

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签