html,Code片段,代码实例,代码示例,代码片段库

html [Shopify]每个变体显示多个图像

[Shopify]每个变体显示多个图像

gistfile2.html

<!-- Begin thumbnails -->
<div class="thumbs clearfix">
  {% assign featured_alt = product.selected_or_first_available_variant.option1 %}
  {% for image in product.images %}
  {% if image.alt == featured_alt or image == featured_image %} 
  {% if settings.enable_product_image_zoom %}
  <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
    <a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery">
      <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
    </a>
  </div>
  {% else %}
  <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
    <a href="{{ image | product_img_url: '1024x1024' }}" data-original-image="{{ image | product_img_url: '1024x1024' }}">
      <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}" />
    </a>
  </div>
  {% endif %}
  {% endif %}
  {% endfor %}
</div>
<!-- End thumbnails -->

gistfile1.html

<script>
jQuery(document).ready(function($){

var images = [];

{% for image in product.images %}
  images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});
{% endfor %}

  var thumbnails = $(".thumbs");                         
  $('#product-select-option-0').change(function() {
    var selected = $(this).val(), mainImage = jQuery('.featured img').attr('src').replace('_1024x1024', '_medium');
    thumbnails.hide().html("");
    arr = [];

    var addImage = $.each( images, function( i, image ) {
      var alt = images[i].alt, url = images[i].url;   
      if (alt == selected || url == mainImage) {
        thumbnails.append('<div class="image span2"><a href="' + url.replace('_medium', '_1024x1024') + '" data-original-image="' + url.replace('_medium', '_1024x1024') + '"><img src="' + url + '" alt="' + alt + '"></a></div>');
      }
    });
    arr.push(addImage);
    $.when.apply($, arr).done(function () {
      thumbnails.fadeIn(); 
      $('#product .thumbs a').on('click', function(e) { 
        e.preventDefault();
        switchImage($(this).attr('href'), null, $('.featured img')[0]);
      });
    });
  });
});    
</script>

html SVGでロゴアニメーション

SVGでロゴアニメーション

logo.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.logo-path {
			fill: #262626;
			stroke: #262626;
			stroke-width: 1;
			stroke-miterlimit: 10;
		}
	</style>
</head>
<body>

