jQueryを利用してサイトを作ってみました！

カテゴリーから探す

年別から見る

2012/11/21

プログラマー

jQueryを利用してサイトを作ってみました！

今日はjQueryで作ったサイトについて書きたいと思います。
まだ、完璧ではありませんが、残りの作業が終わったらまた追加で書きたいと思います。

Header部分に以下のソースを入力してください。


<link rel="stylesheet" href="../thickbox.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

</script>


<body>
<div id="wrapper">
	<div id="gnavi">
    	<ul>
        	<!--<li id="navi01"><a href="javascript:document.location.reload()">Pagent</a></li>-->
            <li id="navi01"><a href="index.html">Pagent</a></li>
            <li id="navi02"><a href="#" class="home">HOME</a></li>
            <li id="navi03"><a href="#" class="mission">MISSION</a></li>
            <li id="navi04"><a href="#" class="service">SERVICE</a></li>
            <li id="navi05"><a href="#" class="company">COMPANY</a></li>
            <li id="navi06"><a href="#" class="recruit">RECRUIT</a></li>
            <li id="navi07"><a href="#" class="contact">CONTACT</a></li>
        </ul>
    </div><!--ganvi-->
    <div id="content">
    	<div id="screen">
            <div id="home">
			</div><!--home-->
            <div id="mission">
                <a href="#"><img src="images/btn_seo.png" alt="SEOへの思い" class="seo"/></a>
			</div><!--mission-->
            <div id="service">
                <a href="#"><img src="images/SEO_ServicePlan_03.jpg" alt="SEOサービスプラン例" class="seoplan" /></a>
			</div><!--service-->
            <div id="company">
				<div id="map-area" class="mb15">
					<div id="map_canvas" style="width : 370px; height : 284px;">
					</div>
				</div>
			</div><!--company-->
            <div id="recruit">
                <a href="#" class="contact"><img src="images/btn_contact.png" alt="コンタクトへ" /></a>
			</div><!--recruit-->
            <div id="contact">
			</div><!--contact-->
        </div>
    	<!--screen-->
    </div><!--content-->
