Fatal编程技术网
  • javascript/
  • Javascript 尾码滑块问题-适用于Firefox，而不是Chrome/Safari

Javascript 尾码滑块问题-适用于Firefox，而不是Chrome/Safari

javascript jquery firefox google-chrome

Javascript 尾码滑块问题-适用于Firefox，而不是Chrome/Safari,javascript,jquery,firefox,google-chrome,Javascript,Jquery,Firefox,Google Chrome,我正在构建一个使用了几个不同javascript元素的页面，我似乎遇到了一个以前没有遇到过的问题（这并不奇怪，因为我是javascript新手） 我已经实现了JQuery Coda滑块的教程，位于以下位置： 当我运行Firefox而不是Chrome或Safari时，滑动效果似乎是有效的。想知道这是否是一个常见的问题，我是否遗漏了一些明显的东西 为了帮助您，我附上了我正在处理的页面的代码，因为它可能会帮助您理解我正在使用的脚本 <head> <title></

我正在构建一个使用了几个不同javascript元素的页面，我似乎遇到了一个以前没有遇到过的问题（这并不奇怪，因为我是javascript新手）

我已经实现了JQuery Coda滑块的教程，位于以下位置：

当我运行Firefox而不是Chrome或Safari时，滑动效果似乎是有效的。想知道这是否是一个常见的问题，我是否遗漏了一些明显的东西

为了帮助您，我附上了我正在处理的页面的代码，因为它可能会帮助您理解我正在使用的脚本

<head>
    <title></title>

    <link rel="stylesheet" href="stylesheets/style.css" media="screen" />

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
    <script src= "js/banner.js"type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
    <script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
    <script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
    <script src="js/slider.js" type="text/javascript"></script>

</head>
编辑：slider.js

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
  .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
  .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,

  navigation: '.navigation a',

  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',

  // allow the scroll effect to run both directions
  axis: 'xy',

  onAfter: trigger, // our final callback

  offset: offset,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

//当DOM就绪时。。。
$（文档）.ready（函数（）{
var$panels=$（“#slider.scrollContainer>div”）；
var$container=$（“#slider.scrollContainer”）；
//如果为false，我们将浮动所有面板并固定宽度
//货柜
var水平=真；
//如果我们水平移动，请将面板向左浮动
如果（水平）{
$panels.css({
‘float’：‘left’，
'position'：'relative'//IE修复以确保溢出被隐藏
});
//计算容器的新宽度（使其容纳所有面板）
$container.css（'width'，$panels[0].offsetWidth*$panels.length）；
}
//收集滚动对象，同时应用隐藏溢出
//删除将显示的默认滚动条
var$scroll=$（'#slider.scroll'）.css（'overflow'，'hidden'）；
//应用我们的左+右按钮
$scroll
.之前（“”）
.在（''）之后；
//操纵导航选择
函数selectNav（）{
$（本）
.父母（‘ul:第一’）
.find（'a'））
.removeClass（'选定'）
(完)
(完)
.addClass（“选定”）；
}
$（'#slider.navigation'）。查找（'a'）。单击（选择导航）；
//找到具有此目标的导航链接并选择导航
功能触发器（数据）{
var el=$（'#slider.navigation'）.find（'a[href$=“'+data.id+'”）.get（0）；
选择导航呼叫（el）；
}
if（window.location.hash）{
触发器（{id:window.location.hash.substr（1）}）；
}否则{
$（'ul.navigation a:first'）。单击（）；
}
//偏移量用于移动到*恰好*正确的位置，因为我使用
//填充在我的示例中，我需要减去填充的数量以
//偏移量。请尝试删除此项以了解效果
var offset=parseInt（（水平？
$container.css（'paddingTop'）：
$container.css（'paddingLeft'））
|| 0) * -1;
变量滚动选项={
target:$scroll，//具有溢出的元素
//可以是相对于目标的选择器
项目：$小组，
导航：'.导航a'，
//选择器与文档无关，即确保它们是唯一的
上一句：“img.left”，
下一个：“img.right”，
//允许滚动效果双向运行
轴：“xy”，
onAfter:trigger，//我们的最终回调
抵销：抵销，
//滑动效应的持续时间
持续时间：500，
//放松-可与放松插件一起使用：
// http://gsgd.co.uk/sandbox/jquery/easing/
放松：“摇摆”
};
//将serialScroll应用于滑块-我们选择此插件是因为它
//支持//索引的下一个和上一个滚动以及挂钩
//在我们的导航中。
$（“#滑块”）.serialScroll（滚动选项）；
//现在应用localScroll钩住任何其他任意链接以触发
//效果
$.localScroll（滚动选项）；
//最后，如果URL有散列，请将滑块移动到位置，
//将持续时间设置为1，因为我不希望它在
//第一页加载。我们并不总是需要这个，但它可以确保
//页面加载时，位置绝对准确。
scrollOptions.duration=1；
$.localScroll.hash（滚动选项）；
});
你为什么不直接复制“它减少了你所需要的”。记住你需要这些：

