路峰 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条)

报告相同问题?

悬赏问题

  • ¥20 SQL server表计算问题
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题
  • ¥20 Oracle替换.dbf文件后无法连接,如何解决?(相关搜索:数据库|死循环)
  • ¥15 数据库数据成问号了,前台查询正常,数据库查询是?号
  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
  • ¥15 彩灯控制电路,会的加我QQ1482956179
  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)
  • ¥15 如何解决MIPS计算是否溢出