C# 在我的ASPX网页上使用脚本
当我将这段代码附加到我的aspx页面时,虽然它在JS FIDLE[link]上工作正常,但脚本并没有工作。请帮帮我 ----------------HTML代码:::C# 在我的ASPX网页上使用脚本,c#,javascript,jquery,html,asp.net,C#,Javascript,Jquery,Html,Asp.net,当我将这段代码附加到我的aspx页面时,虽然它在JS FIDLE[link]上工作正常,但脚本并没有工作。请帮帮我 ----------------HTML代码::: <div class="panel panel-one" style="background-color:white"> <div class="panel-inner">PANEL 1</div> </div> <div class="panel panel-two"
<div class="panel panel-one" style="background-color:white">
<div class="panel-inner">PANEL 1</div>
</div>
<div class="panel panel-two">
<div class="sample red">Image 1</div>
<div class="sample green">Image 2</div>
<div class="sample blue">Image 3</div>
<div></div>
<div class="panel-inner">Panel 2</div>
</div>
<div class="panel panel-three">
<div class="panel-inner">Panel 3</div>
</div>
-----Javascript-----------
$(函数(){
//设置变量
变量_window=$(window),
面板=$(“.panel”),
小组成员=[];
//每个面板的缓存位置
$。每个(面板、功能(i、el){
面板推送(面板等式(i).偏移().顶部);
});
//将我们的函数绑定到窗口滚动
_window.bind('scroll',function(){
var xxxx=_window.scrollTop();
updateWindow();
});
//更新窗口
函数updateWindow(){
var y=_window.scrollTop();
//循环查看我们的面板位置
对于(i=0,l=panels.length;i 如果((i==l-1)| |(y>=panelsY[i]&&y),我认为需要详细说明,以验证代码中是否存在任何问题或必须添加任何内容。
html, body {
height: 100%;
}
.sample {
position:fixed;
}
.red {
background:red;
top:100px;
width:500px;
height:100px;
}
.green {
background:green;
top: 100px;
width:500px;
height:100px;
}
.blue {
background:blue;
top:100px;
width:500px;
height:100px;
}
.panel {
position: relative;
min-height: 500px;
z-index: 1;
}
.panel-fixed {
z-index: 1;
}
.panel-inner {
/*padding: 1em;*/
width: 100%;
}
.panel-fixed .panel-inner {
position: fixed;
top: 0;
left: 0;
z-index: 3;
}
.panel-one {
background-color: red;
}
.panel-two {
background-color: yellow;
}
.panel-three {
background-color: orange;
}
/* Base */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
$(function () {
// Set up vars
var _window = $(window),
panels = $('.panel'),
panelsY = [];
// Cache position of each panel
$.each(panels, function (i, el) {
panelsY.push(panels.eq(i).offset().top);
});
// Bind our function to window scroll
_window.bind('scroll', function () {
var xxxx = _window.scrollTop();
updateWindow();
});
// Update the window
function updateWindow() {
var y = _window.scrollTop();
// Loop through our panel positions
for (i = 0, l = panels.length; i < l; i++) {
/*
Firstly, we break if we're checking our last panel,
otherwise we compare if he y position is in between
two panels
*/
if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i + 1])) {
break;
}
};
// Update classes
panels.not(':eq(' + i + ')').removeClass('panel-fixed');
panels.eq(i).addClass('panel-fixed');
};
});
// cancels any existing animations
// and animates the "slide out" transition for all samples
function hideDivs() {
$('.sample').stop().animate({
left: '-2000px'
}, 3000);
}
// slides in various samples for various scroll positions
// hides any that aren't appropriate for the current position
function showDivs() {
hideDivs();
var top = $(document).scrollTop();
if (top == 0 && top <= 500) {
hideDivs();
} else if (top >= 500 && top < 550) {
$('.red').stop().animate({
'left': '0px'
}, 1000);
$('.green').stop().animate({
'left': '-1000px'
}, 2000);
$('.blue').stop().animate({
'left': '-1000px'
}, 3000);
} else if (top >= 550 && top < 600) {
$('.red').stop().animate({
'left': '5px'
}, 2000);
$('.green').stop().animate({
'left': '0px'
}, 2000);
$('.blue').stop().animate({
'left': '-100px'
}, 3000);
} else if (top >= 600 && top < 650) {
$('.red').stop().animate({
'left': '510px'
}, 3000);
$('.green').stop().animate({
'left': '0px'
}, 4000);
$('.blue').stop().animate({
'left': '-500px'
}, 3000);
} else if (top >= 600 && top < 800) {
$('.red').stop().animate({
'left': '530px'
}, 3000);
$('.green').stop().animate({
'left': '350px'
}, 3000);
$('.blue').stop().animate({
'left': '0px'
}, 3000);
} else if (top >= 800) {
$('.red').stop().animate({
'left': '530px'
}, 3000);
$('.green').stop().animate({
'left': '350px'
}, 3000);
$('.blue').stop().animate({
'left': '0px'
}, 1000);
}
}
// scroll events get fired a LOT
// this will end up being very jerky and distracting if we
// trigger the animation every time the even fires
// So wait for a split-second before starting the animations,
// resetting the timer on each scroll event to ensure that
// the animation doesn't start until the scrolling has stopped.
var timer = null;
$(window).scroll(function () {
clearTimeout(timer);
timer = setTimeout(showDivs, 50);
});