天道酬勤,学无止境

responsive-slides

我的响应式幻灯片只显示第一张图片(My responsive slideshow only shows the first image)

问题 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="scripts/responsiveslides.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".rslides").responsiveSlides({ speed: 1000, maxwidth:1060 }); </script> <div class="container"> <ul class="rslides"> <li><img src="graphics/img1.png" alt=""></li> <li><img src="images/img2.png" alt=""></li> <li><img src="images/img3.png" alt=""></li> </ul> </div> .rslides { position:relative; list-style:none; overflow:hidden; width:100%; padding:0; margin:0; } .rslides li { -moz-border

2021-11-11 15:25:27    分类:技术分享    jquery   css   slideshow   responsive-slides

My responsive slideshow only shows the first image

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="scripts/responsiveslides.min.js" type="text/javascript"></script> <script type="text/javascript"> $(".rslides").responsiveSlides({ speed: 1000, maxwidth:1060 }); </script> <div class="container"> <ul class="rslides"> <li><img src="graphics/img1.png" alt=""></li> <li><img src="images/img2.png" alt=""></li> <li><img src="images/img3.png" alt=""></li> </ul> </div> .rslides { position:relative; list-style:none; overflow:hidden; width:100%; padding:0; margin:0; } .rslides li { -moz-border-backface

2021-11-10 22:31:08    分类:问答    jquery   css   slideshow   responsive-slides

正确调整全宽的窗口大小和对于响应式网站(Proper window resizing of full width <ul> and <li> for responsive website)

问题 我在调整窗口大小时遇到​​了这个网站的问题:http://goo.gl/BaIuy 让我试着解释一下。 正如你所看到的,我正在努力实现在鱼缸中的体验。 它由 4 个不同的容器制成,一个用于水背景,一个用于内容,另一个用于鱼图像,最后一个用于浮木和海藻等图形对象。 除了用于水背景的容器外,每个容器都有一个比窗口大小宽 600% 的主<ul id="mask"> 。 这个ul#mask包含六个<li>元素,它们对应于网站的每个部分,每个部分的宽度为窗口大小的 100%。 <ul id="mask"> <li id="home" class="box"></li> <li id="about" class="box"></li> <li id="services" class="box"></li> <li id="clients" class="box"></li> <li id="give" class="box"></li> <li id="contact" class="box"></div></li> </ul> #mask { float: left; padding: 0; width: 600%; } #mask > li { float: left; list-style: none; width: 16.66666666%; } 问题是

2021-10-14 14:26:47    分类:技术分享    javascript   resize   responsive-design   window-resize   responsive-slides

Proper window resizing of full width <ul> and <li> for responsive website

I have an issue with this website when resizing the window: http://goo.gl/BaIuy Let me try to explain. I'm trying to achieve the experience of being in a fishbowl as you can see. It's made with 4 different containers, one for the water background, one for the content, another for the fish images and the last one for the graphic objects like the driftwood and seaweed. Each container, except the one for the water background, have a main <ul id="mask"> that is 600% wider than the window size. This ul#mask contains six <li> elements that correspond to each one of the sections of the website and

2021-10-14 12:07:44    分类:问答    javascript   resize   responsive-design   window-resize   responsive-slides

Codrops MULTI-LEVEL PUSH MENU的重复javascript(Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU)

问题 对 javascript 来说有点新手。 我的问题是关于 codrops 的推送菜单脚本,可以在这里找到:http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/ 我正在尝试由 2 个不同的链接/触发器触发 2 个不同的导航。 我复制了脚本如下: new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), { type : ‘cover’ } ); new mlPushMenu( document.getElementById( ‘mp-menu2′ ), document.getElementById( ‘trigger2′ ), { type : ‘cover’ } ); 我复制了导航并将 ID 更改为具有 ID 为 mp-mennu2 的导航和带有 if trigger2 的触发器。 但只有第二个触发器起作用。 如果我点击第一个触发器,它会打开 mp-menu2。 有没有人知道如何获得该结果。 这是html <div class="container"> <!-- Push Wrapper --> <div class="mp-pusher" id="mp-pusher"> <!--

2021-09-12 21:54:18    分类:技术分享    javascript   drop-down-menu   responsive-design   responsive-slides

Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU

A bit of a newbie when it comes to javascript. My question is regarding a push-menu script from codrops that can be find here: http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/ I am trying to have 2 different nav triggered by 2 different link/triggers. I duplicated the script as follow: new mlPushMenu( document.getElementById( ‘mp-menu’ ), document.getElementById( ‘trigger’ ), { type : ‘cover’ } ); new mlPushMenu( document.getElementById( ‘mp-menu2′ ), document.getElementById( ‘trigger2′ ), { type : ‘cover’ } ); and i duplicated the nav and changed the id to have a nav with id mp

2021-09-05 03:15:51    分类:问答    javascript   drop-down-menu   responsive-design   responsive-slides

以编程方式触发 ResponsiveSlides.js(Trigger ResponsiveSlides.js programmatically)

问题 我正在使用 ResponsiveSlides.js 并且我正在尝试以编程方式更改幻灯片。 我试过两种方法,都没有奏效。 从缩略图上的单击事件调用插件的slideTo函数,传递它应该转到的幻灯片的索引。 在<li>上使用.trigger("click")对应它应该转到的幻灯片的索引,例如: $(".rslides_tabs li").eq($theIndex).trigger("click"); 回答1 您不能调用slideTo()函数,因为它仅分配给插件方法中的局部变量。 您的第二次尝试已接近尾声,但看起来单击处理程序已绑定到<a>元素。 尝试: $('.rslides_tabs').find('a').eq(index).trigger('click'); 其中index是您要显示的幻灯片的从零开始的索引。 注意:如果您为“命名空间”选项传递了一个值,那么您必须将类名从“rslides_tabs”更改为您传递的任何值+“_tabs”。 因此,如果您通过( namespace: 'mynamespace' }选项,该类将是“mynamespace_tabs”。

2021-07-11 12:45:13    分类:技术分享    jquery   triggers   responsive-slides

Trigger ResponsiveSlides.js programmatically

I'm using ResponsiveSlides.js and I am trying to change slides programmatically. I've tried it two ways, and neither have worked. Calling the plugin's slideTo function from a click event on the thumbnail, passing the index of the slide it should go to. Use .trigger("click") on the <li> corresponding to the index of the slide it should go to, ex: $(".rslides_tabs li").eq($theIndex).trigger("click");

2021-06-26 11:12:01    分类:问答    jquery   triggers   responsive-slides