</div><!--wrapper-->

    <div id="footer">
    	<p><a href="#" class="home">HOME</a><a href="#" class="mission">MISSION</a><a href="#" class="service">SERVICE</a><a href="#" class="company">COMPANY</a><a href="#" class="recruit">RECRUIT</a><a href="#" class="contact">CONTACT</a><a href="#" class="link_policy">LINK POLICY</a><a href="#" class="privacy_policy">PRIVACY POLICY</a>	Copyright(c)Pagent Inc. All Rights Reserved.</p>
    </div><!--footer-->
	
	<div id="mission_seo">
		<a href="#" class="close_seo"><img src="images/close.png" alt="close_bottom"/></a>
		<div class="seo_body">
			<img src="images/seo.png" alt="seo"/>
		</div>
	</div><!--mission_seo-->
	
	<div id="service_seo">
		<a href="#" class="close_seoplan"><img src="images/close.png" alt="close_bottom"/></a>
		<div class="seo_body">
			<img src="images/about.png" alt="seo"/><br /><br />
			<a href="#" class="contact2"><img src="images/btn_contact.png" alt="コンタクトへ" /></a>
		</div>
	</div><!--service_seo-->
	
	<div id="link_policy">
		<a href="#" class="close_linkpol"><img src="images/close.png" alt="close_bottom"/></a>
		<div id="link_body">
			<img src="images/h3_link.png" alt="リンクポリシ" /><br /><br />
				<div>
						株式会社ページェントへのリンクは法人・個人を問わず原則として自由です。<br />
				ただし、以下の「注意事項」に該当する、もしくはその恐れがあるウェブサイトからのリンクはお断りいたします。<br />
				また、リンクによって生じたトラブルや賠償問題については、株式会社ページェントは何ら責任を負いませんのでご了承ください。<br /><br />
				
				■下記のようなウェブサイトからはリンクはお断りします<br />
				１，株式会社ページェントまたはその関連会社を誹謗中傷するウェブサイト<br />
				２，株式会社ページェントまたはその関連会社の名誉や品位を損ねたり、経済的損失を生じさせる意図の内容を含むウェブサイト<br />
				３，株式会社ページェントと提携、あるいは協力関係にあるように誤解させるウェブサイト<br />
				４，違法な情報を含むウェブサイト<br />
				５、アダルトコンテンツなど、公序良俗に反するコンテンツを含んだウェブサイト<br /><br />
				
				■下記のようなリンクの設定はお断りします<br />
				１、当ウェブサイトに掲載されているロゴやマークなどの登録商標を一部を利用したリンク<br />
				２，インラインフレームなどを利用することにより、当サイトの情報がリンク元の情報と一体のように見えるリンク（必ずブラウザ画面全体に当ウェブサイトが立ち上がるか、別のブラウザウィンドウが開いて、当ウェブサイトが表示されるようにして下さい）<br /><br />
				
				なお、当ウェブサイトの内容あるいはURLは、予告なく変更される場合がありますので、ご了承ください。
			</div>
		</div>
	</div><!--link_policy-->
	
	<div id="privacy_policy">
		<a href="#" class="close_pripol"><img src="images/close.png" alt="close_bottom"/></a>
		<div id="privacy_body">
			<img src="images/h3_privacy.png" alt="プライバシーポリシ" /><br /><br />
			<div>
				株式会社ページェント（以下「当社」といいます）では、当社業務において弊社が取り扱う全ての個人情報の保護について、社会的使命を十分に認識し、本人の権利の保護、個人情報に関する法規制等を遵守します。<br /><br />
				
				1. 個人情報の取得について<br />
				利用目的を明確にしたうえで、必要とする範囲内に限り、適法かつ公正な手段によって個人情報を取得します。<br /><br />
				
				2. 個人情報の利用について<br />
				当社は、当社事業目的範囲内で、個人情報の収集、利用を行います。<br /><br />
				
				3、個人情報の開示・提供について<br />
				当社は以下の場合を除いて、個人情報を委託提供する場合はございません。<br />
				・お客様の同意がある場合。<br />
				・当社と機密保持契約を結んだ業務委託先（当社同様に個人情報保護措置を取っている協力会社）が、当該業務 のために上記利用目的の範囲内で利用する場合。<br />
				・法令等により官公署から個人情報の提供を求められた場合。<br /><br />
				
				4. 個人情報の管理について<br />
				・当社は個人情報の正確性を保持し、且つこれを安全に管理致します。<br />
				・当社は個人情報の紛失、破損、改ざん及び漏洩等を防止する為、不正アクセスコンピューターウィルス等に対する適正な情報セキュリティ対策を講じます。<br />
				・当社は個人情報を持ち出し、外部へ送信する等により漏洩させません。<br />
				・当サイトにて収集された個人情報に、オフラインや第三者から知り得た情報が補足されることはありません。<br /><br />
				
				5. 個人情報の共有について<br />
				当サイトでは、収集した個人情報をお客様本人の承諾なしに第三者と共有することはございません。当サイトが明示している利用目的を達成する必要がある場合には、委託先の適正な選別を行った上で、外部の企業に業務を委託（個人情報の整理や保管、デジタル化、発送などの取扱業務の全部または一部を委託）することがございます。業務委託に関しては、機密保持契約を締結の上、必要な目的の範囲内で必要な情報のみを開示し、目的達成以外に個人情報を利用することを禁止すると共に必要な管理監督を行います。 
			</div>
		</div>
	</div><!--link_policy-->
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<body>

<ul>

<li id="navi01"><a href="index.html">Pagent</a></li>

<li id="navi03"><a href="#" class="mission">MISSION</a></li>

<li id="navi04"><a href="#" class="service">SERVICE</a></li>

