全国服务热线:4008-888-888

公司新闻

小程序界面设计模板_使用JavaScript触发过渡效果的

使用JavaScript触发过渡效果的方法       hover 和 :focus 这样的伪类,我们可以很方便的将元素从一个样式切换到另一个样式,而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡(即在代码中触发过渡)也是可以实现的,下面通过本文给大家介绍下

使用 :hover 和 :focus 这样的伪类,我们可以很方便的将元素从一个样式切换到另一个样式,而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡(即在代码中触发过渡)也是可以实现的。

和普通过渡一样,先创建两个样式规则,一个是元素的初始状态,一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。

下面以一个日夜景图片切换的样例演示:

(1)日景和夜景是两张图片叠在一起的。夜景图初始透明度是0,覆盖在日景图上方。

(2)点击“看夜景”按钮,夜景图透明度逐渐从0过渡到1,看起来画面慢慢变成夜景。

(3)点击“看日景”按钮,夜景图透明度逐渐又从1过渡到0,看起来画面恢复成日景。

在线样例如下:

 !doctype html 
 html lang="en" 
 head 
  /title 
 style 
img {
 position:absolute;
 transition: opacity 5s;
 -webkit-transition: opacity 5s;
.solid {
 opacity: 1;
.transparent {
 opacity: 0;
 /style 
 script 
 function toNight(){
 var nightImage = document.getElementById("nightImage");
 nightImage.className = "solid";
 function toDay(){
 var nightImage = document.getElementById("nightImage");
 nightImage.className = "transparent";
 /script 
 /head 
 body 
 button 看夜景 /button 
 button 看日景 /button 
 div 
 img src="day.png" alt="日景"/ 
 img src="night.png" alt="夜景" id="nightImage" / 
 /div 
 /body 
 /html 

以上所述是小编给大家介绍的使用JavaScript触发过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服