How to use JS to implement simple folding and unfolding animation
This time I will show you how to operate JS to implement a simple folding and unfolding animation. What are the precautions for operating JS to implement a simple folding and unfolding animation? The following is a practical case, let's take a look.
<!DOCTYPE = html>
<html>
<head>
<title>JS折叠展开动画</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.red{
background-color:red;
width:200px;
height:200px;
position:relative;
left:-200px;
top:0px;
}
.blue{
background:blue;
width:20px;
height:50px;
position:absolute;
left:200px;
top:75px;
}
</style>
</head>
<body>
<p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
<script>
window.onload = function(){
var onp = document.getElementById("cf1");
onp.onmouseover = function(){
startmove(0);
}
onp.onmouseout = function(){
startmove(-200);
}
}
var timer ;
function startmove(target){
clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
var onp1 = document.getElementById("cf1");
timer = setInterval(function(){
var speed = 0;
if(onp1.offsetLeft<target){
speed = 10;
}else{
speed = -10;
}
if(onp1.offsetLeft==target){
clearInterval(timer);
}
else{
onp1.style.left = onp1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
Summary:
##1. css part:1. Don’t forget style initialization;
2. Review the reference method of css files; (class reference method)3. Review
Absolute positioning
and relative positioning relationships (parent relationships use relative; child relationships use absolute)
1.
element.style.left& element.offsetLeftDifference: ① The unit of the former is px, which is a string; the unit of the latter is a numerical value;
② For other information, please refer to: http://www.jb51.net/article/43981.htm
2. The idea is not clear enough at first, and the key variables of placing and moving the mouse cannot be abstracted - the target position is just different.
3.
Function parametersAs few as possible (if the goal can be achieved) 4. It is best to set the mouse action object to the parent p, otherwise it will appear Flickering situation (
onmouseoverwas just called, the target was removed, and onmouseout was called again) 5. Pay attention to clearing the timer (①, to prevent unstable speed when moving② , stop moving at the target location)
3. Others:Q: Unblock pop-up windows in Google Chrome?
A: Settings-Advanced Settings-Privacy Settings-Content Settings-Pop-up window to make relevant settings.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use DOM nodes in JSHow to use JS to implement buffering movementThe above is the detailed content of How to use JS to implement simple folding and unfolding animation. For more information, please follow other related articles on the PHP Chinese website!
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
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
The easiest way to query the hard drive serial number
Feb 26, 2024 pm 02:24 PM
The hard disk serial number is an important identifier of the hard disk and is usually used to uniquely identify the hard disk and identify the hardware. In some cases, we may need to query the hard drive serial number, such as when installing an operating system, finding the correct device driver, or performing hard drive repairs. This article will introduce some simple methods to help you check the hard drive serial number. Method 1: Use Windows Command Prompt to open the command prompt. In Windows system, press Win+R keys, enter "cmd" and press Enter key to open the command
Google Pixel 9 Pro Fold phone case exposed: 6.4-inch outer screen, 8.02-inch inner screen
Jun 25, 2024 pm 02:35 PM
According to news on June 25, the source ytechb published a blog post yesterday (June 24), sharing a rendering of the Google Pixel 9 Pro Fold mobile phone case, once again showing the design of the back of this folding screen. According to previous news, Google will release the Pixel 9 series of mobile phones in October this year. In addition to the three phones in the Pixel 9 series, Pixel Fold will also be included in the Pixel 9 series and will be officially named Pixel 9 Pro Fold. The phone case exposed this time comes from accessory manufacturer Torro. The company's UK and US online stores have listed the product phone case and disclosed the design and display size of the phone. The page shows a large number of Pixel 9 Pro Fold phone case renderings
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Samsung Galaxy Z Flip 6 model first revealed: narrower bezels, creases still present
Jun 22, 2024 am 03:28 AM
According to news on June 21, foreign media recently released model photos of Samsung Galaxy Z Flip 6 on the Internet. According to the picture, it can be understood that the borders of Samsung Galaxy Z Flip 6 will be further narrowed, which means that the width of the phone may be reduced in the folded state, and it will also provide a more comfortable grip and portability. Moreover, compared with the previous generation ZFlip5, the model of Galaxy ZFlip6 is more square and the camera module on the back is more prominent. It is expected to use a new camera sensor. However, from the front, the creases of the phone are still relatively obvious, but considering that the leaked model is a model phone, there may be some differences with the real phone, so it is for reference only. In terms of performance configuration, Galaxy
Samsung's 10,000-yuan foldable phone W25 revealed: 5-megapixel under-screen front camera and thinner body
Aug 23, 2024 pm 12:43 PM
According to news on August 23, Samsung is about to launch a new folding mobile phone W25, which is expected to be unveiled at the end of September. It will make corresponding improvements in the under-screen front camera and body thickness. According to reports, Samsung W25, codenamed Q6A, will be equipped with a 5-megapixel under-screen camera, which is an improvement over the 4-megapixel camera of the Galaxy Z Fold series. In addition, the W25’s external-screen front camera and ultra-wide-angle camera are expected to be 10 million and 12 million pixels respectively. In terms of design, the W25 is about 10 mm thick in the folded state, which is about 2 mm thinner than the standard Galaxy Z Fold 6. In terms of screen, the W25 has an external screen of 6.5 inches and an internal screen of 8 inches, while the Galaxy Z Fold6 has an external screen of 6.3 inches and an internal screen of 8 inches.
The biggest shortcoming of foldable screen mobile phones: no core application scenarios
Mar 16, 2024 am 09:04 AM
What we are discussing today is not what a certain product is like, but returning to the topic of "folding screen" itself and exploring the "rationality" of folding screen mobile phones. First, let’s take a look at the market performance of folding screen mobile phones. According to IDC’s latest data report, China’s folding screen mobile phone market will ship approximately 7.007 million units in 2023, a year-on-year increase of 114.5%. Among them, China's foldable screen mobile phone market shipped approximately 2.771 million units in the fourth quarter of 2023, a year-on-year increase of 149.6%. The data does look good, and the growth is also very strong. However, compared with the approximately 270 million smartphone shipments in the Chinese market in 2023, this data is really not enough. In general
IDC estimates that global smartphone shipments in 2024 will be 1.2 billion units: 25 million foldable screen units, a year-on-year increase of 37%
Feb 24, 2024 pm 02:20 PM
According to news on February 24, IDC recently released a market research report, predicting that global smartphone shipments will reach 1.2 billion units in 2024, a year-on-year increase of 2.8%, and will then maintain low single-digit growth by 2028. IDC believes that overall shipments in 2024 will still be below pre-pandemic levels, but the global smartphone market has bottomed out and is beginning to show an upward trend in recovery. IDC believes that the two key factors driving the overall market recovery are the equipment refresh cycle and the growth of demand in emerging markets. There are also two main driving forces. IDC estimates that folding screen mobile phone shipments will reach 25 million units in 2024, a year-on-year increase of 37%; the other is that artificial intelligence (AI) has quickly become a part of the discussion on smartphones, triggering
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
