javascript - 背景图片滑动效果

标签 javascript jquery html css

我正在做一个具有背景图片幻灯片效果的导航,我正在尝试模仿网站的设计:http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/

但是,由于我打算为尺寸为 480*800 的手机做效果,所以我需要更改元素的尺寸,这似乎是一个问题,因为我想完全按照网站设计的方式做,但是还是有区别的。我已经输入了http://jsfiddle.net/u4mLdojo/

主要问题是 sub1、sub2 和 sub3,除非单击它们,否则它们应该是不可见的,但我不知道为什么它们会留在页面上。

<ul class="sub1" style="background-position:0 0;">
<ul class="sub2" style="background-position:-100px 0;">
<ul class="sub3" style="background-position:-100px 0;">

最佳答案

他们使用这个库:https://github.com/nelsonwellswku/jquery.bgpos/

这是一个漂亮的 jsbin Playground 中的所有代码:

http://jsbin.com/duresilutu/2/edit?output

关于javascript - 背景图片滑动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27694080/

相关文章:

javascript - 追加行添加自动完成 jQuery

javascript - 存储在全局变量中

jquery - 有没有办法检查函数当前是否正在 jQuery 中运行?

c# - 如何使用 ajax 将嵌套的 json 对象发送到 mvc Controller

html - 可靠地改变 flex 盒子的布局方向

python - 当我使用 TinyMCE 编辑器时,Django 如何处理转义?

javascript - 将显示从 'block' onclick 更改为 'none' 的功能不起作用

jquery - 为轮播横幅添加视差效果,使图像和文本以不同的速度移动

html - 将 block 元素放入链接标签中 IE 8, IE 9

javascript - HTML 表单在 IE 中不起作用