当前的文章分类为: 前端开发

Css Sprites 图片动画(Animation)

17

January

2013

以前总是看到些利用css sprites来制作各种各样的人物动画效果,突然上午一时兴起,于是乎也就自己动手做了个玩玩。

要说最早看到这个效果,应该是在Google(当时为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham),Google涂鸦出现了一个舞蹈的动画,引得一时轰动。)不过那时还是利用js,制作人员把图片的位置都计算好,然后封装到js,用js把动画效果模拟出来。

随着现在css3的逐渐强大,我们直接利用css3的animate和keyframes属性就能完成(有Flash基础的会很容易理解)。 [ 查看全文... ]

jQuery左侧浮动折叠菜单 仿天猫(固定浮动、智能定位、CSS3折叠)

14

January

2013

以前做设计的那段时间,常常为了一个专题页面的制作,上各种网站寻找灵感,淘宝就是其中之一。由于现在“从良”了,对设计这方面关心的就比以前要少了,更多的精力便是放在页面结构和用户体验上。

前两天上淘宝时,发现其首页的菜单还不错(貌似很早就有了,不过我是才看到,刚从火星回来...),于是就自己也动手制作了一个。

CSS方面属于参考天猫,jquery则完全是自己摸爬滚打。折叠的效果运用了CSS3,对于不识别的CSS3的浏览器,就单纯的隐藏了,没有做过渡效果。

其中,不得不说,自己做的过程中又学习到了蛮多的东西,特别是CSS方面,有些属性虽然不起眼,感觉没有必要,但起到了关键的作用。

主要功能:1.固定浮动、2.智能定位、3.CSS3折叠 [ 查看全文... ]

jQuery鼠标右键版权提示+灯箱效果

04

January

2013

国外的很多摄影或图片网站,为了防止别人随意保存图片,想出了很多办法。其中,最简单的要数把图片的url放到元素的背景中去,这样一来普通用户就无法右键另存为,实现和操作起来也简便。

有时候,鼠标右键所出现的内容,往往不是我们所想要的内容,更多的是浏览器为我们所设想的东西。所以,有些网站就是屏蔽了右键菜单。这样一来用户就找不到另存按钮,同时也无法简单的右键查看源码,但大大损失了鼠标右键的功能。所以,QQ邮箱和WEB QQ很早就做到了一点,那就是通过JS和CSS模拟出一个右键菜单,来帮助用户操作和引导用户去操作。

今天所说的内容,也可以说是在此基础上的一个衍化。

代码分为了3个部分,分别写成了插件形式方便调用:
1.屏蔽右键
2.右键出现版权提示信息(也可以是菜单)
3.灯箱效果(乍看有点陌生,但经常上视频网站的人肯定很熟悉,就是通常所说的开灯和关灯效果) [ 查看全文... ]

(对路)一个有趣的jQuery特效

24

December

2012

这是我从一个冷笑话网站(dui.lu)上看到的一个jQuery特效,觉得蛮有意思的,所以就发出来给大家“误乐误乐”。并且其中还使用到了CSS3的属性(transform:scaleX():指定对象X轴的(水平方向)缩放)。

当你打开页面以后,你会发现有各种“蛋疼”+“神经质”的人物在屏幕上灰来灰去,此时把你拿鼠标点上去,那些“人物”就会改变运动轨迹和运动方向。 [ 查看全文... ]

jQuery 图片跟随鼠标浮动

20

December

2012

不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着。

本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动。为了方便查看和理解,在Demo的左下角把各个参数都打印了出来。

CSS CODE:

<style type="text/css">
*{ margin:0; padding:0;}
body{ font-family:Arial; font-size:12px; background:url(bg.png) no-repeat; background-position:center center; background-attachment:fixed;}
input{ width:100px;}
span{ display:inline-block; width:120px;}
#window{ color:white; position:absolute; bottom:10px; left:10px;}
#coordinate{ color:white; position:absolute; bottom:35px; left:10px;}
#location{ color:white; position:absolute; bottom:60px; left:10px;}
#float_bg{ width:2496px; height:1060px; background:url(float_bg.png) no-repeat; position:fixed;}
</style>

[ 查看全文... ]

jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

18

December

2012

现在常常能看到一些网站(如:新浪微博和花瓣)导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式,能便于用户点击和“曝光率”,不用每次都要把网页拖动到某个特定位置才能点击或看到。

其实这样的布局方式很早就有,只是没有那么个契机推广开吧。做起来也不复杂,只要设置一个小小的属性“position:fixed”便能完成,最关键的无不呼在于要兼容IE6而已。

首先我们来看HTML代码,是不是超简单?这里提供的只是一个简单的框架,实际应用的时候,只要把想要的元素添加东西就在这区域内加就行。

HTML CODE:

<div id="header">Default header. No absolute and fixed.</div>
<div id="topToolbar">Fixed at the top of the Toolbar.</div>
<div id="content">
	<p>此处省略1000字...</p>
</div>
<div id="bottomToolbar">Fixed at the bottom of the Toolbar. By Bluesdream.com</div>

[ 查看全文... ]