如何用jquery实现像图片浏览一样,在左右两侧设置向左向右的按钮图标,通过单击向左向右的图标切换显示图片的方式显示一段文字,由于显示文字区域长度有限,超出范围的文字被隐藏起来,通过单击左右两侧的向左向右的图标按钮进行影藏的文字切换显示出来!只希望用jquery简单实现,不要引入其他插件!!
你要的效果出来了,晕死了,一年没写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>
上面我给的代码,不知道是不是ITEye的BUG啊。。
居然 leftsizeleftsize = leftsize - 50;
请改成 leftsize = leftsize - 50;
真是ITEye的BUG啊,你直接用 Html代码 右边的第一个图标进行复制HTML代码,是正常的,不知道为什么看起来居然有两个 leftsizeleftsize