欢迎光临
我们一直在努力

简单的弹出二维码css.js

shanhubei阅读(659)

<!DOCTYPE html>
<html>
<head>

<style type=”text/css”>
/*二维码star*/
.qr_code_none {display:none}
.layout_qr_code {width:100%; height:100%; position:fixed; left:0; top:0; right:0; bottom:0; z-index:2000; background:rgba(255,255,255,0.95); -webkit-animation:bg_w 0.5s ease-out both; -moz-animation:bg_w 0.5s ease-out both; animation:bg_w 0.5s ease-out both}
@-webkit-keyframes bg_w {0% {background:rgba(255,255,255,0)} 100% {background:rgba(255,255,255,0.95)}}
@keyframes bg_w {0% {background:rgba(255,255,255,0)} 100% {background:rgba(255,255,255,0.95)}}
.layout_qr_code div {display:inline-block; width:52%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); font-size:0; -webkit-animation:m_b_2 0.5s 0.3s ease-out both; -moz-animation:m_b_2 0.5s 0.3s ease-out both; animation:m_b_2 0.5s 0.3s ease-out both}
.layout_qr_code div span {display:block; padding:5px; background:#FFF; border:1px solid #dbdbdb}
@-webkit-keyframes m_b_2 {0% {transform:translate(-50%,0%); -webkit-transform:translate(-50%,0%); opacity:0; -webkit-opacity:0} 100% {transform:translate(-50%,-50%); -webkit-transform:translateY(-50%,-50%); opacity:1; -webkit-opacity:1}}
@keyframes m_b_2 {0% {transform:translate(-50%,0%); -webkit-transform:translate(-50%,0%); opacity:0; -webkit-opacity:0} 100% {transform:translate(-50%,-50%); -webkit-transform:translateY(-50%,-50%); opacity:1; -webkit-opacity:1}}
.layout_qr_code div img {width:100%}
.layout_qr_code div p {margin-top:5px; line-height:1.5rem; font-size:0.75rem; text-align:center}
.layout_qr_code div p strong {display:block; font-size:0.875rem}
/*二维码end*/

/*遮罩star*/
.win_none {display:none}
.win {position:fixed; z-index:109; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.9); -webkit-animation:bg 0.3s ease-out both; -moz-animation:bg 0.3s ease-out both; animation:bg 0.3s ease-out both}
.win .transparent_bg {position:fixed; z-index:11; left:0; right:0; top:0; bottom:0}
@-webkit-keyframes bg {0% {background:rgba(0,0,0,0)} 100% {background:rgba(0,0,0,0.8)}}
@keyframes bg {0% {background:rgba(0,0,0,0)} 100% {background:rgba(0,0,0,0.8)}}
.win .layout_win {background:#FFF; position:absolute; left:0; bottom:0; right:0; z-index:12; transform:translateY(110%); -webkit-transform:translateY(110%); -webkit-animation:m_b 0.3s ease-out both; -moz-animation:m_b 0.3s ease-out both; animation:m_b 0.3s ease-out both}
@-webkit-keyframes m_b {0% {transform:translateY(110%); -webkit-transform:translateY(110%)} 100% {transform:translateY(0); -webkit-transform:translateY(0)}}
@keyframes m_b {0% {transform:translateY(110%); -webkit-transform:translateY(110%)} 100% {transform:translateY(0); -webkit-transform:translateY(0)}}
/*遮罩end*/
</style>
</head>
<body>
<li><a onClick=”document.getElementById(‘qr_code’).className=’layout_qr_code'” href=”javascript:void(0);”>关注巨匠汇</a></li>
<div id=”qr_code” class=”qr_code_none”>
<div>
<span><img src=”qrcode.jpg” id=”qr_codes”/></span>
<p>长按二维码,识别图中二维码<strong>关注xxx</strong></p>
</div>
</div>
<div id=”win” class=””><div class=”tips”></div></div>

<script>
//document.getElementById(“idname”).style.display=”none”;
//.className=”aa”
//btn1.removeEventListener(“click”,handle1,false);
//btn1.addEventListener(‘click’,handle1,false);
var handle1=function() {
document.getElementById(“qr_code”).className=”qr_code_none”;
}
var btn1=document.getElementById(“qr_codes”);/*实名函数*/
btn1.addEventListener(‘click’,handle1,false );

</script>

</body>
</html>

优化一个前端的10种方法

shanhubei阅读(940)

1.  请减少HTTP请求
基本原理:

  在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。

一个正常HTTP请求的流程简述:如在浏览器中输入”www.xxxxxx.com”并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。所以,请减少HTTP请求。

解决办法:

  合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2.  请正确理解 Repaint 和 Reflow

 注:Repaint 和 Reflow 也就是重绘和重排,请允许我在这卖弄下我有限认识的那么几个英语单词…囧

基本原理:

  Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。

减少性能影响的办法:

  上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式; 有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。

总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围。

 

3.  请减少对DOM的操作  

基本原理:

  对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。

天生就慢。在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。

  解决办法:

  修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。

减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。

注:在IE中:hover会降低响应速度。

 

4.  使用JSON格式来进行数据交换  

基本原理:

  JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

  JS操作JSON:

  在JSON中,有两种结构:对象和数组。

1. 一个对象以 “ { ”  开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/值 对”之间使用 “ ,  ”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要。如:

var obj={"name":"darren","age":24,"location":"beijing"}

2. 数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},
{"name":"weidong.nie","age":24,"location":"hunan"}];

