1

对不起,我的标题不是很清楚。如果有人可以帮助我,我正在徘徊。我正在制作一个游戏,我想制作一个包含一个数字的数组(告诉你一些东西值多少钱),还有一个图像(显示你正在购买的东西)。我将所有这些数组放入一个滑块中,以便玩家可以看到他们可以购买的不同物品,这就是我到目前为止所做的。我的项目的网站是:theassets.staticloud.com 这只是我敲出来的东西,向你展示我在做什么的基本想法:

<html>
<head>
     <title>Test</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     <script type="text/javascript">
var island = new Array();
island[0] = 7000;
island[1] = $islandimg;
     </script>
     </head>
     <body>
          <img src="http://avatarmaker.net/free-avatars/avatars/nature_217/scenery_275/moorea_island_avatar_100x100_83622.jpg" id="islandimg">
          <body>

</html>

这就是我正在做的事情:

<!doctype html>

<html lang="en">
<body bgcolor="black">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider - Slider scrollbar</title>
<center>
<img src="theassetsimg.png">
<br />
<br />
<center><table>
<tr><td><img src="cooltext819230394.png" onmouseover="this.src='cooltext819230394MouseOver.png';" onmouseout="this.src='cooltext819230394.png';" /></td>
<td><img src="cooltext819231213.png" onmouseover="this.src='cooltext819231213MouseOver.png';" onmouseout="this.src='cooltext819231213.png';" /><a></td>
<td><img src="cooltext819232096.png" onmouseover="this.src='cooltext819232096MouseOver.png';" onmouseout="this.src='cooltext819232096.png';" /><a></td></tr>
</table></center>
</center>    
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    .scroll-pane { overflow: auto; width: 99%; float:left; }
    .scroll-content { width: 2440px; float: left; }
    .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
    * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
    .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
    .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
    .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
    .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
    .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
    </style>
    <script>
    $(function() {
        //scrollpane parts
        var scrollPane = $( ".scroll-pane" ),
            scrollContent = $( ".scroll-content" );

        //build slider
        var scrollbar = $( ".scroll-bar" ).slider({
            slide: function( event, ui ) {
                if ( scrollContent.width() > scrollPane.width() ) {
                    scrollContent.css( "margin-left", Math.round(
                        ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                    ) + "px" );
                } else {
                    scrollContent.css( "margin-left", 0 );
                }
            }
        });

        //append icon to handle
        var handleHelper = scrollbar.find( ".ui-slider-handle" )
        .mousedown(function() {
            scrollbar.width( handleHelper.width() );
        })
        .mouseup(function() {
            scrollbar.width( "100%" );
        })
        .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
        .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

        //change overflow to hidden now that slider handles the scrolling
        scrollPane.css( "overflow", "hidden" );

        //size scrollbar and handle proportionally to scroll distance
        function sizeScrollbar() {
            var remainder = scrollContent.width() - scrollPane.width();
            var proportion = remainder / scrollContent.width();
            var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
            scrollbar.find( ".ui-slider-handle" ).css({
                width: handleSize,
                "margin-left": -handleSize / 2
            });
            handleHelper.width( "" ).width( scrollbar.width() - handleSize );
        }

        //reset slider value based on scroll content position
        function resetValue() {
            var remainder = scrollPane.width() - scrollContent.width();
            var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
                parseInt( scrollContent.css( "margin-left" ) );
            var percentage = Math.round( leftVal / remainder * 100 );
            scrollbar.slider( "value", percentage );
        }

        //if the slider is 100% and window gets larger, reveal content
        function reflowContent() {
                var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
                var gap = scrollPane.width() - showing;
                if ( gap > 0 ) {
                    scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
                }
        }

        //change handle position on window resize
        $( window ).resize(function() {
            resetValue();
            sizeScrollbar();
            reflowContent();
        });
        //init scrollbar size
        setTimeout( sizeScrollbar, 10 );//safari wants a timeout
    });
    </script>
</head>
<body>

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
    <div class="scroll-content">
        <div class="scroll-content-item ui-widget-header"><img src="http://avatarmaker.net/free-avatars/avatars/nature_217/scenery_275/moorea_island_avatar_100x100_83622.jpg" id=""></div>
        <div class="scroll-content-item ui-widget-header"><img src="http://i31.twenga.com/jewellery/watch/nixon-watches-all-gold-tp_531465411970057721.jpg"></div>
        <div class="scroll-content-item ui-widget-header"><img src="http://www.glitteringstones.com/Images/bluediamond.gif"></div>
        <div class="scroll-content-item ui-widget-header"><img src="http://www.rac.co.uk/images/tiles/car-driving.aspx"></div>
    </div>
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
        <div class="scroll-bar"></div>
    </div>
</div>


</body>
</html>
4

1 回答 1

2

您可能需要创建一个对象数组

var items = [];

items.push({
  name: 'Island',
  worth: 7000,
  image: 'http://../island.jpg'
});

items.push({
  name: 'Watch',
  worth: 100,
  image: 'http://../watch.jpg'
});

然后您可以遍历 items 数组并访问所需的属性

于 2012-11-10T15:11:41.197 回答