0

ベースライン画像を表示することで機能する新しいjavascriptスライダーオブジェクトを作成/発明しようとしています：http： //imgur.com/DuVkE.png

次に、特定の状況に応じて、これらの「ノブ」を使用して上に重ねます

http://imgur.com/GKkqx.png これらはすでに「切り取られ」ており、3つの黒いノブの1つに配置されます。色が一方から他方に変化するように見えるようにそれらを実行することを計画しているので、私は多くの異なる色を持っています。

そのため、ユーザーから受け取ったIDに画像を添付して、後で画像を操作できるようにする必要があります。

私のコード：

<div id='option1'></div>

<script type="text/javascript">

var slide1 = new slider("option1");

私のコンストラクターは次のようになります。

function slider(id) {

var obj = document.getElementById(id);
if (!obj) { 
var state = -1;
return -1;
}
var state = 0; //blank state

//alert("in");
//alert(document.getElementById(id).className);

//this.addClass("hSliderBack"); INCORRECT SYNTAX!!!
$("#"+id).addClass("hSliderBack"); //this works
}

少し醜いですが、上記のaddClassの問題を修正しました。

私のCSSスクリプト：

.hSliderBack
{
background-image: url('/Switches/switchLine.png');
background-repeat: no-repeat;
padding-left: 2px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

これが、コンストラクターに画像を追加する方法です。まだやるべきことはたくさんありますが、少なくともそれは始まりです。私はとても緑なので、コメントはまだありがたいです！

4

1 に答える 1

0

ここに書く内容:

//obj.innerHTML = "<img src=' this doesn't seem right to me.

実際、完全に合理的で実行可能な方法の 1 つです。表示するイメージを参照するノードを DOM に入力し<img>ます。

ただし、多くの場合、より一般的で保守しやすい解決策は、背景画像を参照する CSS スタイルを<div>使用し、画像を表示させるスタイルを使用して DOM に入力することです。

ただし、ツールのサポートなしでこれを行うのが最善かどうかを自問する必要があります。最も人気のある JavaScript ライブラリの多くには、このようなツールが組み込まれているか、少なくとも、このタイプのコードをはるかに簡単に作成できるメソッドが用意されています。

もちろん、フレームワークを使用する前に Web 開発の基本を学ぶためにこれを行っている場合は、フレームワークが何をしているかをより完全に理解することができ、より強力になります :-)

于 2012-11-24T23:20:26.480 に答える