chrome浏览器滑动特效(div跟着浏览器大小变化)

作者:林炜贤来源:www.163css.com发表时间:(2013-01-23)

如果你的电脑里安装了chrome浏览器,请打开,打开的时候,你会看到这样一个界面:

这是我们要实现的功能,其实,就是一个鼠标点击,下面的图标跟着切换,但有意思的是,如果你把浏览器缩小,你会发现,图片也跟着缩小,而且,滚动也是OK的。那么,这个效果,我们如何实现?

在我的代码里,我是通过百分比来实现缩放这个功能的,之前我采用获取document的大小,结果,缩小后得刷新,页面才正常,加上resize,结果出现点击按钮,两次滑动,用户体验相当不好。

我定义了w=100%,接着计算li个数,然后得出roll_ul的宽度,然后再计算li的百分比宽度,这样,浏览器一缩小,就跟着变了。。。

至于点击事件,大家可以看代码,我在这里提一点:

这里有一个变量t=0(变量命名不规范,大家自己修改啊,不要像我一样),点击一次,t就加一次,当t等于最后一个时,就让按钮消失,这里,大家可以看下之前做的一个例子:“新浪微博应用切换特效”,写法有点类似,只不过,我当时是用css(left)来判断的。。。

效果截图如上chrome这个例子,挺不错的。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2013/01/chrome/index.html

下载地址:chrome浏览器滑动特效(div跟着浏览器大小变化).rar

返回作者主页:www.163css.com阅读 (8303)
更多 1