这是一个使用jQuery的示例代码,主要展示了如何使用jQuery和CSS动画(scroolX)来实现图片的滚动效果。
(function(){
jQuery("#temp1").Slide({ effect: "scroolX", speed: "normal", timer: 3000 });
jQuery("#temp2").Slide({ effect: "scroolX", speed: "normal", timer: 3000 });
jQuery("#temp3").Slide({ effect: "scroolX", speed: "normal", timer: 3000 });
})(jQuery);
jQuery(document).ready(function () {
jQuery('.navigation li').hover(
function () {
jQuery('ul', this).fadeIn();
},
function () {
jQuery('ul', this).fadeOut();
}
);
});
// 在页面加载完成后调用一个函数来启动图片滚动效果
jQuery.fn.im = function (speed, amount, dir) {
var $images = this.each(function () {
var $this = $(this);
var images = $this.children("img");
var index = 0;
var direction = (dir === "up") ? 1 : -1;
var step = amount / (images.length * 2);
function stepDown() {
$this.stop().animate({ left: index + direction * step }, speed, stepDown);
}
function stepUp() {
$this.stop().animate({ left: (index + speed * direction) }, speed, stepUp);
}
if (direction === "up") {
stepUp();
} else {
stepDown();
}
function completeMove() {
index += direction;
$this.css("left", index + "px");
}
setInterval(completeMove, 0);
});
return this;
};
这个代码中包含了两个主要的JavaScript函数:jQuery('.navigation li').hover(...)
和 jQuery.fn.im = ...
。jQuery('.navigation li').hover(...)
是在点击导航链接时执行的函数,它将鼠标悬停在链接上时使相应的下拉菜单显示出来,鼠标移开链接时则将其隐藏。jQuery.fn.im = ...
是一个jQuery方法,用于启动图片滚动效果并设置速度、步长和方向。当页面加载完成后,此代码会自动运行,从而开始图片滚动效果。