<svg width="633px" height="102px" viewBox="0 0 633 102">
	<path class="logo-path" d="M44.2,54c-2.1-4.6-5.8-8-11.6-10.4L23,39.5
	c-6.7-2.9-8.7-12.7-4.7-19c5.4-8.4,12.2,0.7,12.2,6.9v4.3h16v-7.9C46.5,4.5,21.8-7.9,7.9,7.4c-12,13.3-9.3,39.6,7.7,47l9,4
	c7.6,3.4,7.9,13.2,5.8,20.5s-13.9,5.6-13.9-3.1v-6.1h-16v6.9c0,17.1,17,29.1,33.1,22.2S50,67.1,44.2,54L44.2,54z"/>
	<path class="logo-path" d="M52.5,1.8v16h14v82h16v-82h15v-16H52.5z"/>
	<path class="logo-path" d="M140.2,55.4c10.4-7,11.6-20.8,10-32.2
	c-1.8-12.9-9.8-21.5-23.3-21.5h-21.4v98h15v-40h5.1l11.7,40h16.8L140.2,55.4z M120.5,17.7h5.4c7.8,0,8.9,5.2,9.1,12s0,14-8.4,14h-6
	v-26L120.5,17.7z"/>
	<path class="logo-path" d="M197.4,6.9c-15.6-15.3-37.9-0.8-37.9,18.7V76
	c0,12.9,8.7,25,22.5,25s22.5-12,22.5-25V25.6C204.5,17.4,201.7,11.1,197.4,6.9C197.4,6.9,197.4,6.9,197.4,6.9z M175.5,25.6
	c0-5.9,2.7-7.9,6.5-8s6.5,2.1,6.5,8V76c0,5.9-2.7,7.9-6.5,8s-6.5-2.1-6.5-8V25.6z"/>
	<path class="logo-path" d="M257.5,30.7v-3.5c0-14.6-9.4-25.4-24.3-25.4h-19.7v98H232
	c16.6,0,25.5-11.1,25.5-27.2v-5.5c0-8.9-2.3-15.2-7.3-18.9C254.8,44.7,257.5,39.9,257.5,30.7z M240.2,37.9c-1.2,1.7-3.2,2.8-7.1,2.8
	h-3.6v-23h3.1C242.3,17.7,245.4,30.6,240.2,37.9L240.2,37.9z M229.5,55.7h3.5c8.1,0,9,6.1,9.1,13s-0.4,14-9.2,14h-3.4L229.5,55.7
	L229.5,55.7z"/>
	<path class="logo-path" d="M308.5,17.8v-16h-41v1.3v96.7h41v-17h-25v-24h21v-16h-21v-25H308.5
	z"/>
	<path class="logo-path" d="M400.9,0.6c-27.4-0.1-31.7,43.8-8.7,53.8l9,4
	c7.6,3.3,7.8,13.2,5.8,20.5s-14.4,5.6-14.4-3.1v-6.1h-16v6.9c0,19.2,24.8,33.1,39.5,18.2c7.2-7.3,7.7-19.1,7.1-28.7
	s-4-18.5-14.1-22.6l-9.6-4.1c-5.4-2.3-6.3-5.6-6.2-11.2s1-10.6,6.9-10.7s7.3,5.1,7.3,9.9v4.3h16v-7.9
	C423.5,12.4,414.4,0.6,400.9,0.6L400.9,0.6z"/>
	<path class="logo-path" d="M477.5,31.7V25c0-12.6-8.6-24.4-21.9-24.4s-22.1,11-22.1,23.6v52.6
	c0,13.4,8.2,24.4,22.4,24.2c12.6-0.2,21.6-11.7,21.6-23.8v-7.5h-16V76c0,10-12,10.4-12-0.1V27.1c0-4.5,0.6-9.4,6-9.5s6,4.7,6,8.3
	v5.9L477.5,31.7L477.5,31.7z"/>
	<path class="logo-path" d="M524.3,6.9c-15.7-15.3-37.8-0.8-37.8,18.7V76
	c0,12.9,8.5,25,22.4,25c13.9,0,22.6-12,22.6-25V25.6C531.5,17.4,528.6,11.1,524.3,6.9L524.3,6.9L524.3,6.9z M501.5,25.6
	c1-5.9,3.2-7.9,7-8s7,2.1,7,8V76c0,5.9-3.2,7.9-7,8c-3.8,0.1-6-2.1-7-8L501.5,25.6L501.5,25.6z"/>
	<path class="logo-path" d="M577.2,8.8c-4.6-5.3-10.4-7.1-17.5-7.1h-20.2v98h16v-37h4.3
	c12.6,0,21-8.4,22.9-20.6C584.3,31.7,584.6,17.2,577.2,8.8C577.2,8.8,577.2,8.8,577.2,8.8z M567,43.2c-1.1,2.2-2.7,3.5-7.5,3.5h-3.9
	v-29h4.4c5.7,0,7.5,3.1,8,8.4S569.2,38.5,567,43.2L567,43.2L567,43.2z"/>
	<path class="logo-path" d="M632.5,17.8v-16h-41v1.3v96.7h41v-17h-25v-24h22v-16h-22v-25H632.5
	z"/>
	<path class="logo-path" d="M335.5,45.6c6.4,0.3,13.5,1.1,19.2,4c11.3,5.5,2.2,14.1-5,18.8
	c-3.3-0.4-0.9-7.8-0.9-7.8c-2.3,8.1-28.3,22.5-28.3,22.5c15.2-2.8,39.7-7.7,48.4-22C381,41,345.5,43.5,335.5,45.6z"/>
	<path class="logo-path" d="M349.9,52.3c-6.6-0.4-33.3-1.4-18.4-11.5
	c9.8-6.6,21.7-10.8,32.7-14.9c-7.1,1.5-14.1,3.2-21.1,5.3s-21.3,5.6-26.7,13C306.9,57,344.4,53.1,349.9,52.3z"/>
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="DrawSVGPlugin.min.js"></script>
<script>
	var tl = new TimelineMax();
	tl
		.from('.logo-path', 1, {drawSVG: 0, ease: Power1.easeInOut})
		.from('.logo-path', 0.5, {fill:'rgba(37, 37, 37, 0)'}, '+=0.5');
</script>
</body>
</html>

html SVGでCSSアニメーション

SVGでCSSアニメーション

css-svg.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		svg {
			display: block;
		}
		.circle-anim {
			fill: #f00;
			transition: .3s;
		}
		.circle-anim:hover {
			fill: #000;
			transform: translate(0, 30px);
		}
	</style>
</head>
<body>

<svg viewBox="0 0 200 200" width="200px" height="200px">

	<circle cx="100" cy="100" r="30" class="circle-anim"></circle>

</svg>

</body>
</html>

html SVGで模糊

SVGで模糊

blur.html

