Web-Frontend
js-Tutorial
Das jQuery-Plug-in windowScroll implementiert Single-Screen-Scrolling-Effekte_jquery
Das jQuery-Plug-in windowScroll implementiert Single-Screen-Scrolling-Effekte_jquery
Rückblickend kann ich es nicht ertragen, den Code anzusehen, auf den ich einst stolz war. Es schien einst, dass die Wirkung des Bunkers jetzt leicht erreicht werden kann. Die Gesellschaft schreitet voran, und auch die Menschen müssen vorankommen.
Beachten Sie den Auf- und Ab-Scrolleffekt der Sogou-Browser-Startseite der Version 4.2. Es implementiert hauptsächlich die Auf- und Ab- sowie die Links- und Rechts-Scrolllogik des gesamten Fensters, und es gibt noch viel Raum für Erweiterungen. Ich hoffe, Sie können weitere Kommentare und Vorschläge abgeben.
Der Code lautet wie folgt:
HTML
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>window对象滚动插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.windowScroll.js"></script>
</head>
<body scroll="no">
<div class="wrap" style="dispaly:block;">
<div class="stageControl">
<ul>
<li>stage1</li>
<li>stage2</li>
<li>stage3</li>
<li>stage4</li>
<li>stage5</li>
</ul>
</div>
<div class="stage stage1">
<div class="pageControl">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
<div class="page page1"></div>
<div class="page page2"></div>
<div class="page page3"></div>
</div>
<div class="stage stage2"></div>
<div class="stage stage3"></div>
<div class="stage stage4"></div>
<div class="stage stage5"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".wrap").windowScroll({
'choose' : 0,
'verticalSpeed' : 2, //控制垂直滚动速度
'horizontalSpeed' : 1,
'objControlUl': '.wrap .stageControl'
});
$(".stage1").windowScroll({
'choose': 1,
'verticalSpeed' : 1,
'horizontalSpeed' : 1,//控制水平滚动速度
'objControlUl': '.stage1 .pageControl'
});
});
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow: hidden;;
}
.wrap{
font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
font-size:14px;
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow:hidden;
}
.stage,.page{
width: 100%;
height: 100%;
}
.stage1{
background-color:red;
}
.stage2{
background-color:#fff;
}
.stage3{
background-color:yellow;
}
.stage4{
background-color:green;
}
.stage5{
background-color:blue;
}
.page{
float: left;
}
.page2{
background-color: #666;
}
.page3{
background-color: #ddd;
}
.stageControl{
position: fixed;
}
.stageControl ul li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.stageControl ul li:hover{
color: blue;
}
.pageControl{
position: fixed;
left: 200px;
}
.pageControl ul li{
float: left;
width: 50px;
height: 25px;
line-height: 25px;
text-align: center;
cursor: pointer;
}
.pageControl ul li:hover{
color: blue;
}
JavaScript
/*
* windowScroll 0.1
* window滚动插件，上下左右，可选择是否回弹。参考搜狗欢迎页面
* 兼容IE,FF,Chrome等常见浏览器
* 借鉴搜狗4.2版http://ie.sogou.com/features4.2.html
*/
;(function($,window,document,undefined){
//定义构造函数
var WindowObj=function(ele,opt){
this.$element=ele; //最外层对象
this.defaults={
'choose' : 0,//默认为上下
'verticalSpeed' : 1,
'horizontalSpeed' : 1,
'objControlUl': null
},
this.options=$.extend({},this.defaults,opt );
//阻止默认行为和冒泡,这里可以定义多个方法都要用到的函数
this.stopDefaultAndBubble=function(e){
e=e||window.event;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue=false;
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble=true;
}
this.setSize=function(ele){
$(ele).css({
'width':$(window).outerWidth()+'px'
});
//自动判断元素是否存在，对undefined赋css属性无意义
$(ele).children('.stage').css({
'width':$(window).outerWidth()+'px',
'height':$(window).outerHeight()+'px'
});
$(ele).children('.page').css({
'width':$(window).outerWidth()+'px',
'height':$(window).outerHeight()+'px'
});
}
}
//给构造函数添加方法
WindowObj.prototype={
//上下滚动的方法
verticalMove:function(){
var obj=this.$element; //最外层对象
var speed=this.options.verticalSpeed;
var objControl=this.options.objControlUl;//控制按钮
var windowHeight=$(window).height();
var list=$(obj).children('.stage');
var listMax=$(list).length;
var is_chrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1;
if(is_chrome){
//判断webkit内核，供scrollTop兼容性使用
windowobject='body';
}else{
//支持IE和FF
windowobject='html';
}
var stop=0;
//均设置为windows大小
this.setSize(obj);
//得到当前的垂直位置
var stageIndex;
function getIndex(){
stageIndex=Math.round($(window).scrollTop()/windowHeight);
}
//绑定键盘上下按键事件
$(document).keydown(function(event) {
/* 绑定keycode38，即向上按钮 */
if (event.keyCode==38) {
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
},100);
}else if (event.keyCode==40) {//绑定40，即向下按钮
getIndex();
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
},100);
}
});
//绑定滑轮功能的函数
function handle(delta){
getIndex();
if (delta<0) {
setTimeout(function(){
scrollStage(windowobject,stageIndex,-1); //stageIndex为当前页码
},100);
}else{
setTimeout(function(){
scrollStage(windowobject,stageIndex,1); //stageIndex为当前页码
},100);
}
}
//判断滑轮，解决兼容性
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail;
}
if (delta)
handle(delta); //调用执行函数
}
//注册事件
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
//绑定鼠标滚轮事件
$(document).bind('mousedown', function(event) {
if (e.which==2) {//which=2代表鼠标滚轮,即为中键
this.stopDefaultAndBubble(e);
//bugfix 搜狗浏览器的ie内核只有在定时器触发这个函数才生效
setTimeout(function(){
this.stopDefaultAndBubble(e);
},10);
}
});
//如果有ul li控制按钮
if (objControl!=null) {
$(objControl).delegate('li', 'click', function() {
stageIndex=$(this).index();
setTimeout(function(){
scrollStage(windowobject,stageIndex,0);
},100);
});
}
function scrollStage(obj,stIndex,dir){//如果用scrollStage=function来指定的话没有声明提前，然后就会找不到这个函数了
//obj为操作滚动的对象
//stIndex为点击调用时应该滚动到的页面页码，按键和滚轮调用时默认为1(传入0)
//dir传入滚动时的方向，0代表不滚动，1代表向上，-1代表向下
var sIndex=stIndex;//!(dir)则stageIndex为要到的页码，否则为当前页码
var windowobject=obj;
var direction=0||dir; //接收参数封装,没有传入时暂时认为为0
var target=windowHeight*sIndex; //目标页面距离文档顶部距离
if ( !$(windowobject).is(':animated') ) {//当没有在滚动时
if(!direction){ ////响应guider,此时stageIndex为目标页面页码
if ($(window).scrollTop() > target) { //内容下移，窗口上移,上方出现弹痕
direction=-1;
$(windowobject).animate({
"scrollTop": target +"px"
},1000*speed,function(){
crash_bottom(1,target,20,150); //调用撞击函数,先撞顶部,target变成当前页面了
});
}else if($(window).scrollTop() == windowHeight*sIndex){ //当前页面时
direction=0;
crash_bottom(1, target ,20,150); //模拟撞底部
}else{
direction=1;
$(windowobject).animate({
"scrollTop": target +"px"
},1000*speed,function(){
crash(1,target,20,150); //调用撞击函数,先撞底部
});
}
}else{//响应鼠标滚轮和键盘上下，sindex为当前页面
if(direction==1){
if(sIndex==0){
crash(1,target,20,150);
}else{ //往上翻
sIndex-=1;
$(windowobject).animate({
"scrollTop":windowHeight*sIndex+"px"
},1000*speed,function(){
crash_bottom(1,windowHeight*sIndex,20,150); //调用撞击函数,往下翻内容往上，先撞顶部
}
);
}
}else{
if(sIndex==listMax){
crash_bottom(1,target,20,150);
}else{ //往下翻
sIndex+=1;
$(windowobject).animate({
"scrollTop":windowHeight*sIndex+"px"
},1000*speed,function(){
crash(1,windowHeight*sIndex,20,150); //调用撞击函数,往上翻内容往下，先撞底部
});
}
}
}
}
}
//撞击函数
function crash_bottom(direction,termin,distant,time){
if (!stop) {
var scrollTop=$(window).scrollTop();
if (direction==1) {
direction=0;
$(windowobject).animate({"scrollTop":"+="+distant+"px"},time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}else if (direction==0) {
direction=1;
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
crash_bottom(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}
}
}
function crash(direction,termin,distant,time){
if (!stop) {
var scrollTop=$(window).scrollTop();
if (direction==1) {
direction=0;
$(windowobject).animate({"scrollTop":"-="+distant+"px"},time,function(){
crash(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}else if (direction==0) {
direction=1;
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
crash(direction,termin,distant*0.6,time);
if (distant<=15||time>150) {
stop=1;//停止碰撞
$(windowobject).animate({"scrollTop":termin+"px"},time,function(){
stop=0;
});
}
});
}
}
}
},
//左右滚动的方法
horizontalMove:function(){
var obj=this.$element; //最外层对象
var speed=this.options.horizontalSpeed;
var objControl=this.options.objControlUl;//控制按钮
var windowWidth=$(window).width();
var list=$(obj).children('.page');
var listMax=$(list).length;
var is_chrome=navigator.userAgent.toLowerCase().indexOf('chrome')>-1;
if(is_chrome){
//判断webkit内核，供scrollTop兼容性使用
windowobject='body';
}else{
//支持IE和FF
windowobject='html';
}
var stop=0;
//均设置为windows大小
this.setSize(obj);
$(obj).css({'width':windowWidth*listMax+'px'});
var pageIndex; //当前页面页码(负数)
function getPageIndex(){
pageIndex=Math.round(parseInt($(obj).css("margin-left")) / windowWidth);
}
//绑定键盘左右按键事件
$(document).keydown(function(event){
//判断event.keyCode为39（即向右按钮）
if (event.keyCode==39) {
getPageIndex();
scrollPage($(obj),pageIndex,-1);
}
//判断event.keyCode为37（即向左按钮
else if (event.keyCode==37) {
getPageIndex();
scrollPage($(obj),pageIndex,1);
}
});
//如果有ul li控制按钮
if (objControl!=null) {
$(objControl).delegate('li', 'click', function() {
pageIndex=$(this).index();
setTimeout(function(){
scrollPage(obj,pageIndex,0);
},100);
});
}
function scrollPage(obje,pIndex,dir){
var windowobject=obje;
var direction=0||dir;
var pageIndex=pIndex;
var dist=Math.round(parseInt($(obj).css("margin-left"))); //当前页距离左边的margin(负值)
var aim=pageIndex*windowWidth*(-1);
if (!$(windowobject).is(":animated")) {
if(!direction){ //响应nav
if (dist != aim) { //此时pageIndex为yearID.非负值
$(windowobject).animate({"margin-left": aim + "px"},
1000*speed);
}else{
direction=0;
$(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500);
}
}else{ //响应键盘左右键
if(direction==1){ //pageIndex为负值
if(pageIndex==0){
$(windowobject).animate({"margin-left":"+="+"50px"},500).animate({"margin-left":"-="+"100px"},500).animate({"margin-left":"+="+"50px"},500);
}else{
pageIndex+=1; //显示左边内容，左键
$(windowobject).animate({"margin-left":"+=" + windowWidth + "px"},
1000*speed);
}
}else{
if(pageIndex== ((-1)*(listMax-1))){
$(windowobject).animate({"margin-left":"-="+"50px"},500).animate({"margin-left":"+="+"100px"},500).animate({"margin-left":"-="+"50px"},500);
}else{
pageIndex-=1;
$(windowobject).animate({"margin-left":"-=" + windowWidth + "px"},
1000*speed);
}
}
}
}
}
}
}
//在插件中使用windowObj对象的方法，0为vertical，1为horizontal
$.fn.windowScroll=function(options){
//创建实体
var windowObj=new WindowObj(this,options);
//根据选择调用方法
if (windowObj.options.choose==0) {
return windowObj.verticalMove();
}else if(windowObj.options.choose==1){
return windowObj.horizontalMove();
}else{//2之后的留扩展吧
//add some functions
}
}
})(jQuery,window,document);
Detaillierte Code-Downloads finden Sie unter https://github.com/codetker/myWindowScroll
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung
Feb 27, 2024 pm 06:45 PM
Detaillierte Erläuterung der jQuery-Referenzmethode: Kurzanleitung jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Website-Entwicklung verwendet wird. Sie vereinfacht die JavaScript-Programmierung und bietet Entwicklern umfangreiche Funktionen und Features. In diesem Artikel wird die Referenzmethode von jQuery ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern einen schnellen Einstieg zu erleichtern. Einführung in jQuery Zuerst müssen wir die jQuery-Bibliothek in die HTML-Datei einführen. Es kann über einen CDN-Link eingeführt oder heruntergeladen werden
Wie entferne ich das Höhenattribut eines Elements mit jQuery?
Feb 28, 2024 am 08:39 AM
Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen
Wie verwende ich die PUT-Anfragemethode in jQuery?
Feb 28, 2024 pm 03:12 PM
Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Feb 28, 2024 pm 09:06 PM
Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: <
Eingehende Analyse: Vor- und Nachteile von jQuery
Feb 27, 2024 pm 05:18 PM
jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek, die häufig in der Front-End-Entwicklung verwendet wird. Seit seiner Veröffentlichung im Jahr 2006 ist jQuery für viele Entwickler zu einem der bevorzugten Tools geworden, hat in der Praxis jedoch auch einige Vor- und Nachteile. In diesem Artikel werden die Vor- und Nachteile von jQuery eingehend analysiert und anhand spezifischer Codebeispiele veranschaulicht. Vorteile: 1. Prägnante Syntax Das Syntaxdesign von jQuery ist prägnant und klar, was die Lesbarkeit und Schreibeffizienz des Codes erheblich verbessern kann. Zum Beispiel,
Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern
Feb 28, 2024 pm 05:42 PM
Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:
Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?
Feb 29, 2024 am 09:03 AM
Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wenn Sie jQuery zum Betreiben von DOM-Elementen verwenden, stoßen Sie häufig auf Situationen, in denen Sie feststellen müssen, ob ein Element ein bestimmtes Attribut hat. In diesem Fall können wir diese Funktion einfach mit Hilfe der von jQuery bereitgestellten Methoden implementieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt, um festzustellen, ob ein jQuery-Element über bestimmte Attribute verfügt, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die Methode attr() und den Operator typeof //, um zu bestimmen, ob das Element ein bestimmtes Attribut hat
Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery
Feb 28, 2024 pm 01:15 PM
jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur DOM-Manipulation und Ereignisbehandlung in Webseiten verwendet wird. In jQuery wird die Methode eq() verwendet, um Elemente an einer bestimmten Indexposition auszuwählen. Die spezifischen Verwendungs- und Anwendungsszenarien sind wie folgt. In jQuery wählt die Methode eq() das Element an einer angegebenen Indexposition aus. Indexpositionen beginnen bei 0 zu zählen, d. h. der Index des ersten Elements ist 0, der Index des zweiten Elements ist 1 und so weiter. Die Syntax der eq()-Methode lautet wie folgt: $("s
