IE6-IE8 media兼容问题

Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-IE8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

使用场景:
Bootstrap里面就引入了这个JS文件,从名字看出来是自适应的兼容。打开IE看了一下,效果挺好的,自适应的效果挺好的。Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

使用方式
官方demo地址:http://scottjehl.github.com/Respond/test/test.html
1.在css中正常用 min/max-width media queries

@media screen and (min-width: 480px){
…styles for 480px and up go here
}

2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)

引入方式:

基于jQuery的图片缩放效果插件

基于jQuery的图片缩放效果插,这里给大家推荐一些比较流行效果炫酷的图片缩放等开源代码。

基于jQuery的图片缩放效果插,这里给大家推荐一些比较流行效果炫酷的图片缩放等开源代码。

1. Zoomer Gallery

该插件可以将你的图片列表转换成漂亮的画廊,这个画廊带有像Flash一样缩放图片的效果。Zoomer Gallery 插件令你的界面看起来简单美观。它的大小为2KB,使用起来非常方便。

2. Jcrop

使用Jcrop可以轻松为Web应用程序添加截图功能,Jcrop结合了轻便的jQuery插件和强大的跨平台DHTML裁剪工具。

3. jQuery gzoom 插件

该插件是一个很好用的图像缩放插件,有很多缩放功能的实现方式:点击“+”“-”按钮、拖动滑块、滚动鼠标滚轮、鼠标悬停改变镜头、点击图片即在灯箱模式下显示,等等。

4. 悬停缩放

该插件可用于创建悬停缩放效果,将鼠标停在图片上时,图片缩放的同时会显示标签。这是一个非常时尚的效果,令缩略图更加精美。

5. 使用jQuery创建一个图像放大和裁剪效果

这个视频教程是关于怎样创建一个图片缩放效果的。在图中选择一个区域,则会自动按比例将选中部分放大显示。

6. AnythingZoomer jQuery 插件

这是一个很棒的插件,适用于小范围查看图片。当你的鼠标停在图片上方时,会弹出一个框呈现放大后的图像。

7. JQZoom

这是一个JavaScript图片放大镜,基于jQuery/JavaScript,这个简单的脚本可以让你放大任何想查看内容。

8. jQuery Cycle插件

该插件支持许多不同的切换效果,比如鼠标悬停暂停、自动停止、自动调整、开始和结束事件调用、点击触发等等,简单又神奇!

9. Crop、labelOver和pluck插件

通过Crop插件,可以让网站访问者进行自定义截图,另外两个插件labelOver和pluck也支持这项功能。

10. ImgAreaSelect

这个jQuery插件可以让你在图片上选择一个矩形区域。

11. PHP & jQuery 图像上传与裁剪插件

该插件允许用户上传和截取你网站上的图片。

12. PANVIEW

该插件能让用户查看大图的细节部分,还可用鼠标移动图片。

13. Image Zoom 2.0

该插件允许将链接指向图片,点击链接或图片时,图片会放大成为目标图片,点击该图片的任意地方或关闭按钮即可恢复图片。

14. jQuery拍照效果插件

该插件可以实现模拟拍照的效果。使用取景器选择需要拍照的图片区域并点击,即可在下方显示此“照片”。

15. jQuery iviewer

该插件可用于加载和查看容器中的图片,还可对图片进行缩放以及用鼠标拖动。

16. 平滑缩放插件

该插件创建的缩放效果就像Mac电脑中的效果一样平滑,也有些类似于Safari的网页缩放效果。

英文原文:http://smashinghub.com/16-best-image-zoom-effects-with-jquery-plugins.htm

炫酷的HTML5动画应用

HTML5目前已经逐渐成熟,越来越多的Web项目都已经用到了HTML5技术,包括CSS3。本文主要分享了一些最新的HTML5动画应用,大部分都比较炫酷,也有一些比较实用的,并且每一个动画都提供源代码下载。

看到几个比较好看有用的html5 css动画效果,收藏希望对大家有用

HTML5目前已经逐渐成熟,越来越多的Web项目都已经用到了HTML5技术,包括CSS3。本文主要分享了一些最新的HTML5动画应用,大部分都比较炫酷,也有一些比较实用的,并且每一个动画都提供源代码下载。

1、HTML5 Canvas实现画板涂鸦动画应用

这是一款HTML5网络画板,拥有基础的图形绘制功能,相对比较简单,基于canvas,因此非常灵活。

1

2、HTML5堆木头游戏

这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

1

3、HTML5 3D立方体图片切换动画

这款HTML5动画可以将图片切分成几个立方体,带有3D的立体效果。

1

4、100多个纯CSS3动画图标

这里总共有100多个纯CSS3实现的动画图标,找找看,总有一个适合你。

20150107101848414

5、HTML5/CSS3动画相册

这款HTML5相册的特点是我们可以将照片随意放置在桌面上,图片可以任意倾斜,看上去很自然。

1

6、HTML5 Canvas模拟衣服撕扯动画