<svg viewBox="0 0 500 500" width="500" height="500">
	<!-- ぼかし -->
	<filter id="blurFilter">
		<feGaussianBlur stdDeviation="10" />
	</filter>
	<g filter="url(#blurFilter)">
		<image width="124" height="185" x="200" y="100" xlink:href="img/misoda.png"></image>
	</g>
</svg>

html SVGでクリップパス

SVGでクリップパス

clippath.html

<svg viewBox="0 0 500 500" width="500" height="500">

	<!--クリップパス-->

	<clipPath id="clipPath">
		<circle cx="250" cy="250" r="50" style="overflow: visible;"></circle>
	</clipPath>

	<g clip-path="url(#clipPath)">
		<image x="190" y="158" width="124" height="185" xlink:href="img/misoda.png"></image>
	</g>

</svg>

html 电话跟踪link.html

phone-tracking-link.html

<a tel:15558551234 onClick=”ga(‘send’, ‘event’, ‘ Phone Call’, ‘Click to Call’, ‘15558551234’);”> 1 (555) 855 1234 </a>


<a mailto:taaron@google.com onClick=”ga(‘send’, ‘event’, ‘ Mailto’, ‘Click to Email’, ‘taaron@google.com’);”>taaron@google.com </a>

html seleniumであそぶ

seleniumであそぶ

selenium.rb

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :firefox # ブラウザ起動

driver.get('http://localhost:3000/index.html')

p driver.find_element(xpath: '//a').click
sleep 1
driver.switch_to.window(driver.window_handles.last)
sleep 1
driver.find_element(xpath: '//a').click

str = '/Test_Path/test.txt'
driver.switch_to.window(driver.window_handles.first)
driver.find_element(xpath: '//form/input').send_keys(str)
sleep 3
driver.quit # ブラウザ終了

# 新しいウィンドウを開くボタン押下
# driver.find_element(:id, "open_new_window_button").click

# 操作対象を新しいウィンドウに切り替える
# driver.switch_to.window(@driver.window_handles.last)

second.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <a href="#" onclick="window.close()">close</a>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <a href="second.html" target="_blank">click</a>
  <form action="#" enctype="multipart/form-data">
    <input type="file">
  </form>
</body>
</html>

html Bootstrap Snippets

Bootstrap Snippets

SimpleForm.html

<!-- Main content -->
<section class="content">

    <!-- new row -->
    <div class="row">

        <!-- column width and height -->
        <div class="col-md-6">

            <!-- type of box -->
            <div class="box box-info">

                <div class="box-body">

                    <!-- title -->
                    <div class="box-header">
                        <h3 class="box-title">Main Information</h3>
                    </div>

                    <!-- Form -->
                    <label>Url:</label>
                    <input type="text" class="form-control" id="url">
                    <button type="button" id="getindicator">Get Images</button>

                </div>

            </div>

        </div>

    </div>

</section>

html SVGでグラデーション

SVGでグラデーション

grad.html

<svg viewBox="0 0 200 200" width="200px" height="200px">

	<linearGradient id="grad-stroke" gradientUnits="userSpeceOnUse" x1="0" y1="75" y2="75">
		<stop offset="0" stop-color="#fcee21"></stop>
		<stop offset="1" stop-color="#ff7bac"></stop>
	</linearGradient>

	<!--
	objectBoundingBoxを指定すると、開始座標と終了座標は図形の大きさにマッチする
	-->
	<radialGradient id="grad-fill" gradientUnits="objectBoundingBox">
		<stop offset="0" stop-color="#cce0f4"></stop>
		<stop offset="1" stop-color="#0075be"></stop>
	</radialGradient>

	<circle fill="url('#grad-fill')" stroke="url('#grad-stroke')" stroke-width="20" cx="75" cy="75" r="65"></circle>
</svg>

html SVGの视框のメモ

SVGの视框のメモ

viewbox.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		svg {
			display: block;
		}
	</style>
</head>
<body>

<!--
座標1つのサイズは1pxとなる 1px = 1利用単位
-->
<svg viewBox="0 0 10 10" width="10px" height="10px">
	<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>

<!--
利用単位は5pxとなる
50pxの横幅に利用単位が10マスある。
50 / 10 = 5
-->
<svg viewBox="0 0 10 10" width="50px" height="50px">
	<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>

<!--
viewBoxの指定あり、width, heightに絶対値を指定
利用単位1.5px
-->
<svg viewBox="0 0 200 200" width="300px" height="300px">
	<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>

<!--
viewBoxの指定あり、width, heightに%を指定
- 利用単位はブラウザ幅によって変わる
- width,heightを指定しない場合は両方ともこれと同じ設定になる
-->
<svg viewBox="0 0 200 200" width="100%" height="100%">
	<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>

</body>
</html>