如何用jquery实现像图片浏览一样，在左右两侧设置向左向右的按钮图标，通过单击向左向右的图标切换显示图片的方式显示一段文字，由于显示文字区域长度有限，超出范围的文字被隐藏起来，通过单击左右两侧的向左向右的图标按钮进行影藏的文字切换显示出来！只希望用jquery简单实现，不要引入其他插件！！
3条回答 默认 最新
fire4cwy 2011-10-07 20:40关注你要的效果出来了，晕死了，一年没写CSS了，忘的差不多了，饭都还没吃。你把下面的代码制成 html，就可以使用。
虽然用的是 jquery-1.4.2.min.js，但没用多少方法，主要靠CSS。
另外 firefox 和 ie 6+ 都Ok了。
哎，汗死我了……[code="html"]
jQuery 左右移文字
<br> div {height: 20px;line-height: 20px;z-index: 1}<br> .btn {float: left; width: 40px; text-align: center; background-color: #cccccc;z-index: 3}<br> .wrap {position: relative;width: 300px;float: left;z-index:1;overflow:hidden;}<br> .wrap .text {position: absolute; left: 0; top: 0;z-index: 2;overflow:hidden;}<br>
<br> $(function(){<br> var leftsize = 0;<br> $("#left").click(function(){<br> leftsize = leftsize - 50;<br> $("#text").animate({"left": leftsize});<br> });</p> <pre><code> $("#right").click(function(){ if(leftsize < 0){ leftsize = leftsize + 50; $("#text").animate({"left": leftsize}); } }); }); </script> </code></pre> <p></head><br> <body></p> <div> <div id="left" class="btn"><<</div> <div class="wrap"> <div id="text" class="text">如何用jquery实现像图片浏览一样，在左右两侧设置向左向右的按钮图标，通过单击向左向右的图标切换显示图片的方式显示一段文字，由于显示文字区域长度有限，超出范围的文字被隐藏起来，通过单击左右两侧的向左向右的图标按钮进行影藏的文字切换显示出来！只希望用jquery简单实现，不要引入其他插件！！ </div> <p></div></p> <div id="right" class="btn">>></div> <div style="clear: both;"></div> <p></div><br> </body><br> </html><br> [/code]</p>本回答被题主选为最佳回答 , 对您是否有帮助呢?解决评论 打赏无用 1举报
分享
- 2016-12-27 15:14回答 2 已采纳 ``` var rows = [ { "title": "第一条title", "time": "2008/08/27 05:30:45", "data": "这是数据"
- 2021-11-14 16:39回答 1 已采纳 用show/hide来做，不用slideToggle
- 2023-04-08 16:46回答 7 已采纳 你遇到的问题是CORS（跨域资源共享）策略阻止了对本地文件系统的访问。浏览器通常会限制跨域请求以保护用户的安全。在这种情况下，你尝试从本地文件系统（使用 'file://' 协议）访问一个资源，而浏览
- 2022-11-21 11:31这个项目中的“jQuery横向弹性图片切换”不仅展示了如何使用jQuery和CSS创建动态的图片切换效果，还提供了关于前端开发中动画和交互设计的实践经验。开发者可以根据需求调整代码，以适应不同场景，如改变切换速度、...
- 2022-07-04 22:02回答 2 已采纳 问题主要是bootstrap框架把select 元素替换了,页面上显示的不是select 元素了要用bootstrap框架自己的设置下拉框的方法 $("#uesInsLevel").selectpic
- 2022-05-07 17:28回答 3 已采纳 if（bb==0){ $("#aa").show()； }else if(bb==1){ $("#aa").hide()； }
- 2023-02-11 23:54回答 3 已采纳 这是jQuery的绑定ready事件，页面刚加载完毕就会自动触发，完整写法是： $(document).ready(function(){ //do something }); 简化写法是：
- 2022-11-24 12:30在这个“jQuery圆形横向图片轮播图切换”项目中，我们将探讨如何利用这些技术来创建一个独特且吸引人的用户体验。 首先，CSS（Cascading Style Sheets）在构建这个轮播图中起着至关重要的作用。通过CSS，我们可以...
- 2022-10-22 11:54回答 1 已采纳 1、这就好比问现在还有必要学习js那些原生dom操作吗，一个逻辑，对吧 因为现在不论是元素选择器，还是一些动画，ajax都有了很好的替代品，而且现在流行的框架vue react里也都有了对应的解
- 2018-03-21 07:04回答 9 已采纳 你是想做图表展示吧？ 给你个合理的方案：js参数中data的值 通过后台循环list拼接，后台给出结果就行。结果放到input中，js取值 直接引用就行。 前台js也能取，相对复杂一些。前台只能
- 2022-05-29 20:19回答 3 已采纳 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> <
- 2012-11-12 14:08综上所述，基于JQuery的Banner大图片横向切换效果涉及到的选择、操作、动画、事件处理和响应式设计等多个方面，是Web前端开发中一个典型的实践案例，有助于提升网页的互动性和美观度。通过学习和实践这个案例，...
- 2023-09-25 13:43《jQuery横向手风琴图片轮播切换代码》 在网页设计和开发中，动态效果的运用可以提升用户体验，其中图片轮播和手风琴效果尤为常见。本资源提供了一个基于jQuery实现的横向手风琴式图片轮播切换的代码，非常适合用于...
- 2022-11-21 11:31《jQuery实现横向与纵向手风琴切换的前端技术解析》 在前端开发中，交互性和用户体验是至关重要的因素。手风琴效果作为一种常见的UI设计模式，可以有效地节省页面空间，提高用户浏览效率。本篇文章将深入探讨如何...
- 2022-11-26 11:03【迅雷jQuery横向擦除焦点图】是一款基于jQuery库实现的动态效果，它在网页上创建了一种引人注目的图像展示方式。这种焦点图通常用于网站的首页或产品展示区域，通过平滑的横向往返动画吸引用户的注意力，同时提供多...
- 没有解决我的问题, 去提问
悬赏问题
- ¥30 STM32 INMP441无法读取数据
- ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
- ¥15 用visualstudio2022创建vue项目后无法启动
- ¥15 x趋于0时tanx-sinx极限可以拆开算吗
- ¥500 把面具戴到人脸上，请大家贡献智慧
- ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
- ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
- ¥30 c#打开word开启修订并实时显示批注
- ¥15 如何解决ldsc的这条报错/index error
- ¥15 VS2022+WDK驱动开发环境