路峰 2011-10-07 14:10
浏览 360
已采纳

jquery横向切换文字

如何用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> $(&quot;#left&quot;).click(function(){<br> leftsize = leftsize - 50;<br> $(&quot;#text&quot;).animate({&quot;left&quot;: leftsize});<br> });</p> <pre><code> $(&quot;#right&quot;).click(function(){ if(leftsize &lt; 0){ leftsize = leftsize + 50; $(&quot;#text&quot;).animate({&quot;left&quot;: leftsize}); } }); }); &lt;/script&gt; </code></pre> <p></head><br> <body></p> <div> <div id="left" class="btn">&lt;&lt;</div> <div class="wrap"> <div id="text" class="text">如何用jquery实现像图片浏览一样，在左右两侧设置向左向右的按钮图标，通过单击向左向右的图标切换显示图片的方式显示一段文字，由于显示文字区域长度有限，超出范围的文字被隐藏起来，通过单击左右两侧的向左向右的图标按钮进行影藏的文字切换显示出来！只希望用jquery简单实现，不要引入其他插件！！ </div> <p></div></p> <div id="right" class="btn">&gt;&gt;</div> <div style="clear: both;"></div> <p></div><br> </body><br> </html><br> [/code]</p>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