该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。

20150107101850973

7、jQuery/CSS3带Tooltip的滑杆动画

这是一个带有Tooltip提示框的滑杆,基于jQuery和CSS3,外观样式非常不错。

1

8、5个可爱的CSS3 Loading加载动画

这是一款可爱的CSS3 Loading动画,一共有5种动画类型,每组Loading动画都非常有创意。

1

JS实现PHP base64encode加密

JS实现PHP base64encode的JS加密,PHP使用base64decode的解密即可

JS加密 JS实现base64encode加密

function base64encode(str){

var out,i,len,base64EncodeChars=”ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”;
var c1,c2,c3;
len=str.length;
i=0;
out=””;
while(i<len){ c1=str.charCodeAt(i++)&0xff; if(i==len){ out+=base64EncodeChars.charAt(c1>>2);
out+=base64EncodeChars.charAt((c1&0x3)<<4); out+=”==”; break; } c2=str.charCodeAt(i++); if(i==len){ out+=base64EncodeChars.charAt(c1>>2);
out+=base64EncodeChars.charAt(((c1&0x3)<<4)|((c2&0xF0)>>4));
out+=base64EncodeChars.charAt((c2&0xF)<<2); out+=”=”; break; } c3=str.charCodeAt(i++); out+=base64EncodeChars.charAt(c1>>2);
out+=base64EncodeChars.charAt(((c1&0x3)<<4)|((c2&0xF0)>>4));
out+=base64EncodeChars.charAt(((c2&0xF)<<2)|((c3&0xC0)>>6));
out+=base64EncodeChars.charAt(c3&0x3F);
}

return out;
}

用CSS3创建漂亮按纽的30个教程

用CSS3创建漂亮按纽的30个教程

Glossy Buttons With CSS3 Gradient

Demo || Tutorial

用CSS3创建按纽的30个教程

Create 3D Social Media Buttons with CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

Crafting Minimal Circular 3D Buttons with CSS

Demo || Tutorial

用CSS3创建按纽的30个教程

How to Create Fancy Animated Buttons in CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

Creating a 3D Button in CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 and jQuery Slide Out Button

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Animated Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Fanciness Button Switches with Checkboxes

Demo || Tutorial

用CSS3创建按纽的30个教程

Colored Buttons in CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

Glass Edge with CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Pure Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程Amazing Play CSS3 Button

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 BonBon Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Push it CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

3D Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Cross Browser Pure CSS3 Button

Demo || Tutorial

用CSS3创建按纽的30个教程

3D Chunky CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Pure CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Dynamic Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Pratical CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Beautiful Animated CSS3 Push Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Download Green 3D Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Metal Electric CSS3 Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Pure CSS Push Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Beautiful Pure CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Starbursts

Demo || Tutorial

用CSS3创建按纽的30个教程

Fantastic Animated Buttons using CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Google-styled buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Create GitHub-style CSS3 buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Animated Bubble Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

来源:OPEN资讯

纯CSS3的导航菜单生成工具和教程

CSS3 的引入为web设计人员和开发人员带来了巨大的的可能性。通过3D变换,CSS3动画和先进的造型支持,可以建立一个无需 JavaScript 的导航菜单,但通过微妙的动画和样式在视觉仍然令人印象深刻。

CSS3 的引入为web设计人员和开发人员带来了巨大的的可能性。通过3D变换,CSS3动画和先进的造型支持,可以建立一个无需 JavaScript 的导航菜单,但通过微妙的动画和样式在视觉仍然令人印象深刻。

本文介绍一些纯 CSS3 的导航菜单生成工具和教程:

CSS3 Menu Generators

Pure CSS Menu

\

CSS3 Menu

\

CSS Menu Maker

\

CSS3 Menu Generator

\

Recent Tutorials

Create a stunning Menu in CSS3

\

How to create a pure CSS dropdown Menu

\

CSS3 Dropdown Menu by DesignModo

\

CSS3 DropDown Menu by Red Team Design

\

Pure CSS3 LavaLamp Menu

\

Apple Menu with CSS3

\

Dark Menu Pure CSS3 Menu

\

 转自php100
纯css样式实现要比JS好的多,至少不用去掉JS速度将是很大提高。喜欢就顶一下

css 自定义背景图片大小

background : background-color || background-image || background-repeat || background-attachment || background-position 

这是查css手册插出来的结果
background只能定义,背景颜色/图片/是否重复/是否滚动/图片位置

但是如果我们想定义这个背景中背景图片的大小要怎样定义呢?

比如说,同一个背景图片,我可能再两个地方调用
一个地方我需要这个图片大一些,一个地方我需要这个图片小一些

经过苦苦查询……
就目前来看,只能如你所说,需要不同尺寸的图片也只能多准备不同的图片了。
没有办法,除了把背景图片插入在结构代码里使用。随后把img定义成块,
然后再CSS控制尺寸。不过相应的麻烦又来了,只能采用定位或浮动布局了。