如何从左向右滑动文本和图像并具有滑动效果[关闭]

2024-05-12

我正在创建一个网页,我需要以这样的方式滑动文本和图像:使用 jquery/javascript 单击按钮时图像从左侧滑动,然后文本从右侧滑动。

请检查这个slider http://www.intellicompute.com/我希望我的文字和图像像这样滑动

请建议我必要的js/JQuery


示例jQuery API http://api.jquery.com/animate/ and demo http://jsfiddle.net/8HrpE/

教程丹麦网 http://daneden.me/animate/

he text and image in such a way that image slides from left and then the text slides from right on clicking a button by using jquery/javascript

您将其放入 div 内,这是一个解决方案:

<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><button id="go">Run »</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从左向右滑动文本和图像并具有滑动效果[关闭] 的相关文章

随机推荐

  • Spyder 和 Jupyter 有什么区别?

    我正在学习Python用于数据科学 但我的问题是我仍然不明白Spyder和Jupyter之间的区别 我希望你们能帮助我理解其中的区别 我将不胜感激 以下只是这两个工具的基本摘要 Jupyter 是一个非常流行的用于数据分析的应用程序 它是一
  • JAX-WS:有状态 WS 在独立进程中失败

    我在 Tomcat 上部署了一个有状态的 Web 服务 它由工厂服务和主要 API 服务组成 并且工作得很好 工厂服务将 W3CEndpointReference 返回到主 API 实例 客户端使用会话 现在 我尝试将相同的服务作为独立应用
  • 如果 DirectoryInfo.GetFiles().Length 超过 Int32.MaxValue 怎么办?

    由另一个question https stackoverflow com questions 3766540 error on maximum number of files 3767265 3767265关于文件夹中的最大文件数 我注意到
  • Python argparse 作为函数

    以这种方式获取命令行参数有什么本质上的错误吗 我的意思是把参数解析放入它自己的函数中 它会被认为是非 Pythonic 或更严重吗 usr bin python import argparse def getArgs argv None p
  • 表达式 >.Compile() 的逆向?

    因为我们可以 Expression
  • 按 Enter 键提交消息?

    我正在开发一个基于本教程使用 Meteor 构建的聊天应用程序 http code tutsplus com tutorials real time messaging for meteor with meteor streams net
  • 在 Hive 中获取数据的交集

    我在配置单元中有以下数据 userid cityid 1 15 2 15 1 7 3 15 2 8 3 9 3 7 我只想保留具有 cityid 15 和 cityid 7 的用户 ID 在我的示例中 它将是用户 ID 1 和 3 我试过
  • 如何在 C# 中使用窗口窗体创建动态下拉列表

    我正在尝试为朋友的手机商店构建一个简单的库存程序 我想使用C 并访问数据库来存储数据 DB 将有 2 个主要列表 devices 品牌 型号 颜色 价格 库存 最小库存 parts 品牌 型号 描述 库存 最小库存 GUI 将使用多个下拉列
  • yaml / yaml 多行转义序列中的 Markdown?

    是否可以在 yaml 中存储未转义的 Markdown 文档 我测试过 key markdown text block that could have any combination of line breaks gt etc etc 这是
  • iOS模拟器找不到SDK,可能需要重新安装SDK

    在这里 我遇到了另一个问题 今天正在开发一个 iOS 应用程序 当我运行 iPhone 5 0 模拟器的应用程序时 仅在该模拟器上遇到了一些奇怪的问题 当我尝试一次又一次地运行该模拟器时 我的 MacBook 屏幕上出现了两个弹出警报窗口
  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c
  • 如何查询多对多表(一个表的值成为列标题)

    给定此表结构 我想展平多对多关系 并将一个表的名称字段中的值设置为列标题 并将同一表中的数量设置为列值 目前可行的想法是将值放入字典 哈希表 中并用代码表示这些数据 但我想知道是否有 SQL 方法可以做到这一点 我还使用 Linq to S
  • 代码编译期间遇到警告消息“使用或覆盖已弃用的 API”

    我编译了我的程序并收到以下错误 我该如何解决呢 Note ClientThreadClients java uses or overrides a deprecated API Note Recompile with Xlint depre
  • 动画图像视图

    目前我正在开发一款游戏 这是我的游戏的详细信息 用户应选择正确的图像对象 我希望图像从左到右加速 当他们到达终点时 他们应该再次出现在活动中 这是我正在处理的屏幕截图 我有 5 个图像视图 它们应该会加速 您有此类动画的示例代码吗 非常感谢
  • 将光栅图像转换为矢量图形的建议

    如果一个人想要将大量光栅图像批量转换为矢量图形 是否有任何工具可以很好地做到这一点 例如 考虑任何具有标准形状 椭圆形 矩形 和文本的图表 Inkscape 用途 http www inkscape org doc tracing tuto
  • 如何修复在 Windows 终端中启动“powershell.exe”时出现的错误 0x800700c1?

    最近我在 Windows 终端中遇到以下错误 error 0x800700c1 when launching C Users Dry C Desktop AppData Local Microsoft WindowsApps Microso
  • Delphi中的抽象类

    我正在使用一个具有许多抽象类的组件套件 现在我想应用多态性 但在创建对象时收到错误抽象类 即使我不需要 我是否应该重写所有虚拟方法 有什么解决方法或解决方案吗 为了创建类的实例 您需要重写所有声明为虚拟抽象的方法 即使您不使用它们 如果您确
  • ListView ColumnHeader.Name 为空字符串

    我创建了一个 WinFormsListView作为具有四列的详细视图 我在设计器中为每一列指定了名称 但是在访问每一列时ColumnHeader通过ListView Columns属性 我找到每个ColumnHeader Name是一个空字
  • TextBoxFor @Value(大写)而不是@value

    这只是出于好奇 为什么这段代码有效 Html TextBoxFor x gt x Age new Value 0 这不是 Html TextBoxFor x gt x Age new value 0 请注意其中的大写 V Value I k
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi