Detailed explanation of jQuery plug-in windowScroll usage code examples-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of jQuery plug-in windowScroll usage code examples

伊谢尔伦

Jul 19, 2017 pm 04:15 PM

jquery code

What I want to share with you is a special effect implemented using the jQuery plug-in windowScroll

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">
  <p class="wrap" style="dispaly:block;">
    <p class="stageControl">
      <ul>
        <li>stage1</li>
        <li>stage2</li>
        <li>stage3</li>
        <li>stage4</li>
        <li>stage5</li>
      </ul>
    </p>
    <p class="stage stage1">
      <p class="pageControl">
        <ul>
          <li>page1</li>
          <li>page2</li>
          <li>page3</li>
        </ul>
      </p>
      <p class="page page1"></p>
      <p class="page page2"></p>
      <p class="page page3"></p>  
    </p>
    <p class="stage stage2"></p>
    <p class="stage stage3"></p>
    <p class="stage stage4"></p>
    <p class="stage stage5"></p>
  </p>
<script type="text/javascript">
  $(document).ready(function(){
    $(".wrap").windowScroll({
      &#39;choose&#39; : 0,
      &#39;verticalSpeed&#39; : 2, //控制垂直滚动速度
      &#39;horizontalSpeed&#39; : 1,
      &#39;objControlUl&#39;: &#39;.wrap .stageControl&#39;
    });
    $(".stage1").windowScroll({
      &#39;choose&#39;: 1,
      &#39;verticalSpeed&#39; : 1,
      &#39;horizontalSpeed&#39; : 1,//控制水平滚动速度
      &#39;objControlUl&#39;: &#39;.stage1 .pageControl&#39;
    });
  });
</script>
</body>
</html>

Copy after login

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;
}

Copy after login

JavaScript

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

/*
 * windowScroll 0.1
 * window滚动插件，上下左右，可选择是否回弹。参考搜狗欢迎页面
 * 兼容IE,FF,Chrome等常见浏览器
 */
 ;(function($,window,document,undefined){
   //定义构造函数
   var WindowObj=function(ele,opt){
     this.$element=ele; //最外层对象
     this.defaults={
       &#39;choose&#39; : 0,//默认为上下
       &#39;verticalSpeed&#39; : 1,
       &#39;horizontalSpeed&#39; : 1,
       &#39;objControlUl&#39;: 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({
        &#39;width&#39;:$(window).outerWidth()+&#39;px&#39;
      });
      //自动判断元素是否存在，对undefined赋css属性无意义
      $(ele).children(&#39;.stage&#39;).css({
        &#39;width&#39;:$(window).outerWidth()+&#39;px&#39;,
        &#39;height&#39;:$(window).outerHeight()+&#39;px&#39;
      });
      $(ele).children(&#39;.page&#39;).css({
        &#39;width&#39;:$(window).outerWidth()+&#39;px&#39;,
        &#39;height&#39;:$(window).outerHeight()+&#39;px&#39;
      });
    }
   }
 
   //给构造函数添加方法
   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(&#39;.stage&#39;);
       var listMax=$(list).length;
 
       var is_chrome=navigator.userAgent.toLowerCase().indexOf(&#39;chrome&#39;)>-1;
       if(is_chrome){
         //判断webkit内核，供scrollTop兼容性使用
         windowobject=&#39;body&#39;;
       }else{
         //支持IE和FF
         windowobject=&#39;html&#39;;
       }
       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(&#39;DOMMouseScroll&#39;, wheel, false);
       }
       window.onmousewheel = document.onmousewheel = wheel;
        
       //绑定鼠标滚轮事件
       $(document).bind(&#39;mousedown&#39;, 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(&#39;li&#39;, &#39;click&#39;, 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(&#39;:animated&#39;) ) {//当没有在滚动时
          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(&#39;.page&#39;);
       var listMax=$(list).length;
 
       var is_chrome=navigator.userAgent.toLowerCase().indexOf(&#39;chrome&#39;)>-1;
       if(is_chrome){
         //判断webkit内核，供scrollTop兼容性使用
         windowobject=&#39;body&#39;;
       }else{
         //支持IE和FF
         windowobject=&#39;html&#39;;
       }
       var stop=0;
 
       //均设置为windows大小
       this.setSize(obj);
       $(obj).css({&#39;width&#39;:windowWidth*listMax+&#39;px&#39;});
 
       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(&#39;li&#39;, &#39;click&#39;, 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);

Copy after login

The above is the detailed content of Detailed explanation of jQuery plug-in windowScroll usage code examples. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7931

Java Tutorial

1652

CakePHP Tutorial

1412

Laravel Tutorial

1303

PHP Tutorial

1250

Related knowledge

GE universal remote codes program on any device Mar 02, 2024 pm 01:58 PM

If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may

How to use Copilot to generate code Mar 23, 2024 am 10:41 AM

As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for "PowerPlatformTool" and click the Install button

How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Create and run Linux ".a" files Mar 20, 2024 pm 04:46 PM

Working with files in the Linux operating system requires the use of various commands and techniques that enable developers to efficiently create and execute files, code, programs, scripts, and other things. In the Linux environment, files with the extension ".a" have great importance as static libraries. These libraries play an important role in software development, allowing developers to efficiently manage and share common functionality across multiple programs. For effective software development in a Linux environment, it is crucial to understand how to create and run ".a" files. This article will introduce how to comprehensively install and configure the Linux ".a" file. Let's explore the definition, purpose, structure, and methods of creating and executing the Linux ".a" file. What is L

Tsinghua University and Zhipu AI open source GLM-4: launching a new revolution in natural language processing Jun 12, 2024 pm 08:38 PM

Since the launch of ChatGLM-6B on March 14, 2023, the GLM series models have received widespread attention and recognition. Especially after ChatGLM3-6B was open sourced, developers are full of expectations for the fourth-generation model launched by Zhipu AI. This expectation has finally been fully satisfied with the release of GLM-4-9B. The birth of GLM-4-9B In order to give small models (10B and below) more powerful capabilities, the GLM technical team launched this new fourth-generation GLM series open source model: GLM-4-9B after nearly half a year of exploration. This model greatly compresses the model size while ensuring accuracy, and has faster inference speed and higher efficiency. The GLM technical team’s exploration has not

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

The Mistral open source code model takes the throne! Codestral is crazy about training in over 80 languages, and domestic Tongyi developers are asking to participate! Jun 08, 2024 pm 09:55 PM

Produced by 51CTO technology stack (WeChat ID: blog51cto) Mistral released its first code model Codestral-22B! What’s crazy about this model is not only that it’s trained on over 80 programming languages, including Swift, etc. that many code models ignore. Their speeds are not exactly the same. It is required to write a "publish/subscribe" system using Go language. The GPT-4o here is being output, and Codestral is handing in the paper so fast that it’s hard to see! Since the model has just been launched, it has not yet been publicly tested. But according to the person in charge of Mistral, Codestral is currently the best-performing open source code model. Friends who are interested in the picture can move to: - Hug the face: https

See all articles