<script src="jquery-1.2.6.js" type="text/javascript"></script> 
<script src="jquery.scrollTo-1.3.3.js" type="text/javascript"></script> 
<script src="jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script> 
<script src="jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script> 
<script src="coda-slider.js" type="text/javascript" charset="utf-8"></script>
HTML应该是类似的（查看源代码以查找）。它在Chrome中工作得很好。

你为什么不直接复制“它减少了你需要的东西。”。记住你需要这些：

<script src="jquery-1.2.6.js" type="text/javascript"></script> 
<script src="jquery.scrollTo-1.3.3.js" type="text/javascript"></script> 
<script src="jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script> 
<script src="jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script> 
<script src="coda-slider.js" type="text/javascript" charset="utf-8"></script>
HTML应该是类似的（查看源代码以查找）。它在Chrome中工作得很好。

经过几个小时的搜索和调试，我找到了解决方案。jQuery与joomla的交互包括mootools。使用index.php标题中的以下代码将其删除：

<?php 
        //remove mootools.js and caption.js
        $headerstuff=$this->getHeadData();
        reset($headerstuff['scripts']);
        foreach($headerstuff['scripts'] as $key=>$value){
          unset($headerstuff['scripts'][$key]);
        }       
        $this->setHeadData($headerstuff);
        ?>
经过数小时的搜索和调试，我找到了解决方案。jQuery与joomla的交互包括mootools。使用index.php标题中的以下代码将其删除：

<?php 
        //remove mootools.js and caption.js
        $headerstuff=$this->getHeadData();
        reset($headerstuff['scripts']);
        foreach($headerstuff['scripts'] as $key=>$value){
          unset($headerstuff['scripts'][$key]);
        }       
        $this->setHeadData($headerstuff);
        ?>
@bgadoci更重要的是实现滑块和附加事件等的实际jQuery代码。你能发布吗？可能是通过一个服务，比如它真的很长。@doug我刚刚添加了slider.js代码。这就是你说的吗？是的！谢谢这将有助于找到修复程序，只需通读代码，就不会有任何明显的问题。在这一点上，它可能是你的HTML，你的CSS，等等。你能把简单的HTML测试页面放在一起，然后上传到某个地方让我们/我来解决问题吗？很抱歉，我帮不了你更多的忙。没问题，我真的很感谢你的帮助。请给我一点时间解释一下。@bgadoci更重要的是实现滑块和附加事件等的实际jQuery代码。你能发布吗？可能是通过一个服务，比如它真的很长。@doug我刚刚添加了slider.js代码。这就是你说的吗？是的！谢谢这将有助于找到修复程序，只需通读代码，就不会有任何明显的问题。在这一点上，它可能是你的HTML，你的CSS，等等。你能把简单的HTML测试页面放在一起，然后上传到某个地方让我们/我来解决问题吗？很抱歉，我帮不了你更多的忙。没问题，我真的很感谢你的帮助。给我一点时间把它拿起来，这不是我有的吗。我刚刚将JQuery的最新下载量和Scroll系列文件名复制到head链接。我缺少什么？尝试复制和粘贴它应该可以在所有浏览器上使用。没有k