<li id="navi05"><a href="#" class="company">COMPANY</a></li>

<li id="navi06"><a href="#" class="recruit">RECRUIT</a></li>

<li id="navi07"><a href="#" class="contact">CONTACT</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p><a href="#" class="home">HOME</a><a href="#" class="mission">MISSION</a><a href="#" class="service">SERVICE</a><a href="#" class="company">COMPANY</a><a href="#" class="recruit">RECRUIT</a><a href="#" class="contact">CONTACT</a><a href="#" class="link_policy">LINK POLICY</a><a href="#" class="privacy_policy">PRIVACY POLICY</a> Copyright(c)Pagent Inc. All Rights Reserved.</p>

</div>

</div>

</div>

</div>

</div>

<div>

株式会社ページェントへのリンクは法人・個人を問わず原則として自由です。<br />

ただし、以下の「注意事項」に該当する、もしくはその恐れがあるウェブサイトからのリンクはお断りいたします。<br />

また、リンクによって生じたトラブルや賠償問題については、株式会社ページェントは何ら責任を負いませんのでご了承ください。<br /><br />

■下記のようなウェブサイトからはリンクはお断りします<br />

１，株式会社ページェントまたはその関連会社を誹謗中傷するウェブサイト<br />

２，株式会社ページェントまたはその関連会社の名誉や品位を損ねたり、経済的損失を生じさせる意図の内容を含むウェブサイト<br />

３，株式会社ページェントと提携、あるいは協力関係にあるように誤解させるウェブサイト<br />

４，違法な情報を含むウェブサイト<br />

５、アダルトコンテンツなど、公序良俗に反するコンテンツを含んだウェブサイト<br /><br />

■下記のようなリンクの設定はお断りします<br />

１、当ウェブサイトに掲載されているロゴやマークなどの登録商標を一部を利用したリンク<br />

２，インラインフレームなどを利用することにより、当サイトの情報がリンク元の情報と一体のように見えるリンク（必ずブラウザ画面全体に当ウェブサイトが立ち上がるか、別のブラウザウィンドウが開いて、当ウェブサイトが表示されるようにして下さい）<br /><br />

なお、当ウェブサイトの内容あるいはURLは、予告なく変更される場合がありますので、ご了承ください。

</div>

</div>

<div>

株式会社ページェント（以下「当社」といいます）では、当社業務において弊社が取り扱う全ての個人情報の保護について、社会的使命を十分に認識し、本人の権利の保護、個人情報に関する法規制等を遵守します。<br /><br />

1. 個人情報の取得について<br />

利用目的を明確にしたうえで、必要とする範囲内に限り、適法かつ公正な手段によって個人情報を取得します。<br /><br />

2. 個人情報の利用について<br />

当社は、当社事業目的範囲内で、個人情報の収集、利用を行います。<br /><br />

3、個人情報の開示・提供について<br />

当社は以下の場合を除いて、個人情報を委託提供する場合はございません。<br />

・お客様の同意がある場合。<br />

・当社と機密保持契約を結んだ業務委託先（当社同様に個人情報保護措置を取っている協力会社）が、当該業務のために上記利用目的の範囲内で利用する場合。<br />

・法令等により官公署から個人情報の提供を求められた場合。<br /><br />

4. 個人情報の管理について<br />

・当社は個人情報の正確性を保持し、且つこれを安全に管理致します。<br />

・当社は個人情報の紛失、破損、改ざん及び漏洩等を防止する為、不正アクセスコンピューターウィルス等に対する適正な情報セキュリティ対策を講じます。<br />

・当社は個人情報を持ち出し、外部へ送信する等により漏洩させません。<br />

・当サイトにて収集された個人情報に、オフラインや第三者から知り得た情報が補足されることはありません。<br /><br />

5. 個人情報の共有について<br />

