一些实用的前端技巧
本文转自http://www.cnblogs.com/dannyhaospace/p/6287531.html
引言
作为一名web开发人员，前端知识是必不可少的，页面布局，浏览器兼容性，js，jQuery，异步调用及CSS样式等等。现在最流行的h5,懂得h5之后，PC端和移动端都轻松搞定，音频视频处理等等，比之前的h4方便很多，速度和性能提高很多。
之前一直做后端，前端的知识接触的比较少，虽然有时候都是模块开发，前端和后台都要设计，但是那些对前端要求不高的。最近做一个智慧城市项目，客户对前端要求很多的，自己这次把自己安排到主要进行前端设计这一块，很久没有写前端东西了，突然感觉生疏了。通过这个项目，又从新开始拿起来我的前端的知识，在开发过程中遇到了很多问题，虽然都是基础性的问题，但是这些也是大家最常见的一些问题。也许大家都觉得简单，就不记住了，都是用的时候去查，但是这样浪费浪费时间的。工作之余整理了一下这几天遇到的一些问题，都是一些简单的前端问题，越是简单的东西越是容易被大家忽略的，空闲整理一下记录下来。
一、页面自动刷新
1、在HTML头地方添加<meta http-equiv="refresh" content="5"> 这样一行代码，页面就会定时刷新。content是设置多长时间刷新一次
2、在页面中使用js设置一个时间间隔，调用刷新函数refresh。 setInterval("refresh();", 5000); --5秒刷新一次
二、背景图随着屏幕变化而变化
通过CSS设置：
body {
background:url('img/index/bk.jpg') no-repeat;
background-size:100% 100%;
background-position:center center;
background-size:cover;
background-attachment:fixed;
}
三、页面滚动字幕
<div id="main" style="width:500px;height:500px;border:1px solid;">
<div id="d1"><marquee scrollamount=2; style="width:100%;">向左滚动</marquee></div>
<div id="d2"><marquee scrollamount=2 style="width:100%;"><a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d3"><marquee scrollamount=2 style="width:100%;" onmouseover=stop() onmouseout=start()>鼠标放在文字上停止滚动</marquee></div>
<div id="d4"><marquee scrollamount=2 style="width:100%;" behavior=alternate>来回移动</marquee></div>
<div id="d5"><marquee scrollamount=2 style="width:100%;height:200px;" direction=up>·上下滚动<br>·调用了JavaScript代码<br>·可以点击链接<p>·<a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d6"><marquee scrollamount=2 style="width:100%;"><a style="color:#CC6600">颜色设置</a></marquee></div>
</div>
四、消息弹出框，在右边底部显示
以下是message.js文件的代码：
(function (jQuery) {
/*
* jQuery Plugin - Messager
* Author: corrie Mail: corrie@sina.com Homepage: www.corrie.net.cn
* Copyright (c) 2008 corrie.net.cn
* @license http://www.gnu.org/licenses/gpl.html [GNU General Public License]
*
* $Date: 2008-08-30
* $Vesion: 1.1
@ how to use and example: Please Open demo.html
*/
this.version = '@1.1';
this.layer = { 'width': 200, 'height': 100 };
this.title = '信息提示';
this.time = 114000;
this.anims = { 'type': 'slide', 'speed': 600 };
this.inits = function (title, text) {
if ($("#message").is("div")) { return; }
$(document.body).prepend('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:' + this.layer.width + 'px;height:' + this.layer.height + 'px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;">' + title + '</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width:' + (this.layer.width - 17) + 'px;height:' + (this.layer.height - 50) + 'px;color:#1f336b;text-align:left;overflow:hidden;">' + text + '</div></div></div>');
};
this.show = function (title, text, time) {
if ($("#message").is("div")) { return; }
if (title == 0 || !title) title = this.title;
this.inits(title, text);
if (time) this.time = time;
switch (this.anims.type) {
case 'slide': $("#message").slideDown(this.anims.speed); break;
case 'fade': $("#message").fadeIn(this.anims.speed); break;
case 'show': $("#message").show(this.anims.speed); break;
default: $("#message").slideDown(this.anims.speed); break;
}
$("#message_close").click(function () {
setTimeout('this.close()', 1);
});
//$("#message").slideDown('slow');
this.rmmessage(this.time);
};
this.lays = function (width, height) {
if ($("#message").is("div")) { return; }
if (width != 0 && width) this.layer.width = width;
if (height != 0 && height) this.layer.height = height;
}
this.anim = function (type, speed) {
if ($("#message").is("div")) { return; }
if (type != 0 && type) this.anims.type = type;
if (speed != 0 && speed) {
switch (speed) {
case 'slow':; break;
case 'fast': this.anims.speed = 200; break;
case 'normal': this.anims.speed = 400; break;
default:
this.anims.speed = speed;
}
}
}
this.rmmessage = function (time) {
setTimeout('this.close()', time);
//setTimeout('$("#message").remove()', time+1000);
};
this.close = function () {
switch (this.anims.type) {
case 'slide': $("#message").slideUp(this.anims.speed); break;
case 'fade': $("#message").fadeOut(this.anims.speed); break;
case 'show': $("#message").hide(this.anims.speed); break;
default: $("#message").slideUp(this.anims.speed); break;
};
setTimeout('$("#message").remove();', this.anims.speed);
this.original();
};
this.original = function () {
this.layer = { 'width': 200, 'height': 100 };
this.title = '信息提示';
this.time = 114000;
this.anims = { 'type': 'slide', 'speed': 600 };
};
jQuery.messager = this;
return jQuery;
})(jQuery)
下面是demo：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/Message.js"></script> <script type="text/javascript"> function GetMessage() { $.ajax({ type: "POST", url: "Ashx/GetMessage.ashx", data: "", //出错处理 error: function () { alert("网络出现故障!请重试!"); }, //发送前事件 beforeSend: function () { }, //成功后事件 success: function (data) { if (data != null && data != "") { $.messager.lays(350, 300); $.messager.show('<font style="color:red;">智慧城市报警提示</font>', '<font style="font-size:12px; text-align:left;color:green;">' + unescape(data) + '</font>'); } } }); } setInterval("GetMessage();", 5000);//设定秒调用一次 </script> </head> <body> </body> </html>
五、Div的布局设计
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="js/jquery.min.js"></script> <title>主页-背景随着屏幕大小改变</title> <style type="text/css"> body { background:url('img/index/bk.jpg') no-repeat; background-size:100% 100%; background-position:center center; background-size:cover; background-attachment:fixed; } #div_top { width:100%; height:50px; } #div_center { width:100%; height:90%; margin-top:100px; float:left; } #div_left { width:45%; height:100%; margin-left:4%; float:left; } #div_right { width:45%; height:100%; margin-left:3%; float:left; } </style> </head> <body> <div id="main"> <div id="div_top"> <img alt="logo" src="img/index/logo.png" /> </div> <div id="div_center"> <div id="div_left"> <div id="div_left_row1"> <img alt="zhzk" src="img/index/zhqk.png" /> <img alt="szyy" src="img/index/szyy.png" /> </div> <div id="div_left_row2"> <img alt="wyfw" src="img/index/wyfw.png" /> <img alt="jfsbzt" src="img/index/jfsbzt.png" /> </div> <div id="div_left_row3" > <img alt="xtgl" src="img/index/xtgl.png" /> </div> </div> <div id="div_right"> <div id="div_right_row1"> <img alt="crk" src="img/index/crk.png" /> <img alt="fjdc" src="img/index/fjdc.png" /> </div> <div id="div_right_row2"> <img alt="rqbj" src="img/index/rqmj.png" /> <img alt="tcc" src="img/index/tcc.png" /> </div> <div id="div_right_row3"> <img alt="dzxg" src="img/index/dzxg.png" /> <img alt="lymj" src="img/index/lymj.png" /> <img alt="spjk" src="img/index/spjk.png" /> </div> </div> </div> </div> </body> </html>
运行效果：这里的背景设置的全屏的，还有div使用百分比，无论屏幕大小多少，分辨率多少，怎么缩放，布局不会改变，位置不会被移动，永远全屏显示。
