HTMLでフォトアルバムを作成-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLでフォトアルバムを作成

高洛峰

Feb 20, 2017 pm 01:54 PM

html

この記事は主にHtml5+jQuery+CSSを使ってフォトアルバムを作成した小さな記録について話します。

主な機能ポイント:

レイアウト用のHtml5
jQueryを呼び出す(公式Webサイトから文を借用: The Write Less, Do More)により、JavaScriptプログラミングが大幅に簡素化されます
CSSスタイルは表示とコンテンツを分離します

早速、レンダリングを示します:

Html 制作相册

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <title>The second html page</title>
    <style type="text/css">
         ul li
        {
            list-style-type:georgian;
            text-align:left;
         }
         body
         {
           margin:10px;
           text-align:center;   
           background-color:Orange;
          }
           header
        {
            height:80px;
            border:1px solid gray;
            width:99%
        }
         .left
        {
            border:1px solid gray;
            float:left;
            width:20%;
            height:520px;
            margin:0px;
            border-top-style:none;
            border-bottom-style:none;
            /*设置边框样式*/
        }
        .main
        {
            width:79%;
            float:left;
            height:520px;
            /*border:1px solid gray;*/
            border-right:1px solid gray;
            margin:0px;
            position:relative;/*设置成相对*/
        }
         footer
        {
            clear:left;
            height:60px;
            border:1px solid gray;
            width:99%
        }
        #container
        {
            display:block;
            padding:5px;
           /* border:1px solid gray;*/
            margin:5px;
            position:relative;
         }
         .small
         {
             display:block;
             border-bottom:1px solid gray;/*将缩略图，和大图隔开*/
         }
         .small img
         {
             width:150px;
             height:120px;
             margin:5px;
             border:1px solid gray;
             padding:3px;
         }
         .mm
         {
             cursor:pointer;
             border-radius:5px;/*鼠标移入样式*/
             
          }
         input[type="button"]
         {
             cursor:pointer;
             background-color:Orange;
             color:Lime;
             font-family:Arial;
             font-size:25px;
             height:50px;
             border:0px;
             width:50px;
             position:relative;
             top:150px;
          }
          #btnLeft
          {
           left:30px; 
           float:left;
          }
           #btnRight
          {
           right:30px;    
           float:right;
          }
    </style>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始加载六张图片作为缩略图
            for (var i = 0; i < 6; i++) {
                var src = "img/" + "0" + (i + 1).toString() + ".jpg";
                var img = $("<img  src="/static/imghwm/default1.png"  data-src="img/01.jpg"  class="lazy"  / alt="HTMLでフォトアルバムを作成" >").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);
                $("#small").append(img);
            }
            //设置缩略图的点击事件，以及鼠标移入，移出事件
            $("#small img").click(function () {
                $("#img").css("display", "none");
                var src = $(this).attr("src");
                var alt = $(this).attr("alt");
                var nAlt = parseInt(alt);
                $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
            }).mouseover(function () {
                $(this).addClass("mm");
            }).mouseleave(function () {
                $(this).removeClass("mm");
            });
            var delay = 1000;
            //向左切换事件
            $("#btnLeft").click(function () {
                $("#img").css("display", "none");
                var alt = $("#img").attr("alt");
                if (alt == "1") {
                    alt = 7;
                }
                var nAlt = parseInt(alt) - 1;
                var src = "img/" + "0" + nAlt.toString() + ".jpg";
                $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
            });
            //向右切换事件
            $("#btnRight").click(function () {
                $("#img").css("display", "none");
                var alt = $("#img").attr("alt");
                if (alt == "6") {
                    alt = 0;
                }
                var nAlt = parseInt(alt) + 1;
                var src = "img/" + "0" + nAlt.toString() + ".jpg";
                $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
            });
        });
    </script>
</head>
<body>
<header>
<h2 id="Html-jQuery-nbsp-nbsp-CSS-nbsp-相册">Html+jQuery + CSS 相册</h2>
</header>
<aside class="left">
<h3 id="相册说明">相册说明</h3>
   <ul>
        <li><h4 id="准备阶段">准备阶段：</h4></li>
        <li>几张图片，最好大小一致，宽高比一致</li>           
        <li>jQuery库文件</li>
    </ul>
    <ul>
        <li><h4 id="大致思路">大致思路：</h4></li>
        <li>将界面分<b>上</b>，<b>中</b>（分 <b>左（20%）</b> <b>右（80%）</b>），<b>下</b> 几部分</li>
        <li>实现缩略图，依次放在一个容器中，并设置样式，时间</li>
        <li>实现左右切换的事件函数</li>
    </ul>
</aside>
<section class="main">
    <div class="small" id="small">
   
    </div>
    <div id="container">
        <input type="button" id="btnLeft" value="<<" />
        <img src="/static/imghwm/default1.png"  data-src="img/01.jpg"  class="lazy"  id="img" alt="1"     style="max-width:90%"  style="max-width:90%" />
        <input type="button" id="btnRight" value=">>" />
    </div>
</section>
<footer>
    <div>This is the footer</div>
</footer>
</body>
</html>

Html フォトアルバムの制作に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。