当サイトでは、収集した個人情報をお客様本人の承諾なしに第三者と共有することはございません。当サイトが明示している利用目的を達成する必要がある場合には、委託先の適正な選別を行った上で、外部の企業に業務を委託（個人情報の整理や保管、デジタル化、発送などの取扱業務の全部または一部を委託）することがございます。業務委託に関しては、機密保持契約を締結の上、必要な目的の範囲内で必要な情報のみを開示し、目的達成以外に個人情報を利用することを禁止すると共に必要な管理監督を行います。

</div>

</div>

</body>


@charset "UTF-8";
/* CSS Document */

body{
	background-image: url(../images/bg.png);
	background-position: top center;
	background-repeat: repeat-x;
	overflow: hidden;
	}

#wrapper{
	width: 900px;
	margin: 0 auto;
	}
#content{
	width: 900px;
	height: 500px;
	margin:0 auto 0 auto;
	margin-bottom: 30px;
	}
#screen{
	width: 5400px;
	height: 500px;
	position: relative;
}
#home{
	width: 900px;
	height: 500px;
	background-image: url(../images/home.png);
	position: absolute;
	float: left;
}
#mission{
	width: 900px;
	height: 470px;
	position: absolute;
	background-image: url(../images/mission.png);
	float: left;
}
#mission img{
	position: absolute;
	top: 200px;
	right: 130px;
}
#service{
	width: 900px;
	height: 470px;
	position: absolute;
	background-image: url(../images/service.png);
	float: left;
}
#service img{
	position: absolute;
	top: 400px;
	left: 0px;
	}
#company{
	width: 900px;
	height: 470px;
	position: absolute;
	background-image: url(../images/company.png);
	float: left;
}
#map-area{
	margin-top: 80px;
	position: absolute;
	left: 450px;
}
#recruit{
	width: 900px;
	height: 470px;
	position: absolute;
	background-image: url(../images/recruit.png);
	float: left;
}
#recruit img{
	position: absolute;
	top: 150px;
	left: 350px;
}
#contact{
	width: 900px;
	height: 470px;
	position: absolute;
	background-image: url(../images/recruit.png);
	float: left;
}
#footer{
	width: 100%;
	position: fixed;
	left: 100px;
	bottom: 10px;
	font-weight: lighter;
	}
#footer p{
	color: #BBBBBB;
	font-size: 12px;
	}
#footer a{
	color: #BBBBBB;
	text-decoration: none;
	margin-left: 10px;
	}
	
/* mission_seo */
#mission_seo{
	width: 100%;
	overflow: hidden;
	position: relative;
	display: none;
	padding-top: 100px;
	padding-left: 100px;
	background-image: url(../images/bg.png);
	background-position: -300px -500px;
}
.close_seo{
	position: absolute;
	top: 30px;
	right: 140px;
}
#mission_seo .seo_body{
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
}

/* mission_seo */
#service_seo{
	width: 100%;
	overflow: hidden;
	position: relative;
	display: none;
	padding-top: 100px;
	padding-left: 100px;
	background-image: url(../images/bg.png);
	background-position: -600px 0;
}
.close_seoplan{
	position: absolute;
	top: 30px;
	right: 140px;
}
#service_seo .seo_body{
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
	clear:both;
}
#link_policy{
	width: 100%;
	overflow: hidden;
	position: relative;
	display: none;
	padding-top: 100px;
	padding-left: 100px;
	background-image: url(../images/bg.png);
	background-position: -600px 0;
}
.close_linkpol{
	position: absolute;
	top: 30px;
	right: 140px;
}
#link_policy #link_body{
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
	clear:both;
}
#link_policy #link_body div{
	width: 500px;
	height: 400px;
	padding-left: 40px;
	overflow: scroll;
	font-size: 12px;
	float: left;
}
#link_policy #link_body img{
	float: left;
}
#privacy_policy{
	width: 100%;
	overflow: hidden;
	position: relative;
	display: none;
	padding-top: 100px;
	padding-left: 100px;
	background-image: url(../images/bg.png);
	background-position: -600px 0;
}
.close_pripol{
	position: absolute;
	top: 30px;
	right: 140px;
}
#privacy_policy #privacy_body{
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
	clear:both;
}
#privacy_policy #privacy_body div{
	width: 500px;
	height: 400px;
	padding-left: 40px;
	overflow: scroll;
	font-size: 12px;
	float: left;
}
#privacy_policy #privacy_body img{
	float: left;
}