对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下,使用JSON进行数据传递简直是太美妙了,可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员,一定会非常喜欢JSON。

 

5.  高效使用HTML标签和CSS样式  

  基本原理:

  HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

CSS指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。

一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式,我不是要你重构页面,只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML:

<table><tr><td>
  <table><tr><td>
    ...
  </td></tr></table>
</td></tr></table>

或者这样的CSS:

body .box .border ul li p strong span{color:#000}

以上都是对HTML和CSS非常糟糕的使用方法。

  正确理解:

  HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

CSS是用来渲染页面的,也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的,这里对css选择符按照开销从小到大的顺序梳理一下:

  ID选择符 #box
  类选择符 .box  
  标签 div
  伪类和伪元素 a:hover

当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。

 

6.  使用CDN加速(内容分发网络)  

  基本原理:

  CDN的全称是Content Delivery Network,即内容分发网络。

“其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。” – 百度百科。

上面几句话有多少能安安心心看完的,所以我还是通过说故事再来介绍一遍吧,顺便补一句,故事出处不明,^_^:

 

古代打仗大家一定都知道,由于古代的交通很不发达,所以当外族进攻的时候往往不能及时的反击,等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影,这个让古代的帝王很是郁闷。后来帝王们学聪明了,都将大量的兵员提前派往边境驻扎,让他们平时屯田,战时当兵,这样的策略起到了很显著的作用。

  不足之处:

  实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温,这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。 

 

7.  将CSS和JS放到外部文件中引用,CSS放头,JS放尾  

  基本原理:

  注:这个是很基础且必须遵循的知识点,可是为了文章的完整性勉为其难加进来吧,嘿嘿。

引入外部文件好处是显而易见的,而且是项目稍稍复杂一点的时候就有必要了这样做了。

易维护、易扩展,方便管理和重复利用。

  正确的方式:

  JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。

因为这个阻塞的特点,建议把JavaScript代码放到</body>标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。

HTML规范清楚指出CSS要放包含在页面的<head>区域内,这里就不多解释了。

 

8.  精简CSS和JS文件  

  基本原理:

  有一条非常重要的准则一直没有提到,就是CSS和JavaScript的压缩,直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor,它的特点是:移除注释;移除额外的空格;细微优化;标识符替换。

YUI Compressor是java程序,如果你对java很熟悉的话可快速的上手使用yuicompressor.jar;如果你对java很陌生也没关系,一样可以使用YUI Compressor,下面介绍其使用方式。

  YUI Compressor的配置和使用:

  先配置使用环境:

1.先确保电脑中是否安装了JDK

2.再配置必要的环境变量(细节不能三两句说清,所以不知道如何设置还是搜索吧)

3.在cmd界面,输入javac可测试是否安装成功

使用方法可从cmd到进入yuicompressor.jar所在磁盘,我以自己的yuicompressor-2.4.2.jar为例:

1.压缩JS

  java -jar yuicompressor-2.4.2.jar api.js > api.min.js

2.压缩CSS

  java -jar yuicompressor-2.4.2.jar style.css > style.min.css

当然,还有另一种更傻瓜式的使用方式,赶兴趣的朋友自己可去多尝试下。

 

9.  压缩图片和使用图片Sprite技术  

  基本原理:

  注:其实压缩图片和图片精灵是两个方面的技术,可是既然都是关于图片的优化还是放到一块吧。

现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:

1.缩小图片分辨率;

2.改变图片格式;

3.降低图片保存质量。

关于图片精灵(Sprite)技术就和我们工作直接相关,不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求,前端优化的第一条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Sprite)。图片精灵就是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

