Question

我通常习惯使用jQuery，但是我试图将较低的脚本编写为经典的香草JS。它应该在鼠标悬停时放大一个元素。看来我做错了，因为当我使用鼠标悬停一个元素时，它不起作用。帮我弄清楚我在哪里出错。

<script>
window.onload = function() {
var calcal = document.getElementById("calcal");
TweenMax.to(".slvun, .slvanj, .rndbtn", 8, {opacity:1, delay:6});
TweenMax.to(".slvun", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
TweenMax.to(".slvanj", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
var ttt = new TimelineMax({repeat:-1});
ttt.to(".rndbtn", 2, {fill: '#F15D2E'})
ttt.to(".rndbtn", 2, {fill: '#EEBC27'}, "+=1")
ttt.to(".rndbtn", 2, {fill: '#8DC641'}, "+=1")
ttt.to(".rndbtn", 2, {fill: '#F15D2E'}, "+=1")

const buttonTL = new TimelineMax({paused: true, reversed: true})
  buttonTL.to('.rndbtn', .2, {scale: 5.0, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)})


calcal.onMouseOver = function(){
  buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
};
}
</script>

Answer 1

尝试添加addEventListener。这应该可以解决问题。您需要添加一个鼠标悬停键，并同时保留它们。

# Load Modules
import tensorflow as tf
import numpy as np
import math, random
import matplotlib.pyplot as plt
from pylab import meshgrid,cm,imshow,contour,clabel,colorbar,axis,title,show
from mpl_toolkits.mplot3d import Axes3D

# Create the arrays x and y that contains the inputs and the outputs of the function to approximate
N = 40
a = 0.0;
b = 2.0*np.pi;
xin = np.arange(a, b, (b-a)/N).reshape((N,1))
yin = np.arange(a, b, (b-a)/N).reshape((N,1))

X_tmp,Y_tmp = meshgrid(xin,yin)
X = np.reshape(X_tmp,(N**2,1))
Y = np.reshape(Y_tmp,(N**2,1))

# This is the exact second partial of Z = sin(x+y) with respect to x
Zxx = -np.sin(X_tmp+Y_tmp)


# Create the arrays x, y, and z that contains the inputs and the outputs of the function to approximate
x = tf.placeholder('float', [N**2,1])
y = tf.placeholder('float', [N**2,1])
z = tf.sin(x+y)

var_grad = tf.gradients(tf.gradients(z,x), x)

with tf.Session() as session:
    var_grad_val = session.run(var_grad,feed_dict={x:X, y:Y}) 
    grad1 = np.reshape(var_grad_val,(N,N))

    fig = plt.figure()
    ax = Axes3D(plt.gcf())
    surf = ax.plot_surface(X1, X2, grad1, cmap=cm.coolwarm)
    plt.show()

    fig = plt.figure()
    ax = Axes3D(plt.gcf())
    surf = ax.plot_surface(X1, X2, abs(grad1-Zxx), cmap=cm.coolwarm)
    plt.show()

下面是一个示例https://codepen.io/anon/pen/omqmNx

有关更多参考，https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

Answer 2

您不需要JS，只需CSS。

假设您有一个id = “elem”元素

CSS为：

#elem:hover {
    transform: scale (1.2);
}

比例因子可以进行调整，直到放大到您喜欢的程度为止

Answer 3

这是一个解决方案。但是问题是，如果将鼠标移到clickmebtn上会产生抽搐，因为“单击此处”文本，“提醒我”文本和彩色圆圈之间存在间隙。您必须解决此问题（例如将整个clickmebtn放在div内，并在div的{{1}}上运行hover）。但是您可以从下面的代码开始：

function mouseOver

// TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:0});
// TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
// TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
// var ttt = new TimelineMax({repeat:-1});
// ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
// ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
// ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
// ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")

// const buttonTL = new TimelineMax({paused: true, reversed: true})
// buttonTL.to('.roundbutton', .2, {scale: 4.8, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)});

// $('#clickmebtn').hover(function () {
//   buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
// });

window.onload = function() {
    document.getElementById("clickmebtn").addEventListener("mouseover", mouseOver);
    TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:0});
    TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
    TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
    var ttt = new TimelineMax({repeat:-1});
    ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
    ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
    ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
    ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")

    const buttonTL = new TimelineMax({paused: true, reversed: true})
      buttonTL.to('.roundbutton', .2, {scale: 4.8, transformOrigin:"50% 50%", opacity: 1, ease: Back.easeOut.config(1.7)})

    function mouseOver(){
      buttonTL.reversed() ? buttonTL.restart() : buttonTL.reverse();
    };
}

#clickmebtn {
  width:10%;
  overflow:visible;
}

将鼠标悬停在香草JS而不是jQuery上

3 个答案: