鼠标响应式淘宝动画效果的实现-js教程-PHP中文网

首页

web前端

js教程

鼠标响应式淘宝动画效果的实现

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="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></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中文网其它相关文章！

推荐阅读：

jQuery添加li标签以及添加属性的方法

jQuery怎样获取标签子元素的值

以上是鼠标响应式淘宝动画效果的实现的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何在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