外部引用js效果的网站
时间: 2023-06-26 10:08:36 浏览: 50
以下是一些外部引用 JavaScript 的网站:
1. Google Fonts:https://fonts.google.com/
2. jQuery 官网:https://jquery.com/
3. Bootstrap 官网:https://getbootstrap.com/
4. Font Awesome:https://fontawesome.com/
5. D3.js:https://d3js.org/
6. React 官网:https://reactjs.org/
7. Angular 官网:https://angular.io/
8. Vue.js 官网:https://vuejs.org/
9. Moment.js:https://momentjs.com/
10. Underscore.js:https://underscorejs.org/
相关问题
vue中videojs宽度和高度随着外部div变化而变化
要实现这个效果,可以使用Vue的计算属性(Computed)和watch来监听外部div的宽度和高度的变化。
1. 首先,在组件中定义一个计算属性,用来获取外部div的宽度和高度:
```
computed: {
containerSize() {
return {
width: this.$refs.container.offsetWidth,
height: this.$refs.container.offsetHeight
};
}
},
```
这里使用了 `$refs` 来获取外部div的实际宽度和高度。
2. 然后,在组件中添加watch监听外部div的变化:
```
watch: {
containerSize() {
this.player.width(this.containerSize.width);
this.player.height(this.containerSize.height);
this.player.responsive(true);
}
},
```
这里使用了 `player` 对象,它是 `videojs` 提供的一个对象,用来操作video元素。在watch中,我们监听外部div的变化,并设置`player`的宽度和高度等于外部div的宽度和高度。最后,调用 `player.responsive(true)` 方法来让video元素自适应外部div的变化。
3. 最后,在组件的模板中,使用`ref`来引用外部div,并把video元素放到外部div中:
```
<template>
<div ref="container">
<video ref="player" class="video-js"></video>
</div>
</template>
```
这样,当外部div的宽度和高度变化时,`videojs` 中的video元素也会跟着自适应变化。
上述菜单栏变宽如何通过html引用
如果你想通过 HTML 引用来实现菜单栏变宽的效果,你可以使用内联事件处理程序或者外部 JavaScript 文件来实现。以下是两种方法的示例:
方法一:使用内联事件处理程序
HTML 代码:
```html
<div id="menu-container" onmouseover="expandMenu()" onmouseout="resetMenu()">
<!-- 菜单栏内容 -->
</div>
```
JavaScript 代码:
```javascript
function expandMenu() {
var menuContainer = document.getElementById("menu-container");
menuContainer.style.width = "400px"; // 扩展宽度
}
function resetMenu() {
var menuContainer = document.getElementById("menu-container");
menuContainer.style.width = "200px"; // 默认宽度
}
```
在这个方法中,我们在菜单栏的 `onmouseover` 和 `onmouseout` 事件上添加了内联事件处理程序。当鼠标悬停在菜单栏上时,`expandMenu()` 函数会被调用,从而使菜单栏的宽度变宽;当鼠标离开菜单栏时,`resetMenu()` 函数会被调用,将菜单栏的宽度恢复为默认宽度。
方法二:使用外部 JavaScript 文件
HTML 代码:
```html
<div id="menu-container">
<!-- 菜单栏内容 -->
</div>
<script src="menu.js"></script>
```
JavaScript (menu.js) 代码:
```javascript
var menuContainer = document.getElementById("menu-container");
menuContainer.addEventListener("mouseenter", function() {
menuContainer.style.width = "400px"; // 扩展宽度
});
menuContainer.addEventListener("mouseleave", function() {
menuContainer.style.width = "200px"; // 默认宽度
});
```
在这个方法中,我们将 JavaScript 代码放在一个外部的 JavaScript 文件 `menu.js` 中,并通过 `<script>` 标签引用该文件。JavaScript 代码与之前的示例相同,用于监听鼠标进入和离开事件,并根据事件触发来改变菜单栏的宽度。
无论你选择哪种方法,都需要确保在 HTML 中正确引用 JavaScript 文件,并且将 JavaScript 代码放在正确的位置。希望这次的回答能够帮助到你。如果还有其他问题,请随时提问。