至于图片精灵的操作细节就不多做介绍了,网上相关内容很多。

 

10.  注意控制Cookie大小和污染  

基本原理和使用方法:

  有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》

因为Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie,所以建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响;

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

 

 

background-position 用法详细介绍

shanhubei阅读(897)

语法: 
background-position : length || length 
background-position : position || position 
取值: 
length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  
position  : top | center | bottom | left | center | right 

说明: 
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition。

注: 本文中使用的图片大小为 300px*120px,为了能很清晰的表达图形的哪部分被隐藏了,按照图片的大小平均分成了9等份。同时背景图片容器区域绘制出绿色边框清晰显示容器的范围。
1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如:

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
}

效果如下图1:

 


                                        图 1

2、该属性定位不受对象的补丁属性( padding )设置影响。

例如,我们给容器元素增加padding值,背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
padding:50px;
}

效果如图2:

 

                                                   图 2

3、background-position:-70px -40px;

图片以容器左上角为参考向左偏移70px,向上偏移 40px,示例:

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
border:5px solid green;
}

效果如图3:

 

                                  图 3

4、background-position:70px 40px;

图片以容器左上角为参考向右偏移70px,向下偏移 40px,示例:

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
border:5px solid green;
}

效果如图4:

 

                                   图 4

5、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

例如: .container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
border:5px solid green;
}

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如图5:

 

                                     图 5

由于超出部分别往两端延伸,所以我们可以先制作一张宽度足够宽图片设置水平值为50%,这样可以用来适应不同的浏览器,使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。

6、background-position:-50% -50%;

等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
border:5px solid green;
}

效果如图6:

 

                                     图 6

7、background-position:100% 100%;

图片处于容器元素的右下角,与 background-position:right bottom;效果等同。

示例:

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
border:5px solid green;
}

效果如图7:

 

                                    图 7

 

超酷的固定菜单页面滚动效果

shanhubei阅读(1157)

此效果可以应用在一些内容比较长的单页设计,本文将介绍使用JjQuery和css来实现这一效果,demo中分别有菜单居左、居右及底部效果,点击demo看效果:

HTML

本例html来自本站文章:ScrollTo:平滑滚动到页面指定位置中的DEMO,我们在页面中的#main内放置一个主菜单ul.nav,并对应每个菜单项的内容区,我们会发现内容区的id对应菜单项的class,接下来你会发现它的作用。

<div id="main">   
      <ul class="nav"> 
           <li><a class="pro">产品展示</a></li> 
           <li><a class="news">新闻中心</a></li> 
           <li><a class="ser">服务支持</a></li> 
           <li><a class="con">联系我们</a></li> 
           <li><a class="job">人才招聘</a></li> 
    </ul> 
     <div id="pro" class="box"> 
        <h3>产品展示</h3> 
        ... 
     </div> 
     <div id="news" class="box"> 
        <h3>新闻中心</h3> 
        ... 
     </div> 
     <div id="ser" class="box"> 
        <h3>服务支持</h3> 
        ... 
     </div> 
     <div id="con" class="box"> 
        <h3>联系我们</h3> 
        ... 
     </div> 
     <div id="job" class="box"> 
        <h3>人才招聘</h3> 
        ... 
     </div> 
</div> 

CSS

使用CSS固定菜单,以及设置菜单样式,和内容区。