/* gnavi */
@charset "UTF-8";
/* CSS Document */

#gnavi{
	width: 867px;
	height: 40px;
	background-repeat: no-repeat;
	margin: 0 auto;
	padding-top: 10px;
	margin-bottom: 50px;
	}
#gnavi ul li{
	list-style: none;
	float: left;
	position: relative;
	}
#gnavi ul li a{
	width: 100%;
	height: 40px;
	display: block;
	margin: 0px;
	text-indent: -9999px;
	}
#navi01 a,
#navi02 a,
#navi03 a,
#navi04 a,
#navi05 a,
#navi06 a,
#navi07 a{
	background-image: url(../images/gn.png);
	}
#navi01{
	width: 220px;
	height: 40px;
	}
#navi02,
#navi03,
#navi04,
#navi05,
#navi06{
	width: 100px;
	height: 40px;
	}
#navi07{
	width: 135px;
	height: 40px;
	}

#navi01 a{
	background-position: 0px 0px;
	}
#navi02 a{
	background-position: -220px 0px;
	}
#navi03 a{
	background-position:  -320px 0px;
	}
#navi04 a{
	background-position: -410px 0px;
	}
#navi05 a{
	background-position:  -510px 0px;
	}
#navi06 a{
	background-position: -610px 0px;
	}
#navi07 a{
	background-position:  -720px 0px;
	}
#navi01 a:hover{
	background-position: 0px -52px;
	}
#navi02 a:hover{
	background-position: -220px -52px;
	}
#navi03 a:hover{
	background-position:  -320px -52px;
	}
#navi04 a:hover{
	background-position: -410px -52px;
	}
#navi05 a:hover{
	background-position:  -510px -52px;
	}
#navi06 a:hover{
	background-position: -610px -52px;
	}
#navi07 a:hover{
	background-position:  -720px -52px;
	}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

@charset "UTF-8";

/* CSS Document */

body{

background-position: top center;

background-repeat: repeat-x;

overflow: hidden;

}

#wrapper{

width: 900px;

margin: 0 auto;

}

#content{

width: 900px;

height: 500px;

margin:0 auto 0 auto;

margin-bottom: 30px;

}

#screen{

width: 5400px;

height: 500px;

position: relative;

}

#home{

width: 900px;

height: 500px;

position: absolute;

float: left;

}

#mission{

width: 900px;

height: 470px;

position: absolute;

float: left;

}

#mission img{

position: absolute;

top: 200px;

right: 130px;

}

#service{

width: 900px;

height: 470px;

position: absolute;

float: left;

}

#service img{

position: absolute;

top: 400px;

left: 0px;

}

#company{

width: 900px;

height: 470px;

position: absolute;

float: left;

}

#map-area{

margin-top: 80px;

position: absolute;

left: 450px;

}

#recruit{

width: 900px;

height: 470px;

position: absolute;

float: left;

}

#recruit img{

position: absolute;

top: 150px;

left: 350px;

}

#contact{

width: 900px;

height: 470px;

position: absolute;

float: left;

}

#footer{

width: 100%;

position: fixed;

left: 100px;

bottom: 10px;

font-weight: lighter;

}

#footer p{

color: #BBBBBB;

font-size: 12px;

}

#footer a{

color: #BBBBBB;

text-decoration: none;

margin-left: 10px;

}

/* mission_seo */

#mission_seo{

width: 100%;

overflow: hidden;

position: relative;

display: none;

padding-top: 100px;

padding-left: 100px;

background-position: -300px -500px;

}

.close_seo{

position: absolute;

top: 30px;

right: 140px;

}

#mission_seo .seo_body{

width: 900px;

margin: 0 auto;

overflow: hidden;

}

/* mission_seo */

#service_seo{

width: 100%;

overflow: hidden;

position: relative;

display: none;

padding-top: 100px;

padding-left: 100px;

background-position: -600px 0;

}

.close_seoplan{

position: absolute;

top: 30px;

right: 140px;

}

#service_seo .seo_body{

width: 900px;

margin: 0 auto;

overflow: hidden;

clear:both;

}

#link_policy{

width: 100%;

overflow: hidden;

position: relative;

display: none;

padding-top: 100px;

padding-left: 100px;

background-position: -600px 0;

}

.close_linkpol{

position: absolute;

top: 30px;

right: 140px;

}

#link_policy #link_body{

width: 900px;

margin: 0 auto;

overflow: hidden;

clear:both;

}

#link_policy #link_body div{

width: 500px;

height: 400px;

padding-left: 40px;

overflow: scroll;

font-size: 12px;

float: left;

}

#link_policy #link_body img{

float: left;

}

#privacy_policy{

width: 100%;

overflow: hidden;

position: relative;

display: none;

padding-top: 100px;

padding-left: 100px;

background-position: -600px 0;

}

.close_pripol{

position: absolute;

top: 30px;

right: 140px;

}

#privacy_policy #privacy_body{

width: 900px;

margin: 0 auto;

overflow: hidden;

clear:both;

}

#privacy_policy #privacy_body div{

width: 500px;

height: 400px;

padding-left: 40px;

overflow: scroll;

font-size: 12px;

float: left;

}

#privacy_policy #privacy_body img{

float: left;

}

/* gnavi */

@charset "UTF-8";

/* CSS Document */

#gnavi{

width: 867px;

height: 40px;

background-repeat: no-repeat;

margin: 0 auto;

padding-top: 10px;

margin-bottom: 50px;

}

#gnavi ul li{

list-style: none;

float: left;

position: relative;

}

#gnavi ul li a{

width: 100%;

height: 40px;

display: block;

margin: 0px;

text-indent: -9999px;

}

#navi01 a,

#navi02 a,

#navi03 a,

#navi04 a,

#navi05 a,

#navi06 a,

#navi07 a{

}

#navi01{

width: 220px;

height: 40px;

}

#navi02,

#navi03,

#navi04,

#navi05,

#navi06{

width: 100px;

height: 40px;

}

#navi07{

width: 135px;

height: 40px;

}

#navi01 a{

background-position: 0px 0px;

}

#navi02 a{

background-position: -220px 0px;

}

#navi03 a{

background-position: -320px 0px;

}

#navi04 a{

background-position: -410px 0px;

}

#navi05 a{

background-position: -510px 0px;

}

#navi06 a{

background-position: -610px 0px;

}

#navi07 a{

background-position: -720px 0px;

}

#navi01 a:hover{

background-position: 0px -52px;

}

#navi02 a:hover{

background-position: -220px -52px;

}

#navi03 a:hover{

background-position: -320px -52px;

}

#navi04 a:hover{

background-position: -410px -52px;

}

#navi05 a:hover{

background-position: -510px -52px;

}

#navi06 a:hover{

background-position: -610px -52px;

}

#navi07 a:hover{

background-position: -720px -52px;

}


