>웹 프론트엔드 >HTML 튜토리얼 >간단한 유사 효과를 얻으려면 html+css+js를 사용하세요.

간단한 유사 효과를 얻으려면 html+css+js를 사용하세요.

王林
王林앞으로
2020-11-06 16:31:544229검색

간단한 유사 효과를 얻으려면 html+css+js를 사용하세요.

다른 웹사이트의 기사를 검색하다 보면 기사 마지막 부분에 유사한 수집 효과가 나타나는 것을 종종 볼 수 있는데, 이는 매우 흥미롭습니다. 오늘 우리는 이 효과를 얻기 위해 스스로 할 것입니다.

(학습 동영상 추천: html 동영상 튜토리얼)

css 스타일

.like{ 
font-size:66px;  color:#ccc; cursor:pointer;}
.cs{color:#f00;}

html 콘텐츠

<p class="like">&#10084;</p>

js 코드

<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {            
            $(".like").click(function () {
                $(this).toggleClass(&#39;cs&#39;);                
            })
        })
    </script>

효과 표시:

간단한 유사 효과를 얻으려면 html+css+js를 사용하세요.

요약

참고: 실제 작업과 연결됨 데이터의 백그라운드 작업은 여전히 ​​간단합니다.

추천 튜토리얼: html 튜토리얼

위 내용은 간단한 유사 효과를 얻으려면 html+css+js를 사용하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제