> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 마우스 클릭 정지 효과를 구현합니다.

jQuery는 마우스 클릭 정지 효과를 구현합니다.

php中世界最好的语言
풀어 주다: 2018-04-28 14:05:14
원래의
2287명이 탐색했습니다.

이번에는 마우스 클릭 호버 효과를 구현하기 위한 jQuery를 가져오겠습니다. jQuery에서 마우스 클릭 호버 효과를 구현하기 위한 주의사항은 무엇입니까? 다음은 실제 사례입니다.

마우스를 한 번 클릭하면 아래와 같이 하트 ❤가 마우스 위에 표시되고 위쪽으로 천천히 사라지는 효과가 나타납니다.

정말 멋지지 않나요? 코드를 직접 붙여넣으세요.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<style type="text/css">

*{

  margin: 0px;

  padding: 0px;

}

</style>

<script type="text/javascript">

$(function(){

  var height=$(window).width();

  $('#test').css({

    'height':height,

  });

  var n=1;

  $('#test').click(function(e){

    if(n%2==0){

      var $i=$('<b></b>').text('你点击了一下');//双数显示这个

    }else{

      var $i=$('<b></b>').text('❤');//单数显示这个

    }

    n++;

    var x=e.pageX,y=e.pageY;//获取鼠标点击的位置坐标

    $i.css({

        "z-index": 9999,

        "top": y - 20,

        "left": x,

        "position""absolute",

        "color"'red',

        "font-size": 14,

      });

      $("body").append($i);

      $i.animate({

        "top": y - 180,

        "opacity": 0

      }, 1500, function() {

        $i.remove();

      });//设置动画

  });

});

</script>

</head>

<body>

<p id="test">

</p>

</body>

</html>

로그인 후 복사

이 기사의 사례를 읽었을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vuex에서 mapState 및 mapGetters 사용에 대한 자세한 설명

vuex 사용 단계에 대한 자세한 설명(코드 포함)

위 내용은 jQuery는 마우스 클릭 정지 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