需要帮助从网站修改javascript
Need help modifying a javascript from a website
我下载了一个html5模板并尝试自定义它,但我不知所措。我想要的网站很简单。您可以在此处看到演示:演示网站
正如您所看到的,当点击菜单时,右侧会出现幻灯片内容。所以有两件事我希望能得到建议:
1.)我想修改这个内容的宽度和高度,但不知道怎么做。
以下是我认为应该对此负责的javascript:
$(window).load(function() {
var act='';
$('#content > ul > li').css({position:'absolute', display:'none'});
$('#content > ul > li').find('.box1').css({height:'0'})
$('#menu > li > a span').css({opacity:'0'})
$('#menu > li > a').hover(function(){
$(this).find(' > span').stop().animate({opacity:'1'},600);
}, function(){
if (!$(this).hasClass('active')) {
$(this).find(' > span').stop().animate({opacity:'0'},600);
}
})
$('#menu > li').each(function(num){
$(this).data({num:num})
})
if (location.hash.slice(0,3)=='#!/') {
page=location.hash.slice(3);
open_page('#'+page);
}
if ((location.hash=='#')||(location.hash=='')) {
open_page('');
}
$('#menu a').click(function(){
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Questrial', hover:true });
$(this).addClass('active').find(' > span').stop().animate({opacity:'1'},600);
})
$('a').click(function(){
if ($(this).attr('href').slice(0,3)=='#!/') {
page=$(this).attr('href').slice(3);
open_page('#'+page);
return false;
}
if ($(this).attr('data-type')=='close') {
close_page()
}
})
function open_page(page){
location.hash='#!/'+page.slice(1);
if (act!='') {
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
})
} else {
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
}
}
function close_page(page){
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Questrial', hover:true });
location.hash='#';
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
act='';
});
return false;
}
})
2.)我想在幻灯片内容空间中打开另一个页面(不在同一服务器上),就像jquery弹出窗口,但嵌入在幻灯片窗口中。目前,那里的所有内容都写在index.html 中
我应该用iframe这样做吗?我还没有尝试过,因为我需要先弄清楚第一步。
像这样:
<li id="page_Teachers">
<div class="box1">
<div class="inner">
<a href="#" class="close" data-type="close"><span></span></a>
<div class="wrapper">
<h2>Our Staff</h2>
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page2_img1.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Helen Williams</strong></p>
<p class="pad_bot1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inciddunt ut labore et dolore magna aliqua nostrud exercitation.</p>
<p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p>
</div>
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page2_img2.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Jessy Hamper</strong></p>
<p class="pad_bot1">Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolorreprehenderit in voluptate velit esse cillum dolore.</p>
<p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p>
</div>
<div class="wrapper pad_bot2">
<figure class="left marg_right1"><img src="images/page2_img3.jpg" alt=""></figure>
<p class="pad_bot2"><strong>Chester Hamper</strong></p>
<p class="pad_bot1">Cupidatat non proident sunt culpa officia deserunt mollit anim idst laborum. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
<p class="pad_bot2"><a href="#!/page_More" class="link1">Read More</a></p>
</div>
</div>
</div>
</div>
</li>
这些容器的CSS id
选择器是:
CCD_ 2。如图所示:
<li id="page_About" style="position: absolute; display: block;height: 400px;width: 600px;">
<li id="page_Teachers" style="position: absolute; display: none;">
<li id="page_Schedule" style="position: absolute; display: none;">
...
因此,您需要向它们添加一些CSS width
和height
。例如:
#page_about, #page_teachers, #page_schedules, #page_prices, #page_more {
height: 200px;
width: 300px;
}
您还需要考虑您的CSS。也许可以从玩css值开始,例如:
.main { width: 980; }
#content { width: xxx }
相关文章:
- 每次调用函数时,都要修改Javascript中的局部变量
- 修改 JavaScript 以使用 ASCII 字符或图像而不是文本
- 如何通过使用谷歌地图从文本字段提交来修改javascript对象中的数据
- 修改javascript代码chrome dev工具
- blankt.js如何修改JavaScript文件
- C#WebBrowser控件-使用DOM创建和修改javascript变量,然后使用Applet读取它
- 为新手修改Javascript代码
- 在 Web 浏览器控件中修改 Javascript 变量
- 修改 JavaScript 以排除打开新页面的第一列
- 修改 javascript var 值而不重新加载页面
- 使用 Greasemonkey 修改 javascript 变量
- 如何使用 page-mod 来修改 JavaScript 加载的元素
- 修改Javascript以删除变量
- 修改javascript以触发:checked而不是:hover--hoverizr
- 修改 JavaScript 中的局部变量
- 修改 JavaScript 对象属性
- Fancybox-修改javascript以添加选项
- 修改JavaScript对象并使用setRowsData写入单个单元格
- 动态修改JavaScript中的构造函数
- 如果效率是一个问题,如何修改JavaScript修剪函数?