.nav{width:160pxposition:fixedmargin-left:-170pxtop:20%z-index:1999;  
background:#f0f0f0border: 1px solid #ccc;-webkit-border-radius: 6px; 
-moz-border-radius: 6px;border-radius: 6px;-webkit-box-shadow:  
0 5px 10px rgba(0000.2);-moz-box-shadow: 0 5px 10px rgba(0000.2); 
box-shadow: 0 5px 10px rgba(0000.2);} 
.nav li{height:36pxline-height:36pxborder-bottom:1px solid #d3d3d3;  
text-align:centercursor:pointer.nav li:last-child{border-bottom:none.nav li a{display:blockwidth:98%height:34px;font-size:16px;} 
.nav li a:hover{background:#f9f9f9text-decoration:none.nav li a.cur{background:#ffc.box{height:600pxmargin: 0 10px

上面的代码使用position:fixed将菜单位置固定在内容区的左侧。

jQuery

本例基于jQuery,所以老惯例,先载入jquery库,然后写代码:

$(function(){ 
    $(".nav li a").click(function() { 
        var el = $(this).attr('class'); 
         $('html, body').animate({ 
             scrollTop: $("#"+el).offset().top 
         }300); 
        //切换菜单样式 
        $(this).addClass("cur").parent().siblings().find("a").removeClass("cur"); 
     }); 
}); 

当单击菜单项时,使用jQuery自定义动画函数animate(),将页面对应的区域(id对应了菜单项的class),滚动到浏览器顶端,并且将菜单项的样式切换为当前选中状态。

如果你喜欢用不同的滚动效果,请参照本站文章:jQuery Easing 动画效果扩展。

其实到这里,已经实现了固定菜单,和点击菜单滚动到指定内容位置的效果,但是有一点,当我们不点击菜单,而是滚动页面时,页面到达了菜单项对应的位置,我们需要菜单项也做出对应的反应,将对应的菜单项设置为当前选中项,这样就可以告诉用户,您正在浏览的对应的是页面哪个节点的内容。

我们先获取内容区每个菜单对应的节点与页面顶部的偏移量,然后当页面滚动scroll时,获取页面滚动条的便宜距离scroH,然后将这两个值比较,设置对应的菜单项为选中状态。

$(function(){ 
    ... 
    var pro_top = $("#pro").offset().top; //距页顶偏移量 
    var news_top = $("#news").offset().top; 
    var ser_top = $("#ser").offset().top; 
    var con_top = $("#con").offset().top; 
    var job_top = $("#job").offset().top; 
 
    $(window).scroll(function(){//滚动页面 
        var scroH = $(this).scrollTop(); //滚动条位置 
        if(scroH>=job_top){ 
            set_cur(".job");//设置状态 
        }else if(scroH>=con_top){ 
            set_cur(".con"); 
        }else if(scroH>=ser_top){ 
            set_cur(".ser"); 
        }else if(scroH>=news_top){ 
            set_cur(".news"); 
        }else if(scroH>=pro_top){ 
            set_cur(".pro"); 
        } 
    }); 
    ... 
}); 

自定义函数set_cur()用于设置当前菜单状态:

function set_cur(n){ 
    if($(".nav a").hasClass("cur")){ 
        $(".nav a").removeClass("cur"); 
    } 
    $(".nav a"+n).addClass("cur"); 
} 

好了,现在滚动页面切换样式也实现了,但是还有一个问题,当浏览器窗口大小变化时,菜单位置也应该一起变化,浏览器窗口宽度大于内容区和主菜单宽度时,保持主菜单一直依靠在内容区左侧。

$(window).resize(function(){//窗口大小变化 
  navpos(); 
}); 
//根据宽度设置样式 
function navpos(){ 
    var offset = $("#main").offset().left; 
    var nav_w = $(".nav").outerWidth(); 
    var left = offset-nav_w; 
     
    if(left>10){ 
        $(".nav").css("margin-left","-170px"); 
    }else{ 
        $(".nav").css("margin-left",-(160+left)+"px"); 
    } 
} 

当然,我们也可以在页面加载完成时也调用navpos(),初始化菜单位置。

$(function(){ 
    navpos(); 
    ... 
}); 

最后,还剩一个问题,我们知道老掉牙的IE6不支持position:fixed,这样在ie6下菜单不会固定滚动。解决办法是有的,可以通过css或者javascript来处理兼容性的问题。

ScrollTo:平滑滚动到页面指定位置

shanhubei阅读(1129)

使用方法

1、准备jQuery库和scrollTo.js插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

2、HTML

<ul class="nav"> 
   <li><a href="#" class="nav_pro">产品展示</a></li> 
   <li><a href="#" class="nav_news">新闻中心</a></li> 
   <li><a href="#" class="nav_ser">服务支持</a></li> 
   <li><a href="#" class="nav_con">联系我们</a></li> 
   <li><a href="#" class="nav_job">人才招聘</a></li> 
</ul> 
<div id="pro" class="box"> 
   <h3>产品展示</h3> 
</div> 
<div id="news" class="box"> 
   <h3>新闻中心</h3> 
</div> 
<div id="ser" class="box"> 
   <h3>服务支持</h3> 
</div> 
<div id="con" class="box"> 
   <h3>联系我们</h3> 
</div> 
<div id="job" class="box"> 
   <h3>人才招聘</h3> 
</div> 

我们用一个页面展示导航和导航对应的每个模块。

3、CSS

.nav{width:500px;margin:20px auto;} 
.nav li{float:leftwidth:100pxheight:24pxline-height:24px.box{height:500px.box h3{height:32pxline-height:32pxpadding-left:20pxfont-size:14px#pro,#ser{background:url(img/bg.jpg)#news,#con{background:url(img/bg2.gif)

4、使用scrollTo.js插件

$(function(){ 
    $(".nav_pro").click(function(){ 
        $.scrollTo('#pro',500); 
    }); 
    $(".nav_news").click(function(){ 
        $.scrollTo('#news',800); 
    }); 
    $(".nav_ser").click(function(){ 
        $.scrollTo('#ser',1000); 
    }); 
    $(".nav_con").click(function(){ 
        $.scrollTo('#con',1200); 
    }); 
    $(".nav_job").click(function(){ 
        $.scrollTo('#job',1500); 
    }); 
}); 

当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等。

 ,具体可以参照官方网站的例子:http://demos.flesler.com/jquery/scrollTo/

iframe之局部刷新

shanhubei阅读(843)

<iframe src=”1.htm” name=”ifrmname”
id=”ifrmid”></iframe>

方案一:用iframe的name属性定位
<input type=”button” name=”Button” value=”Button” onclick=”document.frames(‘ifrmname’).location.reload()”>

<input type=”button” name=”Button” value=”Button” onclick=”document.all.ifrmname.document.location.reload()”>

方案二:用iframe的id属性定位
<input type=”button” name=”Button” value=”Button” onclick=”ifrmid.window.location.reload()”>

方案三:当iframe的src为其它网站地址(跨域操作时)
<input type=”button” name=”Button” value=”Button” onclick=”window.open(document.all.ifrmname.src,’ifrmname’,”)”>

方案四:通过和替换iframe的src来实现局部刷新
可以用document.getElementById(“iframname”).src=””来进行iframe得重定向;

示例代码如下:test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function partRefresh() {
            document.getElementById("iframe1Id").src = "a2.html"; // 方法一: 通过和替换iframe的src来实现局部刷新
        }
    </script>
    </head>
    <body>
        <table border="1" width="90%" align="center">
            <tr
                style="background: #F0F0E4"><td>方格1</td><td>方格2</td> <td>方格3</td>
            </tr>
            <tr>
                <td>
                    <iframe src="a1.html" id="iframe1Id" name="iframe1Name" width="100%"></iframe>
                </td>
                <td>
                    <iframe src="a2.html" id="iframe2Id" name="iframe2Name" width="100%"></iframe>
                </td>
                <td>
                    <iframe src="a3.html" id="iframe3Id" name="iframe3Name" width="100%"></iframe>
                </td>
            </tr>
        </table>
        <br>
        <br>
        <input type="button" value="IFRAME局部刷新" style="margin-left: 70px;" onclick="partRefresh();">
    </body>
</html>

css3实现一个div设置多张背景图片及background-image属性

shanhubei阅读(1117)

引子

以前做网页布局的时候,一个div只能设置一张背景图片,设置多个背景的话,要用多个div嵌套才能实现,这样兼容性比较好。若您的网站要求兼容浏览器低版本,建议用这种方法。css3的出现,解决了一个div只能设置一个背景的问题,使一个div可以设置多个背景图片。background-image还可以设置线性渐变,等效果。

题外话

关于css3的background,功能很强大,有很多属性,像background-size等等,这些属性都可以写一篇博客来讲述。关于css3background的其他属性,后面会出博客来单独讲述!

CSS3/CSS1 background-image 属性

语法:

background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | 
<repeating-radial-gradient>

默认值:none

取值:

none:无背景图。

< url >:使用绝对或相对地址指定背景图像。

< linear-gradient>:使用线性渐变创建背景图像。(CSS3)

< radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)

< repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)

< repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)

说明:

设置或检索对象的背景图像。

如果设置了background-image,同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。

 

兼容性:

enter image description here

IE8及更早浏览器不支持CSS3 background-image,即不支持多背景和使用渐变作为背景图像。

IE9不支持CSS3新增参数值:< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作为背景图像。

Opera11.50-11.51不支持CSS3新增参数值:< radial-gradient > |< repeating-radial-gradient >作为背景图像。

写法:

css3设置多张背景图片

css3设置多张背景图片,可以如下写:

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
                     url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
                     url("haorooms.jpg") 400px 201px no-repeat;

也可以这么写:

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;  

css3背景渐变

标准写法

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面这种CSS语法我们经常见到,可能有人看不懂具体的意思,其实上面的些符号含义与正则表达式有很多一致之处:

[]在正则中表示一个字符类,这里,你可以理解为一个小单元。

|表示候选。也就是“或者”的意思,要么前面的,要么就后面的。

?为量词,表示0个或1个,言外之意就是,你可以不指定方向,直接渐变色走起。例如:

background:linear-gradient(red, yellow);

就是从上往下的红黄条纹效果。

+也是量词,表示1个或者更多个。因此,终止颜色是不可缺少的。例如:linear-gradient(red)是酱油命,白板。

<>中的是关键字,主要是让开发人员知道这里应该放些什么内容。

水平渐变

{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果如下图:

enter image description here
左上角渐变

那从(100px, 100px)到(200px, 200px)应该就是从左上角开始,写法如下:

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果如下

enter image description here
渐变方向写法组合:

left, right, top, bottom, left top, left bottom, right top, right, bottom

分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,从……(都懂的,不全写了)

当然,也可以用angle角度来写!

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}

具体的样式大家可以尝试着写一下,看一下!很多情况下,用了才知道!

注意:有不少效果加了-webkit前缀以及-moz前缀会展现的不一样!

例如:

background-image:-webkit-linear-gradient(-45deg, red, yellow)

background-image:linear-gradient(-45deg, red, yellow)

在Chrome浏览器下的渐变方向居然是相反的!但是45deg是正常的。Firefox浏览器下也是如此,有前缀和没有前缀方向相反!咋回事?

原因很简单,CSS3目前还是草案阶段!

从浏览器去掉前缀前后的变化可以推测,之前,W3C的渐变坐标是与photoshop中一致的,但是,后来,由于某些原因,修改了。

至于什么原因,根据我草草的查找,可能与下面几个关键字之一有联系:animation/transition动画、write-mode书写方向、flex box模型、以及radial-gradient渐变等。在这里就不深入研究了!

前缀兼容

基本的写法如下:

  background-image: linear-gradient(top, #fff, #dededc);

但是为了兼容,有时候要写多个前缀,变成如下:

 background-image: -ms-linear-gradient(top, #fff, #dededc);
    background-image: -moz-linear-gradient(top, #fff, #dededc);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc));
    background-image: -webkit-linear-gradient(top, #fff, #dededc);
    background-image: -o-linear-gradient(top, #fff, #dededc);
    background-image: linear-gradient(top, #fff, #dededc);

关于”css3实现一个div设置多张背景图片及background-image属性“今天就写到这里,有问题可以相互交流,加油!

使用Animate.css制作超炫的CSS3动画

shanhubei阅读(998)

Animate.css是一个超强的CSS3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动画变得非常简单。

如何使用

首先引入animate css文件。

<link rel="stylesheet" href="animate.min.css"> 

然后给指定的元素加上指定的动画class样式名。

<div class="animated bounceOutLeft"></div> 

这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式。第二个是指定的动画样式名,也就是想要什么动画效果,指定对应的动画样式名称就可以。如果想让动画循环则可以加入样式:infinite 。

Animate.css提供了以下多种动画效果可以直接作为class样式添加使用,就像文章:jQuery Easing 动画效果扩展提到的easing动画一样。

bounce ,flash ,pulse ,rubberBand ,shake ,swing ,tada ,wobble ,jello ,bounceIn ,bounceInDown ,bounceInLeft ,bounceInRight ,bounceInUp ,bounceOut ,bounceOutDown ,bounceOutLeft ,bounceOutRight ,bounceOutUp ,fadeIn ,fadeInDown ,fadeInDownBig ,fadeInLeft ,fadeInLeftBig ,fadeInRight ,fadeInRightBig ,fadeInUp ,fadeInUpBig ,fadeOut ,fadeOutDown ,fadeOutDownBig ,fadeOutLeft ,fadeOutLeftBig ,fadeOutRight ,fadeOutRightBig ,fadeOutUp ,fadeOutUpBig ,flipInX ,flipInY ,flipOutX ,flipOutY ,lightSpeedIn ,lightSpeedOut ,rotateIn ,rotateInDownLeft ,rotateInDownRight ,rotateInUpLeft ,rotateInUpRight ,rotateOut ,rotateOutDownLeft ,rotateOutDownRight ,rotateOutUpLeft ,rotateOutUpRight ,hinge ,rollIn ,rollOut ,zoomIn ,zoomInDown ,zoomInLeft ,zoomInRight ,zoomInUp ,zoomOut ,zoomOutDown ,zoomOutLeft ,zoomOutRight ,zoomOutUp ,slideInDown ,slideInLeft ,slideInRight ,slideInUp ,slideOutDown ,slideOutLeft ,slideOutRight ,slideOutUp

如果说想给某个元素动态添加动画样式,可以结合jquery来实现:

$('#yourElement').addClass('animated bounceOutLeft'); 

当动画效果执行完成后还可以通过以下代码添加事件:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
animationend', doSomething); 

css3的max-width和max-device-width的区别

shanhubei阅读(977)

最近帮人 弄的godaddy的自定义建站达人页面,简单的单页面。只是加上两个网站的超链接上去。用pc的手机调试器调试的时候  遇到这个css3两个媒体功能  max-width和max-device-width  弄混淆导致要得效果总不出现

max-width指展示的最大宽度,一般是浏览器窗口宽度。
max-device-width是指所展示使用的设备支持宽度,如一般电脑分辨率1280px,手机设备支持展示宽度(安卓有种宽度如360 ,480)等.

附录: media查询

http://www.runoob.com/cssref/css3-pr-mediaquery.html

自动悬浮于顶部的固定菜单 — 可以实现新浪微博顶部导航菜单一样的效果

shanhubei阅读(2165)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>顶部固定菜单</title>
<style type="text/css">
*{ margin:0; padding:0;}
.nav-wrapper-fixed{ position:fixed; top:0; width:100%;}
.nav-wrapper-fixed .nav{width:960px; margin:0 auto;}
.nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
.nav-wrapper{ margin-top:100px; width:100%;}
.nav-wrapper .nav{width:960px; margin:0 auto;}
.nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
</style>
<script type="text/javascript">
window.onload=function(){
    var nav=document.getElementById('nav');
    var navFixed=document.getElementById('navFixed');
    window.onscroll=function(){
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        document.title=scrollTop
        if(scrollTop>nav.offsetTop){
            navFixed.style.display='block';
        }else if(scrollTop<nav.offsetTop){
            navFixed.style.display='none';
        }
    }
};
</script>
</head>
<body style="height:2000px;">
<div class="nav-wrapper">
    <div class="nav" id="nav">
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
        </ul>
    </div>
</div>
<div class="nav-wrapper-fixed" id="navFixed" style="display:none;">
    <div class="nav" id="nav">
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li>菜单四</li>
            <li>菜单五</li>
        </ul>
    </div>
</div>
</body>
</html>