/* jQuery */
var W, H;
$(function(){
		H = $(window).height();
		W = $(window).width();
		
		$("#screen").css('margin-left',W*1+"px");
		$("#home").css('margin-left',W*1+"px");
		$("#mission").css('margin-left',W*2+"px");
		$("#service").css('margin-left',W*3+"px");
		$("#company").css('margin-left',W*4+"px");
		$("#recruit").css('margin-left',W*5+"px");
		$("#contact").css('margin-left',W*6+"px");
		
		
		$('a[href=#]').click(function(){
        return false;
    	});
		$(document).ready(function() {
			$("#screen").animate({
				marginLeft : W*-1+"px"
				},"slow");
		});
		$(".home").click(function(){
			$("#screen").animate({
				marginLeft : W*-1 +"px"
				},"slow");
			navi_action();
			$( "#navi02 .home" ).css( "background-position", "-220px -52px" );
			return false;
		});
		$(".mission").click(function(){
			$("#screen").animate({
				marginLeft : W*-2 +"px"
				},"slow");
			navi_action();
			$( "#navi03 .mission" ).css( "background-position", "-320px -52px" );
			return false;
		});
		$(".service").click(function(){
			$("#screen").animate({
				marginLeft : W*-3 +"px"
				},"slow");
			navi_action();
			$( "#navi04 .service" ).css( "background-position", "-410px -52px" );
			return false;
		});
		$(".company").click(function(){
			$("#screen").animate({
				marginLeft : W*-4 +"px"
				},"slow");
			navi_action();
			$( "#navi05 .company" ).css( "background-position", "-510px -52px" );
			return false;
		});
		$(".recruit").click(function(){
			$("#screen").animate({
				marginLeft : W*-5 +"px"
				},"slow");
			navi_action();
			$( "#navi06 .recruit" ).css( "background-position", "-610px -52px" );
			return false;
		});
		$(".contact").click(function(){
			$("#screen").animate({
				marginLeft : W*-6 +"px"
				},"slow");
			navi_action();
			$( "#navi07 .contact" ).css( "background-position", "-720px -52px" );
			return false;
		});
		$(".close_seo").click(function(){
			$("#wrapper").fadeIn("fast");
			$("#footer").fadeIn("fast");
			$( "#mission_seo" ).hide();
		});
		$( ".seo ").click(function(){
			$("#wrapper").hide();
			$("#footer").hide();
			$( "#mission_seo" ).fadeIn("slow");
		});
		$(".close_seoplan").click(function(){
			$("#wrapper").fadeIn("fast");
			$("#footer").fadeIn("fast");
			$( "#service_seo" ).hide();
		});
		$( ".seoplan").click(function(){
			$("#wrapper").hide();
			$("#footer").hide();
			$( "#service_seo" ).fadeIn("slow");
		});
		$(".contact2").click(function(){
			$("#service_seo").hide();
			$("#wrapper").fadeIn("fast");
			$("#footer").fadeIn("fast");
			$("#screen").animate({
				marginLeft : W*-6 +"px"
				},"slow");
		});
		$(".link_policy").click(function(){
			$("#wrapper").hide();
			$("#footer").hide();
			$( "#link_policy" ).fadeIn("slow");
		});
		$(".close_linkpol").click(function(){
			$("#wrapper").fadeIn("fast");
			$("#footer").fadeIn("fast");
			$( "#link_policy" ).hide();
		});
		
		$(".privacy_policy").click(function(){
			$("#wrapper").hide();
			$("#footer").hide();
			$('body').css('background-image','../images/bg.png');
			$( "#privacy_policy" ).fadeIn("slow");
		});
		$(".close_pripol").click(function(){
			$("#wrapper").fadeIn("fast");
			$("#footer").fadeIn("fast");
			$( "#privacy_policy" ).hide();
		});
});

