gpt4 book ai didi

javascript - 水平滑动jquery

转载 作者:太空宇宙 更新时间:2023-11-03 18:53:11 26 4
gpt4 key购买 nike

基本上,我目前有一个下拉菜单,当您单击标题时会显示链接。我希望将其更改为水平幻灯片,但我目前的知识仅限于 HTML 和 CSS,换句话说,我不太擅长 jquery/javascript。

是的,这是一个示例(单击类别)http://newsunken.tumblr.com/我希望这样当您单击类别时,类别会从左向右滑动并显示为“CATEGORIES TEES JUMPERS HEADWEAR”抱歉这个菜鸟问题!

$('#box').click(function()
{
$(this).animate({
width: '350px'
}, 300, function() {
// Animation complete.
});
});

<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>

这是我能想到的最好的东西,但不如 newsunken.tumblr.com 上的那个漂亮

最佳答案

这个脚本可以很好地水平滑动,以防我显示整个页面。请注意document.ready函数

<html>
<head>
<title>sliding</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#box').click(function()
{
$(this).animate({width: '350px'}, 300, function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
</body>
</html>

关于javascript - 水平滑动jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14318198/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com