Example code sharing of javascript motion framework
Add a border to the div, border: 1px solid black
window.onload = function(){
var div = document.getElementById('div1');
div.onclick = function(){
setInterval(function(){
div.style.width = div.offsetWidth-1+'px'
},30)
}
}
Playing with the code, we can find that the width should be decreasing all the time, but what? On the contrary, it has increased. Why is this?
It turns out that there are these problems with the offset series attributes. Let’s correct them below.
1. currentStyle is the current style, but it is not compatible with Google and Firefox
2. getComputedStyle is the calculated style and is not compatible with ie8--
The specific code is as follows:
The passed parameter obj refers to the obtained object, and name is the style attribute
function getStyle(obj,name){
using use using use using ” use ’ s ’s ’ s ’ s ’ s ’ s through through ’s ’ s ‐ ‐ ‐‐‐ to }else{
’, In the next step, we need to evolve the move function.
We need to change the start distance from var start = obj.offsetLeft; to var start = parseFloat(getStyle(obj,name));
Because getStyle(obj,name) obtains a string, you need to use parseFloat to convert the type
The specific code is as follows
var oDiv = document.getElementById('div1');
var timer;function getStyle(obj,name){
//currentStyle: current Styleif(obj.currentStyle){
return obj.currentStyle[name];//Not compatible with Google and Firefox}else{
//getComputedStyle: calculated style
return getComputedStyle(obj,false)[name];//Not compatible with IE8--
}
}
function move(obj,name,target,dur){
var count = parseInt(dur/ 30);//Total times
var start = parseFloat(getStyle(obj,name));//Starting distance
var dis = target - start;//Distance
//Step
var step = dis/count;
var n = 0;//Current step number
timer = setInterval(function(){
n++;
obj.style[name] = start+ n* step +'px';
if(n == count){
clearInterval(timer)
}
},30)
}
oDiv. onclick = function(){
move(oDiv,'width',800,1000)
}
}
Also learned before Fade in and out, we can do this with transparency, so how to do it?
First of all, you need to determine whether there is an opacity attribute. If so, you need to use transparency * 100, because transparency is a decimal. Otherwise, continue to use the default.
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
obj.style[name] = cur +'px';
}The above code can only move in one direction, but I want to go down first 500, and then go left 100, what do you do?
I have learned about callback functions before. If I pass a callback function to him, is it okay?
When moving to the destination, determine whether there is a callback function. If there is, it will be executed, otherwise it will not be executed.
The specific code is as follows
window.onload = function(){
var oDiv = document.getElementById('div1');var timer;
function getStyle( obj,name){//currentStyle: current style
if(obj.currentStyle){return obj.currentStyle[name];//Not compatible with Google and Firefox
}else{//getComputedStyle: calculated style
return getComputedStyle(obj,false)[name];//Not compatible with IE8--
}
}
function move(obj,name,target ,dur,fn){
var count = parseInt(dur/30);//Total number of times
var start = parseFloat(getStyle(obj,name));//Starting distance
var dis = target - start;//Distance
// Step length
// var step =dis/count;
var n = 0;//Current step number
timer = setInterval(function (){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count){
clearInterval(timer)
fn && fn();
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}
待绝....
The above is the detailed content of Example code sharing of javascript motion framework. 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











Evaluating the cost/performance of commercial support for a Java framework involves the following steps: Determine the required level of assurance and service level agreement (SLA) guarantees. The experience and expertise of the research support team. Consider additional services such as upgrades, troubleshooting, and performance optimization. Weigh business support costs against risk mitigation and increased efficiency.

The learning curve of a PHP framework depends on language proficiency, framework complexity, documentation quality, and community support. The learning curve of PHP frameworks is higher when compared to Python frameworks and lower when compared to Ruby frameworks. Compared to Java frameworks, PHP frameworks have a moderate learning curve but a shorter time to get started.

According to benchmarks, for small, high-performance applications, Quarkus (fast startup, low memory) or Micronaut (TechEmpower excellent) are ideal choices. SpringBoot is suitable for large, full-stack applications, but has slightly slower startup times and memory usage.

The lightweight PHP framework improves application performance through small size and low resource consumption. Its features include: small size, fast startup, low memory usage, improved response speed and throughput, and reduced resource consumption. Practical case: SlimFramework creates REST API, only 500KB, high responsiveness and high throughput

Writing clear and comprehensive documentation is crucial for the Golang framework. Best practices include following an established documentation style, such as Google's Go Coding Style Guide. Use a clear organizational structure, including headings, subheadings, and lists, and provide navigation. Provides comprehensive and accurate information, including getting started guides, API references, and concepts. Use code examples to illustrate concepts and usage. Keep documentation updated, track changes and document new features. Provide support and community resources such as GitHub issues and forums. Create practical examples, such as API documentation.

Choose the best Go framework based on application scenarios: consider application type, language features, performance requirements, and ecosystem. Common Go frameworks: Gin (Web application), Echo (Web service), Fiber (high throughput), gorm (ORM), fasthttp (speed). Practical case: building REST API (Fiber) and interacting with the database (gorm). Choose a framework: choose fasthttp for key performance, Gin/Echo for flexible web applications, and gorm for database interaction.

Zero Zero Technology, the pioneer of flying cameras, announced the launch of the Harvard flying cameras X1PRO and X1PROMAX, and launched crowdfunding on Indiegogo in the early morning of August 27, Beijing time. Within 145 minutes of being online, the crowdfunding amount exceeded one million US dollars, creating the first flying camera. New record. As the world's first and most advanced flying action cameras, these two products redefine the flying shooting experience and are especially suitable for sports enthusiasts and professional content creators. Hafu flying cameras X1PRO and X1PROMAX are portable and foldable, eliminating the need for a remote control interactive experience. X1PROMAX: 1/1.3-inch CMOS sensor, customized 7-layer lens. 8K video, 14 stops of dynamic range, 107° wide-angle field of view. Customizable ND filters. X

Java framework learning roadmap for different fields: Web development: SpringBoot and PlayFramework. Persistence layer: Hibernate and JPA. Server-side reactive programming: ReactorCore and SpringWebFlux. Real-time computing: ApacheStorm and ApacheSpark. Cloud Computing: AWS SDK for Java and Google Cloud Java.
