<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myshow(targetW,targetH) {
lockSceen();
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.width = 0;
div.style.height = 0;
div.style.left = window.screen.width / 2;
div.style.top = window.screen.height / 2 - 150;
var divContent = '<div onmousedown="move(this)" style="width:570px;height:30px;background:#7294f7;padding-top:10px;padding-left:10px;cursor:move;">';
divContent = divContent + '<font color="black" size="4px" style="font-weight:bold">重要服务器配置</font>';
divContent = divContent + '</div>';
divContent = divContent + '<div style="background:#91c0ff; width:580px;height:370px"></div>';
div.innerHTML = divContent;
div.style.overflow = 'hidden';
document.body.appendChild(div);
window.setInterval(function() {
if(parseInt(div.style.width) < targetW) {
div.style.width = parseInt(div.style.width) + 70;
div.style.left = window.screen.width / 2 - parseInt(parseInt(div.style.width) / 2);
}
if(parseInt(div.style.height) < targetH) {
div.style.height = parseInt(div.style.height) + 60;
div.style.top = (window.screen.height / 2 - 150) - parseInt(parseInt(div.style.height) / 2);
}
},15);
}
function move(childDiv) {
var div = childDiv.parentNode;
div.setCapture();
var offsetX = event.offsetX;
var offsetY = event.offsetY;
div.onmousemove = function() {
div.style.position = 'absolute';
div.style.left = event.clientX - offsetX;
div.style.top = event.clientY - offsetY;
}
div.onmouseup = function() {
div.releaseCapture();
div.onmousemove = null;
div.onmouseup = null;
}
}
function lockSceen() {
div = document.createElement('div');
div.id = 'lockDiv';
div.style.position = 'absolute';
div.style.width = window.screen.width;
div.style.height = window.screen.height;
div.style.top = '0px';
div.style.left = '0px';
div.style.background="#33393C";
div.style.filter="alpha(opacity=10)";
document.body.appendChild(div);
window.setInterval(function() {
if(div.filters.alpha.opacity < 80) {
div.filters.alpha.opacity += 10;
}
},10);
}
</script>
</head>
<body>
<center>
<a href="#" onclick="return myshow(580,400)">动画效果</a>
</center>
</body>
</html>
分享到：
相关推荐
<div class="animal-card"> <img src="animal-photo.jpg" alt="Animal Photo"> <h2>Animal Name <p>Breed: Labrador Retriever <p>Age: 2 years </div> ``` 在这个例子中，`<div>`定义了一个卡片容器，`<img>`是...
HTML元素如`<img>`和`<div>`会被用作展示动物图片的基础，而CSS将被用来调整这些元素的布局和视觉效果。 响应式图库的设计还可能涉及到图片懒加载（Lazy Loading）技术，以提高页面加载速度。这种技术允许图片在...
10. **内联元素与块级元素**：了解元素的显示类型，如`<a>`、`<img>`是内联元素，`<p>`、`<div>`是块级元素，这对于布局至关重要。 在这个项目中，学习者可能通过创建不同类别的动物卡片，比如哺乳动物、鸟类、爬行...
例如：<#list animals as animal>${animal.name} is ${animal.price} units </#list> 输出的结果：mouse is 50 units elephant is 5000 units python is 4999 units 三、FreeMarker 内置函数 ...
<div v-on:mouseover="showAnimal" v-on:mouseout="hideAnimal"> <!-- 动物元素 --> </div> ``` 在上述代码中，`showAnimal`和`hideAnimal`是两个方法，它们会被绑定到对应的事件上。这两个方法可以改变组件的...
5. `<div>`: 容器元素，用于组织内容或应用样式。 6. `<img>`: 图片标签，通过`src`属性引用图像。 7. `<h1>`-`<h6>`: 标题标签，不同级别表示不同的重要性。 8. `<p>`: 段落标签，用于展示文本内容。 9. `<ul>` 和 ...
- **获取自定义属性**：IE可以通过元素属性或索引方式(`div1.value`)，Firefox使用`getAttribute("value")`。 - **`document.getElementsByName()`与`document.all[name]`：IE两者都不能获取div元素，Firefox可以...
var div = new Element('div'); // 添加类 Element.addClassName(div, 'myClass'); // 删除类 Element.removeClassName(div, 'myClass'); // 查找元素 var elements = $$('div.myClass'); ``` ### 4. AJAX ...
1. **HTML 结构**：学生需要了解和掌握基本的 HTML 元素，如 `<html>`，`<head>`，`<body>`，`<div>`，`<img>`，`<h1>`-`<h6>`，`<p>`，`<a>` 等，用于构建动物交易卡的布局和内容。 2. **属性和属性值**：在 HTML ...
在`Mammal`构造函数中，`Animal.call(this, name)`确保了`Animal`的构造逻辑被正确执行，使得`Mammal`实例继承了`Animal`的属性和方法。 此外，`call`方法还常用于数组聚合方法的实现，例如`Array.prototype....
- `(5)` `getElementByName`在IE和FF中处理div元素的方式不同。 - `(6)` `input.type`属性，IE只读，FF可读写。 - `(7)` `innerText`和`textContent`，`outerHTML`，IE支持`innerText`和`outerHTML`，FF支持`...
<div id="elementA">A</div> </div> ``` #### 题目二：Arguments 对象转数组 **题目描述**：函数中的 `arguments` 不是一个真正的数组。请提供一种方法将其转换为真正的数组。 **解决方案**： ```javascript ...
例如，我们可以定义一个变量`animal`，然后在模板中使用`#{animal.name}`显示动物的名称。 2. 条件语句：Pug提供`if`和`else`语句来处理条件逻辑。比如，显示动物是否濒临灭绝：`if animal.endangered`显示相关信息...
例如，定义一个基类`Animal`以及两个子类`Dog`和`Cat`： ```java public abstract class Animal { public void makeSound() { System.out.println("Some sound"); } } public class Dog extends Animal { @...
如果第一个参数是一个包含格式化占位符的字符串，如`console.log("The %s jumped over %d tall buildings", animal, count)`，其中`s`和`d`是占位符，对应后面的参数`animal`和`count`，这种格式化输出类似C语言的...
int div = 5 / 0; // 这将抛出ArithmeticException } catch (ArithmeticException e) { System.out.println("Divide by zero error."); } finally { System.out.println("This will always be printed."); } ``` ...
echo "</div>"; 在PHP中，设计模式是一种解决常见问题的模板，它们是经过验证的最佳实践，可以帮助开发者编写可维护、可扩展且易于理解的代码。本文将深入探讨两种常见的工厂模式：简单工厂模式和工厂方法模式。 1....
console.log(`The ${type} says ${says} to ${animal}`); ``` 注意，导入时大括号内的变量名需与导出时的名称保持一致。如果要导入默认值，可以写在大括号外部。如果想要重命名导入的变量，可以这样做： ```...
Ext.fly('div1').update(new Date().toLocaleTimeString()); if (i > 10) { // 停止条件 Ext.TaskManager.stop(task); } i++; } }; // 启动任务 Ext.TaskManager.start({ run: task.run, interval: 1000 });...