function navi_action()
{
	$( "#navi02 .home" ).css( "background-position", "-220px 0px" );
	$( "#navi03 .mission" ).css( "background-position", "-320px 0px" );
	$( "#navi04 .service" ).css( "background-position", "-410px 0px" );
	$( "#navi05 .company" ).css( "background-position", "-510px 0px" );
	$( "#navi06 .recruit" ).css( "background-position", "-610px 0px" );
	$( "#navi07 .contact" ).css( "background-position", "-720px 0px" );
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

/* jQuery */

var W, H;

$(function(){

H = $(window).height();

W = $(window).width();

$("#screen").css('margin-left',W*1+"px");

$("#home").css('margin-left',W*1+"px");

$("#mission").css('margin-left',W*2+"px");

$("#service").css('margin-left',W*3+"px");

$("#company").css('margin-left',W*4+"px");

$("#recruit").css('margin-left',W*5+"px");

$("#contact").css('margin-left',W*6+"px");

$('a[href=#]').click(function(){

return false;

});

$(document).ready(function() {

$("#screen").animate({

marginLeft : W*-1+"px"

},"slow");

});

$(".home").click(function(){

$("#screen").animate({

marginLeft : W*-1 +"px"

},"slow");

navi_action();

$( "#navi02 .home" ).css( "background-position", "-220px -52px" );

return false;

});

$(".mission").click(function(){

$("#screen").animate({

marginLeft : W*-2 +"px"

},"slow");

navi_action();

$( "#navi03 .mission" ).css( "background-position", "-320px -52px" );

return false;

});

$(".service").click(function(){

$("#screen").animate({

marginLeft : W*-3 +"px"

},"slow");

navi_action();

$( "#navi04 .service" ).css( "background-position", "-410px -52px" );

return false;

});

$(".company").click(function(){

$("#screen").animate({

marginLeft : W*-4 +"px"

},"slow");

navi_action();

$( "#navi05 .company" ).css( "background-position", "-510px -52px" );

return false;

});

$(".recruit").click(function(){

$("#screen").animate({

marginLeft : W*-5 +"px"

},"slow");

navi_action();

$( "#navi06 .recruit" ).css( "background-position", "-610px -52px" );

return false;

});

$(".contact").click(function(){

$("#screen").animate({

marginLeft : W*-6 +"px"

},"slow");

navi_action();

$( "#navi07 .contact" ).css( "background-position", "-720px -52px" );

return false;

});

$(".close_seo").click(function(){

$("#wrapper").fadeIn("fast");

$("#footer").fadeIn("fast");

$( "#mission_seo" ).hide();

});

$( ".seo ").click(function(){

$("#wrapper").hide();

$("#footer").hide();

$( "#mission_seo" ).fadeIn("slow");

});

$(".close_seoplan").click(function(){

$("#wrapper").fadeIn("fast");

$("#footer").fadeIn("fast");

$( "#service_seo" ).hide();

});

$( ".seoplan").click(function(){

$("#wrapper").hide();

$("#footer").hide();

$( "#service_seo" ).fadeIn("slow");

});

$(".contact2").click(function(){

$("#service_seo").hide();

$("#wrapper").fadeIn("fast");

$("#footer").fadeIn("fast");

$("#screen").animate({

marginLeft : W*-6 +"px"

},"slow");

});

$(".link_policy").click(function(){

$("#wrapper").hide();

$("#footer").hide();

$( "#link_policy" ).fadeIn("slow");

});

$(".close_linkpol").click(function(){

$("#wrapper").fadeIn("fast");

$("#footer").fadeIn("fast");

$( "#link_policy" ).hide();

});

$(".privacy_policy").click(function(){

$("#wrapper").hide();

$("#footer").hide();

$('body').css('background-image','../images/bg.png');

$( "#privacy_policy" ).fadeIn("slow");

});

$(".close_pripol").click(function(){

$("#wrapper").fadeIn("fast");

$("#footer").fadeIn("fast");

$( "#privacy_policy" ).hide();

});

function navi_action()

{

$( "#navi02 .home" ).css( "background-position", "-220px 0px" );

$( "#navi03 .mission" ).css( "background-position", "-320px 0px" );

$( "#navi04 .service" ).css( "background-position", "-410px 0px" );

$( "#navi05 .company" ).css( "background-position", "-510px 0px" );

$( "#navi06 .recruit" ).css( "background-position", "-610px 0px" );

$( "#navi07 .contact" ).css( "background-position", "-720px 0px" );

}

DEMO

Author Profile

スターフィールド編集部

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

jQueryを利用してサイトを作ってみました！

合わせて読みたい