我有一个问题我正在使用多个JQuery插件来实现有魅力但同时添加另一个插件的效果。当新添加的插件工作时,其余效果不起作用。这是我面临的一种新型问题。我需要帮助。谢谢你的回答,评论和批评。
这是我目前正在使用的示例列表
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!-- Header-change by background -->
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.catslider.js"></script>
<script>
var nodes = document.querySelectorAll('.logo-over li'),
_nodes = [].slice.call(nodes, 0);
var getDirection = function(ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
return d;
};
var addClass = function(ev, obj, state) {
var direction = getDirection(ev, obj),
class_suffix = "";
obj.className = "";
switch (direction) {
case 0:
class_suffix = '-top';
break;
case 1:
class_suffix = '-right';
break;
case 2:
class_suffix = '-bottom';
break;
case 3:
class_suffix = '-left';
break;
}
obj.classList.add(state + class_suffix);
};
// bind events
_nodes.forEach(function(el) {
el.addEventListener('mouseover', function(ev) {
addClass(ev, this, 'in');
}, false);
el.addEventListener('mouseout', function(ev) {
addClass(ev, this, 'out');
}, false);
});
$(function() {
$('#mi-slider').catslider();
});
var $head = $('#ha-header');
$('.ha-waypoint').each(function(i) {
var $el = $(this),
animClassDown = $el.data('animateDown'),
animClassUp = $el.data('animateUp');
$el.waypoint(function(direction) {
if (direction === 'down' && animClassDown) {
$head.attr('class', 'ha-header ' + animClassDown);
} else if (direction === 'up' && animClassUp) {
$head.attr('class', 'ha-header ' + animClassUp);
}
}, {
offset: '100%'
});
});
/*Nav-line follow*/
$(function() {
/* Add Magic Line markup via JavaScript, because it ain't gonna work without */
$("#navigation").append("<li id='magic-line'></li>");
/* Cache it */
var $magicLine = $("#magic-line");
$magicLine
.width($(".active").width())
.css("left", $(".active a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#navigation > li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});
//form
jQuery(document).ready(function($) {
if ($('.floating-labels').length > 0) floatLabels();
function floatLabels() {
var inputFields = $('.floating-labels .cd-label').next();
inputFields.each(function() {
var singleInput = $(this);
//check if user is filling one of the form fields
checkVal(singleInput);
singleInput.on('change keyup', function() {
checkVal(singleInput);
});
});
}
function checkVal(inputField) {
(inputField.val() == '') ? inputField.prev('.cd-label').removeClass('float'): inputField.prev('.cd-label').addClass('float');
}
});
$(window).scroll(function(e) {
parallax();
});
function parallax() {
var scrolled = $(window).scrollTop();
$('.magma').css('top', +(scrolled * 0.6) + 'px');
}
</script>
<script src="js/banner-color-effect/js-color-effect.js"></script>
<script src="js/page-transition.js"></script>