路峰 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#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题：CANOpen的PDO同步传输问题