마우스 반응형 Taobao 애니메이션 효과 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

마우스 반응형 Taobao 애니메이션 효과 구현

php中世界最好的语言

Mar 14, 2018 pm 05:19 PM

생기성취하다효과

이번에는 마우스 반응형 타오바오 애니메이션 효과 구현을 가져오겠습니다. 마우스 반응형 타오바오 애니메이션 효과를 만들 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Jquery淘宝动画</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
 margin: 0;
 padding: 0;
 font-family:"微软雅黑"
}
#box{
 padding-left:20px;
 background-color:#f9f9f9;
 border:1px solid #ccc;
 width:236px;
 height:250px;
 margin:0 auto;
}
#box a{
 width:50px;
 height:60px;
 border:1px solid #ccc;
 float:left;
 margin:10px 10px;
 background-color:#FFFFFF;
 text-align:center;
 font-size:14px;
 position:relative;
}
#box a i{
 position:absolute;
 top:15px;
 left:18px;
}
#box a p{
 position:absolute;
 top:36px;
 left:5px;
}
#box a{
 cursor:pointer;
}
</style>
</head>
<body>
<p id="box">
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
<a><i><img  src="/static/imghwm/default1.png"  data-src="rec_view(1).png"  class="lazy"  / alt="마우스 반응형 Taobao 애니메이션 효과 구현" ></i><p>文字玩</p></a>
</p>
<script>
$(function(){
  $("#box a").mouseenter(function(){
    $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){
      $(this).css({top:"25px"});
      $(this).animate({top:"15px",opacity:"1"},200)
    })
  })
});
</script>
</body>
</html>

이 애니메이션은 마우스를 슬라이드할 때 그라데이션이 위쪽으로 날아가는 시각적 효과를 얻을 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 기사

如何在PHP中实现SEO优化May 20, 2023 pm 01:30 PM

随着互联网的发展，SEO（SearchEngineOptimization，搜索引擎优化）已经成为了网站优化的重要一环。如果您想要使您的PHP网站在搜索引擎中获得更高的排名，就需要对SEO的内容有一定的了解了。本文将会介绍如何在PHP中实现SEO优化，内容包括网站结构优化、网页内容优化、外部链接优化，以及其他相关的优化技巧。一、网站结构优化网站结构对于S

如何在PHP中实现ERP系统May 20, 2023 pm 06:21 PM

随着电子商务和企业管理的发展，许多企业开始寻找更好的方法来处理其日常业务流程。ERP系统是一种能够整合企业各种业务流程的软件工具。它提供了全面的功能，包括生产、销售、采购、库存、财务等方面，帮助企业提高效率、控制成本和提高客户满意度。而在PHP编程语言中，也能够实现ERP系统，这就需要我们掌握一些基本的知识和技术。下面，我们将深入探讨如何在PHP中实现ERP

在PHP中如何实现物联网开发？May 12, 2023 am 11:51 AM

随着物联网技术的发展和普及，越来越多的应用场景需要使用PHP语言进行物联网开发。PHP作为一种广泛应用于Web开发的脚本语言，它的易学易用、开发速度快、可扩展性强等特点，使其成为开发物联网应用的一种优秀选择。本文将介绍在PHP中实现物联网开发的常用技术和方法。一、传输协议和数据格式物联网设备通常使用TCP/IP或UDP协议进行数据传输，而HTTP协议是一个优

如何在PHP中实现CRM系统May 20, 2023 pm 12:31 PM

随着企业的发展，客户管理变得越来越重要。为了提高客户满意度和忠诚度，越来越多的企业采用客户关系管理系统（CRM）来帮助其管理客户关系。而PHP是一种流行的编程语言，因其简单易学、灵活和强大而被广泛应用于Web开发。那么，如何在PHP中实现CRM系统呢？本文将为您介绍实现CRM系统的步骤和技巧。Step1：需求分析在开始开发CRM系统之前，您需要进行需求分析

如何在PHP中实现轮播图May 22, 2023 am 08:25 AM

随着互联网的发展，轮播图已经成为了网页设计中必不可少的一部分。在很多网页中，轮播图经常被用作展示企业文化、最新产品或是推广活动等场景。本篇文章将会分享如何使用PHP来实现轮播图的功能。一、轮播图的概念轮播图是网页中一种常见的视觉效果，一般由多个图片组成，在页面中自动或手动进行切换，展示多个内容。可以添加符合业务要求的动画效果，有助于引起用户的关注和提高网站的

在PHP中如何实现智能合约？May 12, 2023 am 08:09 AM

智能合约（SmartContract）是一种基于区块链的自动化交易程序，可以实现自动化执行、验证和执行交易。智能合约可以减少交易中的人为干扰，提高交易的安全性和效率。在不同的区块链中，智能合约的实现方式略有不同。本文将介绍在PHP中如何实现智能合约。PHP是一种广泛使用的编程语言，特别适合Web开发。PHP有着成熟的开源生态系统，以及许多可靠的框架和库。在

如何在PHP中实现验证码May 20, 2023 am 11:31 AM

随着互联网的不断发展，越来越多的网站需要使用验证码来保证安全性。验证码是一种借助人类能力而无法被计算机破解的认证技术，广泛应用于网站注册、登录、找回密码等功能中。下面将介绍如何使用PHP实现验证码功能。一、生成验证码图片验证码图片的生成是验证码功能的核心，需要生成一个随机字符，并将其渲染为图像展示给用户。在PHP中，可以使用GD库来生成图片。GD库是一种用于

PHP微信开发：如何实现JSAPI支付May 13, 2023 pm 07:21 PM

随着移动互联网的发展，微信已经成为了人们生活中不可或缺的一部分，越来越多的商家选择在微信平台上开展业务。实现微信支付功能对于商家来说是非常必要的。本文将介绍如何使用PHP实现JSAPI支付。首先，我们需要了解什么是JSAPI支付。JSAPI是微信公众号支付功能的一种，通过JS调用微信支付接口实现支付。JSAPI支付的优点在于用户只需要在微信中进行支付，不需要

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.