JS實(shí)現(xiàn)長圖上下滾動(dòng)效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)長圖上下滾動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
案例描述
將一張長圖放在某一固定長寬的盒子里,當(dāng)鼠標(biāo)置于盒子的上半部分時(shí),圖片向下滑直到到達(dá)圖片的底部停止;當(dāng)鼠標(biāo)置于盒子的下半部分時(shí),圖片向上滑直到到達(dá)圖片的頂部停止。
案例圖示
HTML
<div id="box"> <img id="pic" src="./program1/images/1.jpg" alt=""> <div id="top"></div> <div id="bottom"></div>
CSS
CSS不作過多解釋,詳解請(qǐng)看注釋部分
//通用樣式 * { margin: 0; padding: 0; } #box { width: 750px; height: 200px; border: 1px solid #000; margin: 200px auto; overflow: hidden; /*圖片溢出部分隱藏*/ position: relative; /*子絕父相*/ } #pic { position: absolute; left: 0; right: 0; } #top { width: 100%; height: 50%; position: absolute; /*子絕父相*/ left: 0; cursor: pointer; /*鼠標(biāo)*/ /* 頂部對(duì)齊 */ top:0; } #bottom { width: 100%; height: 50%; position: absolute; /*子絕父相*/ left: 0; cursor: pointer; /* 底部對(duì)齊 */ bottom: 0; } </style>
JS核心代碼
JS詳解----監(jiān)聽鼠標(biāo)進(jìn)入事件(以盒子上半部分為例)
鼠標(biāo)停留在盒子上半部分時(shí),使用onmouseover事件。首先要清除定時(shí)器,否則可能會(huì)出現(xiàn)定時(shí)器重疊現(xiàn)象;再設(shè)置定時(shí)器,定時(shí)器中的num就是改變圖片的top屬性以達(dá)到圖片向上滑動(dòng)的效果。if語句中的條件是為了達(dá)到圖片到達(dá)底部時(shí)停止向上滑的目的。(盒子下半部分類似)
top.onmouseover = function(){ // 改變pic中的top // 清除定時(shí)器 // alert(0); clearInterval(intervalId); // 設(shè)置定時(shí)器 intervalId = setInterval(function(){ if(num > -600){ num -= 10; pic.style.top = num + "px"; } },20);
JS詳解----監(jiān)聽鼠標(biāo)移出事件(以盒子上半部分為例)
鼠標(biāo)移出時(shí)使用onmouseout事件,清除定時(shí)器。(盒子下半部分類似)
top.onmouseout = function() { clearInterval(intervalId); }
JS全部代碼展示
<script> window.onload = function() { // 獲取標(biāo)簽 var box = document.getElementById('box'); var pic = document.getElementById('pic'); var top = document.getElementById('top'); var bottom = document.getElementById('bottom'); var intervalId, num = 0; // 鼠標(biāo)進(jìn)入上半部分 top.onmouseover = function(){ // 改變pic中的top // 清除定時(shí)器 // alert(0); clearInterval(intervalId); // 設(shè)置定時(shí)器 intervalId = setInterval(function(){ if(num > -600){ num -= 10; pic.style.top = num + "px"; } },20); }; // 鼠標(biāo)移出上半部分 top.onmouseout = function() { clearInterval(intervalId); } // 鼠標(biāo)進(jìn)入下半部分 bottom.onmouseover = function(){ // 改變pic中的top // 清除定時(shí)器 // alert(0); clearInterval(intervalId); // 設(shè)置定時(shí)器 intervalId = setInterval(function(){ if(num < 0){ num += 10; pic.style.top = num + "px"; } },20); }; // 鼠標(biāo)移出下半部分 bottom.onmouseout = function() { clearInterval(intervalId); }; } </script>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS圖片無縫、平滑滾動(dòng)代碼
- js實(shí)現(xiàn)圖片無縫滾動(dòng)特效
- 用js實(shí)現(xiàn)的一個(gè)Flash滾動(dòng)輪換顯示圖片代碼生成器
- JS實(shí)現(xiàn)div內(nèi)部的文字或圖片自動(dòng)循環(huán)滾動(dòng)代碼
- div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼
- js jquery做的圖片連續(xù)滾動(dòng)代碼
- JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果
- JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
- js實(shí)現(xiàn)圖片左右滾動(dòng)效果
- JavaScript實(shí)現(xiàn)長圖滾動(dòng)效果
相關(guān)文章
JS實(shí)現(xiàn)利用兩個(gè)隊(duì)列表示一個(gè)棧的方法
這篇文章主要介紹了JS實(shí)現(xiàn)利用兩個(gè)隊(duì)列表示一個(gè)棧的方法,簡單分析了使用兩個(gè)隊(duì)列表示一個(gè)棧的原理,并結(jié)合具體實(shí)例分析了javascript相關(guān)操作技巧,需要的朋友可以參考下2017-12-12javascript實(shí)現(xiàn)促銷倒計(jì)時(shí)+fixed固定在底部
一個(gè)不錯(cuò)的示例使用javascript實(shí)現(xiàn)的促銷倒計(jì)時(shí)且同時(shí)擁有fixed固定在底部,而且兼容ie6,喜歡的朋友可以參考下2013-09-09從setTimeout看js函數(shù)執(zhí)行過程
這篇文章主要介紹了從setTimeout看js函數(shù)執(zhí)行過程,需要的朋友可以參考下2017-12-12uniapp引用echarts的詳細(xì)步驟(附柱狀圖實(shí)例)
最近在uni-app搭建的微信小程序項(xiàng)目中使用了ECharts,下面這篇文章主要給大家介紹了關(guān)于uniapp引用echarts的詳細(xì)步驟,文中還附有柱狀圖實(shí)例,需要的朋友可以參考下2022-07-07VBS通過WMI監(jiān)視注冊(cè)表變動(dòng)的代碼
似乎有人覺得用VBS監(jiān)視注冊(cè)表很高級(jí)?使用了WMI事件而已,跟《用VBS監(jiān)視進(jìn)程創(chuàng)建和刪除》一樣2011-10-10canvas簡單快速的實(shí)現(xiàn)知乎登錄頁背景效果
本篇文章主要介紹了canvas簡單快速實(shí)現(xiàn)知乎登錄頁背景效果的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)且?guī)шP(guān)閉功能的圖片廣告實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)且?guī)шP(guān)閉功能的圖片廣告,實(shí)例分析了javascript操作鼠標(biāo)事件及html元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02