当自己的demo.js文件里既有原生js的文件，又有jquery的文件时，该如何放置比较好呢？
答案是该怎么放置就怎么放置，不用有什么顾虑，如以下一段代码里有原生js又有jquery，我们就可以直接放一起
// 第一部分，原生js部分
var getId = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//浏览器窗口高度
var windowHeight = 900;
var currentN = 1;
var currentTop = 0;
var scrollDirection = 1;
var clock;
window.onresize = function() {
windowHeight = document.documentElement.clientHeight;
}
window.onload = function() {
//获取浏览器窗口高度
windowHeight = document.documentElement.clientHeight;
//主显DIV滚动事件处理
getId("maindiv").onscroll = function() {
//获取当前滚动的顶线位置
var tempTop = getId("maindiv").scrollTop;
//计算当前在第几个主画面
n = Math.round(tempTop / windowHeight) + 1;
radio(n);
//判断滚动方向
if (tempTop > currentTop) {
scrollDirection = 1;
} else if (tempTop < currentTop) {
scrollDirection = -1;
}
//滑动动画
clearInterval(clock);
clock = setInterval(animation, 1);
//每次滚动完毕将位置存入变量以供比较判断滚动方向
currentTop = getId("maindiv").scrollTop;
//$("informationdiv").innerHTML="方向"+scrollDirection+" "+n+"th screen "+"scroll top of maindiv"+currentTop+" window height:"+windowHeight;
}
}
//选中第n个radio
function radio(n) {
getId("radio" + n).checked = "true";
}
//点选RADIO后直接跳转至第n屏
function showScreen(n) {
radio(n);
var targetTop = (n - 1) * windowHeight;
getId("maindiv").scrollTop = targetTop;
}
//分屏滑动动画效果
function animation() {
if (scrollDirection == 1) {
//上行
if (getId("maindiv").scrollTop % windowHeight != 0) {
getId("maindiv").scrollTop += 1;
} else {
clearInterval(clock);
}
}
if (scrollDirection == -1) {
//下行
if (getId("maindiv").scrollTop % windowHeight != 0) {
getId("maindiv").scrollTop -= 1;
} else {
clearInterval(clock);
}
}
}
第一部分原生js结束
// 第二部分jquery开始
$(document).ready(function(){
$('#one').mouseenter(function(){
$('#one').css("background-color","rgb(79, 79, 210,0)");
}).mouseleave(function(){
$('#one').css("background-color","rgb(79, 79, 210,0.5)");
});
$('#two').mouseenter(function(){
$('#two').css("background-color","rgb(110, 235, 110,0)");
}).mouseleave(function(){
$('#two').css("background-color","rgb(110, 235, 110,0.5)");
});
$('#three').mouseenter(function(){
$('#three').css("background-color","rgb(56, 218, 210,0)");
}).mouseleave(function(){
$('#three').css("background-color","rgb(56, 218, 210,0.5)");
});
$('#four').mouseenter(function(){
$('#four').css("background-color","rgb(98, 221, 230,0)");
}).mouseleave(function(){
$('#four').css("background-color","rgb(98, 221, 230,0.5)");
});
});
第二部分jquery结束
由此可以看出两部分可以功能和代码可以独立分开，因为本身jquery也是一个js库，都是根据原生js封装的。
网友评论