第一个功能提示动画
//右侧提示文字
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
console.log(this.myTitle);
this.title = '';
var tooltip = "<div id = 'tooltip'>" + this.myTitle + "</div>"
$("body").append(tooltip);
var x = 10;
var y = 20;
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e) {
var x = 10;
var y = 20;
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
})
})
第二个功能
滚动动画
function showBrandList(index) {
var $rollobj = $("jnBrandList");
var rollWidth = $rollobj.find("li").outerWidth();
rollWidth = rollWidth * 4;
$rollobj.stop(true, false).animate({
left: -rollWidth * index
}, 1000);
}
$("#jnBrandTab li a").click(function() {
$(this).parent().addClass("chos").siblings().removeClass("chos");
var idx = $("#jinBrandTab li a").index(this);
showBrandList(idx);
return false;
}).eq(1).click();
$("#jnBrandList li").each(function(index) {
var $this = $(this);
var $img = $this.find("img");
setTimeout(function() {
var img_w = $img.width();
var img_h = $img.height();
var spanHtml = '<span ' + 'style = "position:absolute;top:0;left:17px;width:' + img_w + 'px;height:' + img_h + 'px;" class = "imageMask></span>';
$(spanHtml).appendTo($this);
}, 1700);
});
$("#jnBrandList").delegate(".imageMask", "mouseenter mouseleave",
function() {
$(this).toggleClass("imageOver");
});
//滚动动画
$("#jnBrandTab li a").click(function() {
$(this).parent().addClass("chos").siblings().removeClass("chos");
var idx = $("#jnBrandTab li a").index(this);
showBrandList(idx);
return false;
}).eq(0).click();
function showBrandList(index) {
var $rollobj = $("#jnBrandList");
var rollWidth = $rollobj.find("li").outerWidth();
rollWidth = rollWidth * 4;
$rollobj.stop(true, false).animate({
left: -rollWidth * index
}, 1000);
}
第三个功能
放大镜功能
//滑过图片出现放大镜效果
$("#jnBrandList li").each(function(index) {
var $img = $(this).find("img");
var img_w = $img.width();
var img_h = $img.height();
var spanHtml = '<span style="position:absolute;top:0;left:5px;width:' + img_w + 'px;height:' + img_h + 'px;" class="imageMask"></span>';
$(spanHtml).appendTo(this);
})
$("#jnBrandList").delegate(".imageMask", "hover", function() {
$(this).toggleClass("imageOver");
});
如果放大镜无法正常显示请更改css文件中的该代码
将images改为img
记得写入口函数