本人的笔记

最新推荐文章于 2021-03-13 06:51:06 发布

前端-文龙刚

最新推荐文章于 2021-03-13 06:51:06 发布

阅读量288

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/qq_17211063/article/details/84744998

版权

点击任意位置消失
<script>
jQuery.fn.isChildAndSelfOf = function(b){return (this.closest(b).length > 0);};
$(document).click(function(event){

if(!$(event.target).isChildAndSelfOf('.btn-pl')){
$('.pl').hide();
}
});
</script>或者下面
$(document).click(function(){
$('.输入框的class').hide();
})
这个是显示的：
$('.按钮的class').click(function(){
$('.要显示的class').show();
})
-----------------------------------------------------------------------------------------------

css一些属性：
min-width:100px; 最小宽度
max-width:100px; 最大宽度
怎么用jquery判断浏览器类型？
用jquery判断浏览器类型：判断浏览器类型是IE浏览器还是火狐甚至是opera或者苹果浏览器safari，jquery 特效代码如下：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
if($.browser.msie) {
alert("这是一个IE浏览器");
}else if($.browser.opera) {
alert("这是一个opera浏览器");
}else if($.browser.mozilla) {
alert("这是一个火狐浏览器");
}else if($.browser.safari) {
alert("这是一safari浏览器");
}else {
alert("我不知道");
}
})
</script>

判断浏览器类型和版本号

<script type="text/javascript">
$(document).ready(function(){
var bro=$.browser;
var binfo="";
if(bro.msie) {binfo="Microsoft Internet Explorer "+bro.version;}
if(bro.mozilla) {binfo="Mozilla Firefox "+bro.version;}
if(bro.safari) {binfo="Apple Safari "+bro.version;}
if(bro.opera) {binfo="Opera "+bro.version;}
alert(binfo);
$("#browser").html(binfo);
})
</script>

<div id="browser" class="info">
Browser Info
</div>
------------------------------------------------------------------------------------点赞数量自动添加
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('a.zhan').click(function(){
var left = parseInt($(this).offset().left)+10, top = parseInt($(this).offset().top)-10, obj=$(this);
var Num = parseInt(obj.find('span').text());
Num++;
obj.find('span').text(Num);
$(this).append('<div id="zhan"><b>&#9829<\/b></\div>');
$('#zhan').css({'position':'absolute','z-index':'1', 'color':'#f00','left':left+'px','top':top+'px','font-size':'24px'}).animate({top:top-10,left:left},'slow',function(){
$(this).fadeIn('fast').remove();
});
return false;
});
});
</script>
<a class="zhan" style="cursor:pointer;text-decoration:none;font-size:12px;">赞(<span style="color:#f00;font-weight:bold;">0</span>)</a>
------------------------------------------------------------------------------------
HTML5自带下拉菜单
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
----------------------------------------------------------------------------------
打开网页显示一个弹出框效果
<html>

<head>

<script type="text/javascript">

function message()
{
alert("该提示框是通过 onload 事件调用的。")
}

</script>

</head>

<body οnlοad="message()">
</body>

</html>
------------------------------------------------------------------------------------

<script type="text/javascript">
var clickNumber =0;
$('.xianshi').click(function(){
if(clickNumber %2==0){
document.getElementById("address").style.height='auto';
}else{
document.getElementById("address").style.height='210px';

}
clickNumber ++;
})
</script>

------------------------------------------------------------------------------------

remove 删除事件

<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
------------------------------------------------------------------------------------
empty 删除被选元素的子元素。（清空div所有内容）

<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
<div id="div1" style="height:100px;width:300px;border:1px solid;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>清空 div 元素</button>
------------------------------------------------------------------------------------


------------------------------------------------------------------------------------
鼠标移入点击input框里默认内容消失，移除点击默认内容重新出现
或者 { placeholder="请输入密码" }
<input name="kw" id="destoon_kw" type="text" class="search_i" value="请输入关键词" οnfοcus="if(this.value=='请输入关键词') this.value='';" οnkeyup="STip(this.value);" autocomplete="off" x-webkit-speech speech/>
------------------------------------------------------------------------------------
这是用来设置密码框里的value值得
<input name="" type="text" value="密码" id="tx" style="width:100px;" />
<input name="" type="password" style="display:none;width:100px;" id="pwd" />
<script type="text/javascript">
var tx = document.getElementById("tx"), pwd = document.getElementById("pwd");
tx.onfocus = function(){
if(this.value != "密码") return;
this.style.display = "none";
pwd.style.display = "";
pwd.value = "";
pwd.focus();
}
pwd.onblur = function(){
if(this.value != "") return;
this.style.display = "none";
tx.style.display = "
";
tx.value = "密码";
}
------------------------------------------------------------------------------------
</script>
removeClass（）移除一个属性
addClass（）添加一个属性
用法：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p:first").removeClass("intro").addClass('main');
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
.main
{
font-size:90%;
color:blue;
}
</style>
----------------------------------------CSS固定页脚--------------------------------------------------

#footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background: #444;
}
/* IE 6 */
* html #footer {
position: absolute;
top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

---------------------------------------设置背景色渐变------------------------------------------------------------------------------------------
#colorbox {height: 100px;
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
------------------------------------------------------------------------------------
mouseenter 鼠标移入
<del> 删除标签
<ins> 下划线
------------------------------------------------------------------------------------
mouseleave 鼠标移出
------------------------------------------------------------------------------------
onClick 单击事件
onChange 改变事件
onSelect 选中事件
focus 获得焦点事件
blur 失去焦点
onLoad 载入文件
onUnload 卸载文件
write 输出单词
innerHTML 改变内容单词
改变文字的例子
<script>

function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}

</script>

word-break:break-all;width:20px;英文达到20px长度就会自动换到下一行了

<input ty="text"> <span id="demo">A Paragraph.</span><br>

<button type="button" οnclick="myFunction()">点击这里</button>
resize:none; 文本框（textarea）不可拖拽
textarea{outline:none;resize:none;} 在chrome中文本域textarea既没有黄框又不能拖拽的办法

word-break:break-all;
------------------------------------------------------------------------------------
h2{
display:block;
width:250px;
height:1.4em;
line-height:1.4;
text-align:center;
text-decoration:none;
border:1px solid #66a300;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
background-color:#8cca12;
color:#fff;
text-shadow:5px 5px 5px #66a300;
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc; 四角都是圆角，并且带有阴影
box-shadow:5px 5px 5px #ccc;}
------------------------------------------------------------------------------------
html { height: 101% }/*强制出现滚动条*/
------------------------------------------------------------------------------------
word-wrap:break-word; overflow:hidden; 如何实现CSS文本折行?
------------------------------------------------------------------------------------
display: inline-block 就是在同一行内的块级元素不换行
------------------------------------------------------------------------------------
display:inline; 内联元素，简单来说就是在同一行显示。
------------------------------------------------------------------------------------
display:block; 块级元素，简单来说就是就是有换行，会换到第二行
------------------------------------------------------------------------------------
border-radius: 3px; 可设置圆角
disabled="disabled" 设置按钮不可点击
------------------------------------------------------------------------------------
text-align:justify;text-justify:inter-ideograph;}/*文字两端对齐*/或者下面的
css文字两端对齐
text-align:Justify(火狐);
text-justify:inter-ideograph(IE)
代码示例 div {text-justify : auto; text-align:justify; }（推荐）
text-justify:auto;
text-justify:distribute;
text-justify:inter-cluster;
text-justify:inter-ideograph;
text-justify:inter-word;
text-justify:kashida;
------------------------------------------------------------------------------------
#{width:200px;
height:200px;
background-color:#efefef;
border:3px #a72525 solid;
-webkit-border-radius:100px;
} 可画圆
------------------------------------------------------------------------------------
.delete-line{text-decoration:line-through;} 给数字上加横线
----------------------------------------------------------------------------------
disabled="disabled" 或者加这个 readonly="" 可设置input框的值为只读状态
------------------------------------------------------------------------------------
a {color: inherit;} 表示加了a标签字体也不变颜色，继承父级
------------------------------------------------------------------------------------
input:focus{ 点击按钮按钮的本身变颜色
background:yellow;}
------------------------------------------------------------------------------------
a:hover{ text-decoration: underline; 设置给字体设置a标签之后出现下划线以及颜色
color:#FF0000;}或
a:hover, a:focus, a:active{ text-decoration: underline;
color:#FF0000;}
------------------------------------------------------------------------------------
a{text-decoration:none} 去掉字体的下划线
vertical-align:middle; /*垂直居中，子元素全部垂直居中*/
overflow:hidden;text-indent:-30000px;} /*通过缩进负数让文字影藏*/
overflow:hidden;text-indent:-30000px;} /*通过缩进负数让文字影藏*/
line-height:normal;} /*默认行高*/
.f-cp{cursor:pointer;} /*小手光标*/
.f-cd{cursor:default;} /*默认光标*/
.f-ch{cursor:help;} /*帮助光标*/
.f-cm{cursor:move;} /*移动光标*/
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}/*不允许选择*/
.f-usa{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;-o-user-select:auto;user-select:auto;}/*允许选择*/
.f-wwb{
white-space:normal; /*忽略空白*/
word-wrap:break-word; /*单词内换行*/
word-break:break-all; /*单词内换行*/
}
.f-pre{
overflow:hidden;
text-align:left;
white-space:pre-wrap; /*保留空白-正常换行*/
word-wrap:break-word; /*单词内换行*/
word-break:break-all; /*单词内换行*/
}
.f-toe{
overflow:hidden;
word-wrap:normal; /*不截断单词*/
white-space:nowrap; /*不换行*/
text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本*/
}
------------------------------------------------------------------------------------
a:hover, a:focus, a:active{ 鼠标移入点击设置给字体设置a标签之后给出现下划线字体加粗以及改变颜色
text-decoration:underline;
font-weight:bold;
color:#FF0000;}
------------------------------------------------------------------------------------
a:hover, a:focus, a:active{ 设置鼠标移到字体上的时候给字加背景图片
background-image:url(17.jpg);}

------------------------------------------------------------------------------------
.neirong1_1 p{height:30px;line-height:30px;border-bottom:dotted 1px #CCCCCC;padding:0 10px;overflow:hidden;}给字下面加点,(如果要紧挨着字去掉height:30px;line-height:30px;)
------------------------------------------------------------------------------------
a:hover{color:#999999;text-decoration:underline;}鼠标点击后字的下方出现横线以及他的颜色
------------------------------------------------------------------------------------
-webkit-text-size-adjust:none; 给body加可以设置360浏览器中小的字体
------------------------------------------------------------------------------------
字体风格（font-style）
字体变形（font-variant
------------------------------------------------------------------------------------
border-radius: 50%; 设置按钮为圆圈形状的
------------------------------------------------------------------------------------
vertical-align:middle; 把图片或者图片按钮和字水平放在一个div中，给图片加样式,并且要设置水平垂直居中
------------------------------------------------------------------------------------
margin:0 auto；图片水平居中设置
------------------------------------------------------------------------------------
img{
box-shadow:3px 3px 6px #666;} 图片的投影效果；

img{
-Webklit-box-shadow:3px 3px 6px #666;
-moz-box-shadow:3px 3px 6px #666;
box-shadow:3px 3px 6px #666;}
------------------------------------------------------------------------------------
鼠标移入悬浮起来加阴影效果
.aa:hover{ border:1PX solid #333333; box-shadow:2px 2px 8px rgba(0,0,0,2);}
------------------------------------------------------------------------------------
.alert{
background-color:#000;
border-radius:2em;
opacity:0.8;
filter:alpha(opacity=80);} 弹出框的透明度

.alert{
background-color: rgba(0,0,0,0.8);
border-radius:2em;
}
------------------------------------------------------------------------------------
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity:0.8; 设置透明度
------------------------------------------------------------------------------------
fieldset 组合表单中的相关元素：

<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
------------------------------------------------------------------------------------
<strike> 标签可定义加删除线文本定义。
------------------------------------------------------------------------------------
vertical-align:50% 对齐方式

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

------------------------------------------------------------------------------------
background-repeat:no-repeat; background-position:top center;背景图不重复
------------------------------------------------------------------------------------
将一张图片设置成整个页面的背景图如下代码
html {
background: url('images/xiangqingtu.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
---------------------------------------------------------------------------------------
background-position: center; 背景图片居中
---------------------------------------------------------------------------------------
list-style-type:none; 去掉li的点
---------------------------------------------------------------------------------------
display:inline; li设置成在一排显示
type=disc li为黑色圆点
type=circle li为空心圆点
type=square li为黑色正方形
---------------------------------------------------------------------------------------
cursor:pointer; 手表样式/手型
---------------------------------------------------------------------------------------
cursor:crosshair; 十字架样式
---------------------------------------------------------------------------------------
cursor:wait; 手表样式
---------------------------------------------------------------------------------------
cursor:help; 问号样式
---------------------------------------------------------------------------------------
cursor:e-resize; 右的箭头样式
---------------------------------------------------------------------------------------
cursor:no-resize; 右上箭头样式
---------------------------------------------------------------------------------------
cursor:n-resize; 上箭头样式
---------------------------------------------------------------------------------------
cursor:nw-resize; 左上箭头样式
---------------------------------------------------------------------------------------
cursor:w-resize; 左的箭头样式
---------------------------------------------------------------------------------------
cursor:sw-resize; 左下箭头样式
---------------------------------------------------------------------------------------
cursor:s-resize; 下的箭头样式
---------------------------------------------------------------------------------------
vertical-align:top!important 上下居顶
---------------------------------------------------------------------------------------
vertical-align:middle!important 上下居中
---------------------------------------------------------------------------------------
vertical-align:bottom!important 上下居底
---------------------------------------------------------------------------------------
<divonmouseoverdivοnmοuseοver="this.style.backgroundColor='#F4F9FD'" 改变背景颜色《2》

οnmοuseοut="this.style.backgroundColor='#FFFFFF'"></div>
---------------------------------------------------------------------------------------
<style> 改变背景颜色《3》
.d_over{background-color:#307172;}
.d_out{background-color:#EFEFEF;}
</style>

<divclassdivclass="d_out"οnmοuseοver="this.className='d_over'"
οnmοuseοut="this.className='d_out'">DIV背景颜色</div>
---------------------------------------------------------------------------------------
word-wrap:break-word;
width:200px; 给div设置高度强制换行
---------------------------------------------------------------------------------------
dashed 是虚线但稍大；
---------------------------------------------------------------------------------------
dotted 也是虚线特小的点；
---------------------------------------------------------------------------------------
outset CSS 双线凹凸边框
---------------------------------------------------------------------------------------
display:inline; 让两个元素在一排显示
---------------------------------------------------------------------------------------
根据屏幕定位(固定定位)
style="position:fixed" z-index:999;width:100% height:100% top:0px; left:0px; background:url(../img...)

是定位屏幕变化，div位置不变时用的
<div class="box" ></div>
.box{定位自己写 left:50%; margin-left:-200px; width:400px;height:200px; }
---------------------------------------------------------------------------------------

font-style: normal; 改变斜体字让斜体字变正常
.aaa em,i{font-style: normal;}
---------------------------------------------------------------------------------------
溢出了显示省略号
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
---------------------------------------------------------------------------------------

在字体之间加 | 用 background:url(img/fg.jpg) no-repeat left center; 去掉前面一个的话在他的span标签里写内嵌 <span style="background:none;">
如果还需要在第一个加鼠标移入换颜色可以写成这样 .banner_top span:hover{ background:#aacd06 !important;}（这个是鼠标移入改变颜色后面加 important;（标识符）就可以了）
---------------------------------------------------------------------------------------
<details> 可以制作下拉菜单
<summary>HTML 5</summary>
This document teaches you
</details>
---------------------------------------------------------------------------------------
制作进行网页QQ聊天


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=270863798&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:270863798:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=270863798&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:270863798:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=270863798&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:270863798:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

---------------------------------------------------------------------------------------
返回顶部

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
.toTop{position:fixed;display:block;width:48px;height:49px;text-indent:-9999em;overflow:hidden;right:20px;visibility:visible;bottom:10px;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);background:url(bz04.png) no-repeat 0 0}/*图片路径，请根据自己情况做修改*/
.toTop:hover{background-position:-48px 0}

<script type="text/jscript">

var $backToTopTxt="返回顶部";
$backToTopEle=$('<a href="javascript:void(0)" class="toTop" title=backToTopTxt alt=backToTopTxt></a>').appendTo($("body")).text($backToTopTxt).attr("title", $backToTopTxt).click(function(){$("html, body").animate({ scrollTop: 0 }, 120);}), $backToTopFun = function() {var st = $(document).scrollTop(), winh = $(window).height();(st > 0)? $backToTopEle.show(): $backToTopEle.hide();/*IE6下的定位*/if(!window.XMLHttpRequest){$backToTopEle.css("top", st + winh - 166);}};
$(window).bind("scroll", $backToTopFun);
$backToTopFun();
</script>
---------------------------------------------------------------------------------------
分享到
<section class="share cl">

<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare float-share">
<span class="bds_more">分享到：</span>
<a class="bds_tsina"></a>
<a class="bds_qzone"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<a class="bds_sqq"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)</script>

</section>
---------------------------------------------------------------------------------------
获取input框里的值

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){

$("#btn2").click(function(){
alert( $("#test").val());
});
});
</script>
</head>

<body>
<input type="text" id="test" value="sss">
<button id="btn2">显示 HTML</button>
</body>

</html>
---------------------------------------------------------------------------------------或者下面

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

</html>
---------------------------------------------------------------------------------------
计算input框里的值数
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.2.min.js - 快捷方式.lnk"></script>
<input type='text' id='a' >
<input type='text' id='b' >
<input type='text' id='c' >
<input type='text' id='d' >
<input type='button' value='计算' οnclick="add()">
js代码：
<script>
function add(){
var a = document.getElementById("a").value;
var b= document.getElementById("b").value;
var c= document.getElementById("c").value;

try{
document.getElementById("d").value = Number(a)+Number(b)+Number(c);
}catch(e){
alert("输入的数值有误");
}
}
</script>
</body>

</html>
---------------------------------------------------------------------------------------
将三个input框的值相连在一起

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.2.min.js - 快捷方式.lnk"></script>
<input type='text' id='a' >
<input type='text' id='b' >
<input type='text' id='c' >
<input type='text' id='d' >
<input type='button' value='计算' οnclick="add()">
js代码：
<script>
function add(){
var a = document.getElementById("a").value;
var b= document.getElementById("b").value;
var c= document.getElementById("c").value;

try{
document.getElementById("d").value = a+b+c;
}catch(e){
alert("输入的数值有误");
}
}
</script>
</body>

</html>

---------------------------------------------------------------------------------------
顶部广告

<div id="top" style="display:none;"><img src="images/404错误页面_03.jpg" width="980" height="60" /></div>
<div id="banner" style="width:980px; height:291px;display:none;"><img src="images/404错误页面_03.jpg" width="980" height="291" /></div>

<script type="text/jscript">
$(document).ready(function(){
$("#banner").slideDown("slow"); /*下拉速度可自己设置*/
});
function displayimg(){
$("#banner").slideUp(1000,function(){
$("#top").slideDown(1000); /*下拉速度可自己设置*/
});
}
setTimeout("displayimg()",4000); /*大图显示时间可自己设置*/

</script>
---------------------------------------------------------------------------------------
两边对联

<div class="dual dual_l"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
<div class="dual dual_r"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>

.dual{top:260px;position:absolute; width:102px; overflow:hidden; display:none; z-index:100}
.dual_l{ left:6px;}
.dual_r{right:6px;}
.dual_con{border:#CCC solid 1px;width:100px; height:300px; overflow:hidden; background-color:#0C9}
.dual_close{width:100%;height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;}

<script type="text/jscript">
var dual = $(".dual");
var dual_close = $("a.dual_close");
var screen_w = screen.width;
if(screen_w>1024){dual.show();}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
dual.stop().animate({top:scrollTop+260});
});
dual_close.click(function(){
$(this).parent().hide();return false;
});
</script>
--------------------------------------------------响应式布局-------------------------------------
比如在移动端、手机上打开这个网页的话，如果做响应式布局，还要在head区域加上如下代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />
如果不是很明白，就直接粘贴过去使用就可以了。
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，网页宽度采用设备宽度，缩放比例为1，不允许用户缩放操作，
以上的头部声明是手机端页面的标配。

如果你真的要做响应式布局响应到手机端的话，对于字体字号的选择推荐使用rem做为单位，设置如下：
html{font-size: 62.5%;}
使用的时候，如果你要设置一个16px的字号，用rem字号表示就是 1.6rem，font-size:2em; == font-size:20px;
--------------------------------------------------------------------------------------
网页中插入视频播放代码全集

1.avi格式

代码片断如下：

<object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="0">
<param name="PlayCount" value="0">
<param name="Appearance value="0 value=""">
<param name="BorderStyle value="0 value=""">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="/Mbar.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="/Mbar.avi" src="http://blog.163.com/quyan8869@126/blog/Mbar.avi">
</embed>
</object>
--------------------------------------------------------------------------------------
2.mpg格式

代码片断如下：

<object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">
<param name="Appearance" value="0">
<param name="AutoStart" value="-1">
<param name="AllowChangeDisplayMode" value="-1">
<param name="AllowHideDisplay" value="0">
<param name="AllowHideControls" value="-1">
<param name="AutoRewind" value="-1">
<param name="Balance" value="0">
<param name="CurrentPosition" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableSelectionControls" value="0">
<param name="EnableTracker" value="-1">
<param name="Filename" value="/mpeg/halali.mpg" valuetype="ref">
<param name="FullScreenMode" value="0">
<param name="MovieWindowSize" value="0">
<param name="PlayCount" value="1">
<param name="Rate" value="1">
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="ShowControls" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowPositionControls" value="0">
<param name="ShowTracker" value="-1">
<param name="Volume" value="-480">
</object>
--------------------------------------------------------------------------------------
3.smi格式

代码片断如下：

<OBJECT id=RVOCX classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA width=240 height=180>
<param name="_ExtentX" value="6350">
<param name="_ExtentY" value="4763">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="rm.rm">
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="console1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed src="http://blog.163.com/quyan8869@126/blog/real.smi" type="audio/x-pn-realaudio-plugin" console="Console1" controls="ImageWindow" height="180" width="240" autostart="true"></OBJECT>
--------------------------------------------------------------------------------------
4.rm格式

代码片断如下：

<OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352>
<param name="_ExtentX" value="9313">
<param name="_ExtentY" value="7620">
<param name="AUTOSTART" value="0">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="SRC" value="rtsp://203.*.*.35/vod/dawan-a.rm">
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="Clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" AUTOSTART="false">
</OBJECT>
--------------------------------------------------------------------------------------
5.wmv格式

代码片断如下：

<object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en
/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">
<param name="AutoRewind" value=1>
<param name="FileName" value="/blog/******.wmv">
<param name="ShowControls" value="1">
<param name="ShowPositionControls" value="0">
<param name="ShowAudioControls" value="1">
<param name="ShowTracker" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowCaptioning" value="0">
<param name="AutoStart" value=1>
<param name="Volume" value="-2500">
<param name="AnimationAtStart" value="0">
<param name="TransparentAtStart" value="0">
<param name="AllowChangeDisplaySize" value="0">
<param name="AllowScan" value="0">
<param name="EnableContextMenu" value="0">
<param name="ClickToPlay" value="0">
</object>
--------------------------------------------------------------------------------------
6.wma格式

放在 <body> 里面。下面是部分解释:

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" > <param name="Filename" value="/blog/1.Wma">
<param name="PlayCount" value="1">
<param name="AutoStart" value="0">
<param name="ClickToPlay" value="1">
<param name="DisplaySize" value="0">
<param name="EnableFullScreen Controls" value="1">
<param name="ShowAudio Controls" value="1">
<param name="EnableContext Menu" value="1">
<param name="ShowDisplay" value="1">
</object>
--------------------------------------------------------------------------------------
7.Windows Media Player 系列(不同面板样式)

综合型：

<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 codebase="http://activex.microsoft.com/activex/controls/mplayer
/en/nsmp2inf.cab#Version=6,1,5,217"
id=MediaPlayer type=application/x-oleobject width=210 height=340 standby="Loading Microsoft Windows Media Player components..." VIEWASTEXT align=MIDDLE>
<param name=AudioStream value=-1>
<param name=AutoSize value=0>
<param name=AutoStart value=1>
<param name=AnimationAtStart value=0>
<param name=AllowScan value=-1>
<param name=AllowChangeDisplaySize value=0>
<param name=AutoRewind value=0>
<param name=Balance value=0>
<param name=BaseURL value="">
<param name=BufferingTime value=5>
<param name=CaptioningID value="">
<param name=ClickToPlay value=0>
<param name=CursorType value=32512>
<param name=CurrentPosition value=-1>
<param name=CurrentMarker value=0>
<param name=DefaultFrame value=1>
<param name=DisplayBackColor value=0>
<param name=DisplayForeColor value=16777215>
<param name=DisplayMode value=0>
<param name=DisplaySize value=0>
<param name=Enabled value=-1>
<param name=EnableContextMenu value=-1>
<param name=EnablePositionControls value=0>
<param name=EnableFullScreenControls value=0>
<param name=EnableTracker value=1>
<param name=Filename value="http://202.102.*.*/flash/2/fff.swf">
<param name=InvokeURLs value=-1>
<param name=Language value=-1>
<param name=Mute value=0>
<param name=PlayCount value=1>
<param name=PreviewMode value=0>
<param name=Rate value=1>
<param name=SAMILang value="">
<param name=SAMIStyle value="">
<param name=SAMIFileName value="">
<param name=SelectionStart value=0>
<param name=SelectionEnd value=true>
<param name=SendOpenStateChangeEvents value=-1>
<param name=SendWarningEvents value=-1>
<param name=SendErrorEvents value=-1>
<param name=SendKeyboardEvents value=0>
<param name=SendMouseClickEvents value=0>
<param name=SendMouseMoveEvents value=0>
<param name=SendPlayStateChangeEvents value=-1>
<param name=ShowCaptioning value=0>
<param name=ShowControls value=1>
<param name=ShowAudioControls value=1>
<param name=ShowDisplay value=1>
<param name=ShowGotoBar value=1>
<param name=ShowPositionControls value=1>
<param name=ShowStatusBar value=1>
<param name=ShowTracker value=1>
<param name=TransparentAtStart value=0>
<param name=VideoBorderWidth value=0>
<param name=VideoBorderColor value=0>
<param name=VideoBorder3D value=0>
<param name=Volume value=-1070>
<param name=WindowlessVideo value=1>
</object>
--------------------------------------------------------------------------------------
简易型：

<EMBED src=http://www.*.com/mediadate/lxlhbcn.asf style="HEIGHT: 45px; WIDTH: 190px" type=audio/mpeg AUTOSTART="1" loop="0">
</EMBED>
--------------------------------------------------------------------------------------
标签型:

<embed width=240 height=140 transparentatstart=true animationatstart=false autostart=true autosize=false volume=100 displaysize=0 showdisplay=true showstatusbar=true showcontrols=true showaudiocontrols=true showtracker=true showpositioncontrols=true balance=true src="http://www.*.com/mediadate/lxlhbcn.asf">
</embed>
--------------------------------------------------------------------------------------
引用内容

媒体播放器的外观界面

在网页中，你可以通过相关属性来控制媒体播放器的哪些部分出现，哪些部分不出现。
媒体播放器包括如下元素：
Video Display Panel：视频显示面板；
Video Border：视频边框；
Closed Captioning Display Panel；字幕显示面板；
Track Bar；搜索栏；
Control Bar with Audio and Position Controls：带有声音和位置控制的控制栏；
Go To Bar：转到栏；
Display Panel：显示面板；
Status Bar：状态栏；
--------------------------------------------------------------------------------------
下面的属性用来决定显示哪一个元素：
ShowControls 属性：是否显示控制栏（包括播放控件及可选的声音和位置控件）；
ShowAudioControls 属性：是否在控制栏显示声音控件（静音按钮和音量滑块）；
ShowPositionControls 属性：是否在控制栏显示位置控件（包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑）；
ShowTracker 属性：是否显示搜索栏；
ShowDisplay 属性：是否显示显示面板（用来提供节目与剪辑的信息）；
ShowCaptioning 属性：是否显示字幕显示面板；
ShowGotoBar 属性：是否显示转到栏；
ShowStatusBar 属性：是否显示状态栏；
--------------------------------------------------------------------------------------
播放列表

媒体播放器提供下面的方法来访问播放列表中的剪辑：
Next 方法，跳到节目（播放列表）中的下一个剪辑；
Previous 方法，跳回到节目中的上一个剪辑；
媒体播放器的一个特性是能够预览节目中的每一个剪辑，使用如下属性：
PreviewMode 属性，决定媒体播放器当前是否处于预览模式；
CanPreview 属性，决定媒体播放器能否处于预览模式；
在windows 媒体元文件中，可以为每一个剪辑指定预览时间——PREVIEWDURATION,如果没有指定，那么默认的预览时间是10秒钟。
你也可以用Windows 媒体元文件来添加 watermarks 与 banners，元文件也支持插入广告时的无间隙流切换。
--------------------------------------------------------------------------------------
节目信息

使用 GetMediaInfoString 方法可以返回相关剪辑或节目的如下信息：
文件名：File name
标题：Title
描述：Description
作者：Author
版权：Copyright
级别：Rating
URLs：logo icon、watermark、banner的地址
剪辑信息可以放在媒体文件中，也可以放在Windows 媒体元文件中，或者两者都放。如果在元文件中指定了剪辑信息，那么用 GetMediaInfoString 方法返回的就是元文件中的信息，而不会返回剪辑中包含的信息。
在元文件中，附加信息可以放置在每一个剪辑或节目的 PARAM标签中。你可以为每个剪辑添加任意多个 PARAM 标签，用来存储自定义的信息或链接到相关站点。在 PARAM 标签中的信息可以通过 GetMediaParameter 方法来访问。
下面的属性返回有关大小和时间的信息：
ImageSourceHeight、ImageSourceWidth：返回图像窗口的显示尺寸；
Duration 属性，返回剪辑的长度(秒)，要检测这个属性是否包含有效的数值，请检查IsDurationValid 属性。(对于广播的视频，其长度是不可预知的)。
--------------------------------------------------------------------------------------
字幕

你可以用 .smi 文件来为你的节目添加字幕。媒体播放器支持下面的属性来处理字幕：
SAMIFileName 属性，指定 .smi 文件的名字；
SAMILang 属性，指定字幕的语言(如果没有指定则使用第一种语言)；
SAMIStyle 属性，指定字幕的文字大小和样式；
ShowCaptioning 属性，决定是否显示字幕显示面板；
--------------------------------------------------------------------------------------
脚本命令

伴随音频、视频流，你可以在流媒体文件中加入脚本命令。脚本命令是多媒体流中与特定时间同步的多对Unicode串。第一个串标识待发命令的类型，第二个串指定要执行的命令。
当流播放到与脚本相关的时间时，控件会向网页发送一个 ScriptCommand事件，然后由事件处理进程来响应这个事件。脚本命令字符串会作为脚本命令事件的参数传递给事件处理器。
媒体播放器会自动处理下面类型的内嵌脚本命令：
1) URL 型命令：当媒体播放器控件收到一个URL型的命令时，指定的URL会被装载到用户的默认浏览器。如果媒体播放器嵌在一个分帧的HTML文件中，URL页可以装载到由脚本命令指定的帧内。如果脚本命令没有指定一个帧，将由 DefaultFrame 属性决定将 URL 页装入哪一帧。
你可以通过设置 InvokeURLs 属性来决定是否自动处理 URL 型的脚本命令。如果这个属性的值为 false ，媒体播放器控件将忽视 URL型命令。但是脚本命令事件仍会触发，这就允许你有选择地处理 URL 型命令。
URL 型命令指定的是 URL 的相对地址。基地址是由 BaseURL属性指定的。媒体播放器控件传送的脚本命令事件的命令参数是链接好的地址。
2) FILENAME 型命令：当媒体播放器控件收到一个FILENAME型的命令时，它将 FileName属性设置为脚本命令提供的文件，之后媒体播放器会打开这个文件开始播放。媒体播放器控件总是自动处理 FILENAME 型命令，不象 URL 型命令，它们不能被禁止。
3) TEXT型命令：当媒体播放器控件收到一个 TEXT型的命令时，它会将命令的内容显示在控件的字幕窗口。内容可以是纯文本的，也可以是 HTML。
4) EVENT型命令：当媒体播放器控件收到一个 EVENT型的命令时，它会在媒体元文件中搜索 EVENT 元素的 NAME 属性。如果 NAME 属性与脚本命令中的第二个字符串匹配，媒体播放器控件就执行包含在 EVENT 元素中的条目。
5) OPENEVENT型命令：当媒体播放器控件收到一个 OPENEVENT型的命令时，它会在媒体元文件中检查 EVENT 元素，并打开匹配的标题，但不播放，直到收到来自 EVENT型命令的同名真实事件。
--------------------------------------------------------------------------------------
捕捉键盘和鼠标事件

EnableContextMenu 与 ClickToPlay 属性为用户提供了在图像窗口进行操作的方法。
如果 EnableContextMenu 属性为 true ，在图像窗口右击鼠标可以打开关联菜单，如果将ClickToPlay 属性设为 true ，用户可以单击图像窗口进行播放与暂停的切换。
要接收鼠标移动和单击事件，请将 SendMouseMoveEvents 和 SendMouseClickEvents 属性设为 true 。鼠标事件有：
MouseDown，当用户按下鼠标时产生；
MouseUp，当用户释放鼠标时产生；
MouseMove，当用户移动鼠标时产生；
Click，当用户在媒体播放器上单击鼠标按钮时产生；
DbClick，当用户在媒体播放器上双击鼠标按钮时产生；
要接收键盘事件，请将 SendKeyboardEvents 属性设为 true 。键盘事件有：
KeyDown，当用户按下一个键时产生；
KeyUp，当用户释放一个键时产生；
KeyPress，当用户按下并释放一个键时产生；
--------------------------------------------------------------------------------------
监测流状态与网络链接

流状态属性包括：
PlayState：播放状态；
OpenState：打开状态；
Bandwidth：带宽；
支持的事件有：
OpenStateChange：打开状态改变(仅当SendOpenStateChangeEvents属性为true时触发)
PlayStateChange：播放状态改变(仅当SendPlayStateChangeEvents属性为true时触发)
EndOfStream：流结束时触发；
NewStream：打开新流时触发；
网络接收属性包括：
ReceptionQuality：接收质量；
ReceivedPackets：已经收到的包；
LostPackets：丢失的包；
监测缓冲的属性有：
BufferingTime：缓冲时间；
BufferingCount：缓冲次数；
BufferingProgress：缓冲进程；
Buffering：缓冲事件；
--------------------------------------------------------------------------------------
错误处理

媒体播放器提供了内建的错误处理功能——在对话框或状态栏显示错误信息。另外，你可以自己添加错误处理程序。如果 SendErrorEvents 属性设置为 true，将不会显示错误框，而是发送错误事件；如果 SendErrorEvents 属性设置为 false，将显示错误框，而是发送错误事件。
媒体播放器支持下面的错误处理事件：
Error 事件，指有危险性错误发生；
Warning 事件，指发生了非危险性的错误；
当你的应用程序接收到一个错误事件，你可以检测下面的属性来确定具体的错误信息：
HasError：检测目前的媒体播放器是否有错误；
ErrorCode：提供与该类型错误相关的代码值；
ErrorDescription：提供错误的描述信息；
ErrorCorrection：指定媒体播放器对该类型的错误进行校正；
--------------------------------------------------------------------------------------
播放CD

媒体播放器将 CD 看作（在每个音轨的开头具有标记的）单一音频流。要在网页中使用CD，你需要将 FileName 属性设为 CDAUDI，必须带有冒号，如下所示：

<HTML>
<HEAD><TITLE>CD Audio Playback Example</TITLE></HEAD>
<BODY>
<OBJECT ID="MediaPlayer"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
WIDTH="320"
HEIGHT="508"
STYLE="position:absolute; left:0px; top:70px;" >
<PARAM NAME="FileName" VALUE="cdaudi">
<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="ShowControls" VALUE="1">
<PARAM NAME="ShowStatusBar" VALUE="1">
<PARAM NAME="ShowDisplay" VALUE="1">
</OBJECT>
</BODY>
</HTML>

之后你可以用 Play 方法播放 CD 了。
你可以在 windows 媒体元文件中指定播放顺序以及每个音轨的信息。示例如下：

<ASX VERSION="3.0">
<TITLE>CD Audio with the Media Player</TITLE>
<AUTHOR>Windows Media Technologies</AUTHOR>
<COPYRIGHT>(c) 1999, Microsoft, Inc.</COPYRIGHT>

<ENTRY>
<TITLE>Track 1: Title 1</TITLE>
<REF href="/blog/cdaudi" />
<STARTMARKER NUMBER="1"/>
<ENDMARKER NUMBER="2"/>
</ENTRY>

<ENTRY>
<TITLE>Track 2: Title 2</TITLE>
<REF href="/blog/cdaudi" />
<STARTMARKER NUMBER="2"/>
<ENDMARKER NUMBER="3"/>
</ENTRY>

<ENTRY>
<TITLE>Track 3: Title 3</TITLE>
<REF href="/blog/cdaudi" />
<STARTMARKER NUMBER="3"/>
<ENDMARKER NUMBER="4"/>
</ENTRY>

<ENTRY>
<TITLE>Track 4: Title 4</TITLE>
<REF href="/blog/cdaudi" />
<STARTMARKER NUMBER="4"/>
</ENTRY>
</ASX>