在另一个页面“Hash”上打开Jquery Div
我想通过使用链接在不同页面上打开一个 div。
链接如下所示:grid.html#project1 / 2 / 3 / 4 等。
代码在目标页面上如下所示:
$(function(){
// Thumbs
$('#thumbs a').hover(function(){
$(this).find('span').stop(true, true).animate({'top': '90px'}, 300)
}, function(){
$(this).find('img').stop(true, true).animate({}, 300);
$(this).find('span').stop(true, true).animate({'top': '124px'}, 300)
}) .bind('click', function(){
$('#content .project').stop(true, true).fadeOut(500);
$($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);
$('#content').animate({'min-height' : '450px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '-2px' , 'paddingBottom' : '130px'}, 500);
$('#thumbs').animate({'marginTop' : '30px'}, 500);
$('html,body').animate({scrollTop:0}, 500);
return false;
});
$(".close").click(function() {
$('#content .project').fadeOut(500);
$('#content').animate({'min-height' : '0px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '0px' , 'paddingBottom' : '0px'}, 500);
});
// Carousel
$('.carousel').jcarousel({
scroll: 1,
animation: 800,
easing: 'easeOutQuart',
buttonNextHTML: '<div><div></div></div>',
buttonPrevHTML: '<div><div></div></div>',
initCallback: initCarousel
});
});
I want to open a div on a different page by using a link.
The links look like this: grid.html # project1 / 2 / 3 / 4 etc..
The code looks like this on the target page:
$(function(){
// Thumbs
$('#thumbs a').hover(function(){
$(this).find('span').stop(true, true).animate({'top': '90px'}, 300)
}, function(){
$(this).find('img').stop(true, true).animate({}, 300);
$(this).find('span').stop(true, true).animate({'top': '124px'}, 300)
}) .bind('click', function(){
$('#content .project').stop(true, true).fadeOut(500);
$($(this).attr('href')).stop(true, true).css('left', 0).fadeIn(500);
$('#content').animate({'min-height' : '450px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '-2px' , 'paddingBottom' : '130px'}, 500);
$('#thumbs').animate({'marginTop' : '30px'}, 500);
$('html,body').animate({scrollTop:0}, 500);
return false;
});
$(".close").click(function() {
$('#content .project').fadeOut(500);
$('#content').animate({'min-height' : '0px', 'display' : 'inline', 'position' : 'relative', 'paddingTop' : '0px' , 'paddingBottom' : '0px'}, 500);
});
// Carousel
$('.carousel').jcarousel({
scroll: 1,
animation: 800,
easing: 'easeOutQuart',
buttonNextHTML: '<div><div></div></div>',
buttonPrevHTML: '<div><div></div></div>',
initCallback: initCarousel
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)