首页
留言
友情链接
Search
1
如何使用JavaScript获取和设置CSS root变量值
882 阅读
2
春和 《江海共余生》
361 阅读
3
中国历史朝代顺序图
341 阅读
4
清除浮动,单行多行超出用...
315 阅读
5
Centos7 下编译安装php8.2
296 阅读
分享
Web前端
html&css
javascript
Vue
shopify
shoplazza
后端
ThinkPHP
YII2
服务器端
软件安装
问题合集
历史
故事
诗词
生活
学习
其他
抖音
快手
小视频
随笔
易经
书摘
登录
/
注册
Search
标签搜索
诗词
sunshine
累计撰写
143
篇文章
累计收到
14
条评论
首页
栏目
分享
Web前端
html&css
javascript
Vue
shopify
shoplazza
后端
ThinkPHP
YII2
服务器端
软件安装
问题合集
历史
故事
诗词
生活
学习
其他
抖音
快手
小视频
随笔
易经
书摘
页面
留言
友情链接
搜索到
10
篇与
的结果
2024-08-02
javascript 返回顶部实例
平滑滚动到顶部示例
2024年08月02日
23 阅读
0 评论
1 点赞
2024-03-29
css 滚动条优化问题
假设最外层容器命名为outer,那么特定的这个区域滚动条的优化如下: .outer { width: 200px; height: 200px; border: 1px solid red; display: block; overflow-x: scroll; /* Enable scroll for the y-axis */ overflow-y: hidden; /* Disable scroll for the x-axis */ } .inner { height: max-content; /* Use max-content or a fixed height */ width: max-content; /* Use max-content or a fixed width */ } /* 整个滚动条 */ .outer::-webkit-scrollbar { width: 5px; /* 设置滚动条的宽度 */ height: 5px; /* 设置滚动条的高度 */ } /* 滚动条轨道 */ .outer::-webkit-scrollbar-track { background: #f1f1f1; /* 设置轨道的背景颜色 */ } /* 滚动条的滑块 */ .outer::-webkit-scrollbar-thumb { background: #fc9a41; /* 设置滑块的背景颜色 */ } /* 当鼠标悬停在滑块上 */ .outer::-webkit-scrollbar-thumb:hover { background: #fc9a41; /* 设置滑块在悬停状态下的背景颜色 */ } <div class="outer"> <div class="inner"> test content </div> </div>
2024年03月29日
47 阅读
0 评论
1 点赞
2023-07-18
shopify 增加youtube视频和选项卡
引入相关资源<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css"> <script src="https://cdn.shopify.com/s/files/1/0607/1861/2695/files/vue.min.js"></script> <script src="https://cdn.shopifycdn.net/s/files/1/0136/3119/3188/files/elementui-index.js"></script>sun-tab-video-css style liquid<style> * { margin: 0; padding: 0; box-sizing: border-box; } [v-cloak] { display: none; } @media (min-width: 1200px) { #shopify-section-header-08 .container, #shopify-section-navigation-08 .container { width: 1400px; } } .sun-video { width: 80%; margin: 50px auto; } .sun-video .video-group { display: flex; justify-content: space-between; margin: 10px 0; flex-wrap: wrap; } .sun-video .video-item { width: calc(100% / 3 - 10px); margin-top: 20px; } .sun-video .video-group:after { content: ""; display: block; width: calc(100% / 3 - 10px); height: 0; } .sun-video .video-title { display: -webkit-box; font-size: 20px; font-weight: bold; margin: 30px 0; text-align: center; min-height: 50px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .sun-video .video-content { width: 100%; text-align: center; } .sun-video .video-content:hover .play-button { background: #f00; } .sun-video .youtube { background-color: #000; margin-bottom: 30px; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer; } .sun-video .youtube img { width: 100%; top: 0; left: 0; opacity: 0.8; } .sun-video .youtube img[data-class='default'] { top: -40px; } .sun-video .youtube .play-button { width: 90px; height: 60px; background-color: #000; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); z-index: 1; opacity: 0.8; border-radius: 6px; } .sun-video .youtube .play-button:before { display:block; content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; } .sun-video .youtube img, .sun-video .youtube .play-button { cursor: pointer; } .sun-video .youtube img, .sun-video .youtube iframe, .sun-video .youtube .play-button, .sun-video .youtube .play-button:before { position: absolute; } .sun-video .youtube .play-button, .sun-video .youtube .play-button:before { top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); display:block; } .sun-video .youtube iframe { height: 100%; width: 100%; top: 0; left: 0; } .sun-video .main-container-img img { width: 100%; } @media (max-width: 1000px) { .sun-video { width: 95%; } .sun-video .video-item { width: 100%; margin: 10px auto; } } @media (min-width: 1600px) { } </style> <style> .el-tabs__nav { width: 100%; } .el-tabs__item { padding: 0; width: calc(100% / {{ section.settings.tab_count | default: 2 }}); text-align: center; /*border-left: 1px solid #ccc;*/ /*border-top: 1px solid #ccc;*/ /*border-right: 1px solid #ccc;*/ /*border-bottom: 0;*/ } .el-tabs__item.is-active { color: #e71c20; } .el-tabs__active-bar { background-color: #e71c20; /*bottom: auto;*/ } .el-tabs__item:hover { color: #e71c20; } .el-tabs--card > .el-tabs__header .el-tabs__item.is-active { border-top: 2px solid #e71c20; } </style> <div class="sun-video" id="sun-video-app" v-cloak> <el-tabs id="sun-video-tab-content" v-model="activeName" @tab-click="handleClick" type="card"> </el-tabs> </div>html section {% if customer.id or true %} {% if section.settings.render_first %} {% render 'sun-tab-video-css' %} {% endif %} {% if section.settings.tab_title == blank %} <style> .el-tabs--card>.el-tabs__header{display:none;} </style> {% endif %} <div id="{{ section.id }}" style="display:none;"> {% if section.settings.tab_title %} <el-tab-pane label="{{ section.settings.tab_title }}" name="{% if section.settings.render_first %}first{% else %} {{ section.id }}{% endif %}"> {% endif %} <div class="video-group"> {% for block in section.blocks %} <div class="video-item"> <p class="video-title">{{ block.settings.title }}</p> <div class="video-content"> <div class="youtube" data-embed="{{ block.settings.embed_id }}" data-max="{{ block.settings.max }}"> <div class="play-button"></div> </div> </div> </div> {% endfor %} </div> {% if section.settings.tab_title %} </el-tab-pane> {% endif %} </div> <script> window.sunshine.tab_html = $('#{{ section.id }}').html(); $("#sun-video-tab-content").append(window.sunshine.tab_html) </script> {% if section.settings.render_last %} {% render 'sun-tab-video-js' %} {% endif %} {% endif %} {% schema %} { "name": "Sun Tab Video", "settings": [ { "type":"checkbox", "label":"Render First", "id":"render_first", "default": false }, { "type":"checkbox", "label":"Render Last", "id":"render_last", "default": false }, { "type":"number", "label":"Tab Count", "id":"tab_count" }, { "type":"text", "label":"Tab Title", "id":"tab_title" } ], "blocks":[ { "type":"text", "name":"Tab Item", "settings": [ { "type":"text", "id":"title", "label":"Item Title" }, { "type":"text", "id":"embed_id", "label":"Youtube Embed Id" }, { "type":"checkbox", "id":"max", "label":"Thumb Image Max?", "default":true } ] } ], "presets":[ { "name":"Sun Tab Video" } ] } {% endschema %}sun-tab-video-js <script> new Vue({ el: "#sun-video-app", delimiters: ['${', '}'], data: function () { return { activeName: 'first' } }, methods: { handleChange(val) { // console.log(val); }, handleClick(tab, event) { // console.log(tab, event); }, btn_submit() { // console.log('submit') } }, created() { }, computed: {} }) </script> <script> var youtube = document.querySelectorAll(".youtube"); // loop for (var i = 0; i < youtube.length; i++) { var source = ''; var img_class = ''; // thumbnail image source. if (youtube[i].dataset.max == 'true') { source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/maxresdefault.jpg"; img_class = 'max'; } else { source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/0.jpg"; img_class = 'default'; } var image = new Image(); image.src = source; image.setAttribute('data-class', img_class); image.addEventListener("load", function () { youtube[i].appendChild(image); }(i)); youtube[i].addEventListener("click", function () { var iframe = document.createElement("iframe"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", ""); iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&autoplay=1&showinfo=1"); this.innerHTML = ""; this.appendChild(iframe); }); } </script>
2023年07月18日
46 阅读
0 评论
2 点赞
2023-06-07
Grid布局
.sun-container { width: 90%; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-row-gap: 10px; grid-column-gap: 10px; }
2023年06月07日
42 阅读
0 评论
1 点赞
2023-03-04
jquery shoplazza 投递时间提示代码
<div class="tw-w-full tw-flex tw-items-center tw-mt-4 product-info__marketing-delivery-time {% if section.settings.delivery_time_show_as_date %}product-info__marketing-delivery-time_date{% endif %}" data-delivery-min="{{section.settings.delivery_time_min}}" data-delivery-max="{{section.settings.delivery_time_max}}" > {% include 'icon_sun_shipping',icon_class:"" %} <span class="tw-ml-2 tw-leading-none" > {% if section.settings.delivery_time_show_as_date %} {{ 'i18n.product.product_detail.marketing_delivery' | t: from: "<b></b>",to:"<b></b>"}}{% else %}{{'i18n.product.product_detail.marketing_delivery_days' | t: from: "<b></b>",to:"<b></b>" }} {% endif %} </span> </div><script> $(function () { var $delivery = $(".product-info__marketing-delivery-time"); if ($delivery.length) { var max = $delivery.attr("data-delivery-max"); var min = $delivery.attr("data-delivery-min"); if ($delivery.is(".product-info__marketing-delivery-time_date")) { var maxdate = new Date((new Date()).getTime() + (max * 86400000)); var mindate = new Date((new Date()).getTime() + (min * 86400000)); var formatter = new Intl.DateTimeFormat('en', { month: 'short', day: "2-digit" }); $delivery.find("b").eq(0).html(formatter.format(mindate)) $delivery.find("b").eq(1).html(formatter.format(maxdate)) } else { $delivery.find("b").eq(0).html(min); $delivery.find("b").eq(1).html(max); } } }); </script>
2023年03月04日
90 阅读
0 评论
1 点赞
2023-02-16
浏览器滚动条
滚动条,浏览器滚动条,好看的浏览器滚动条
2023年02月16日
47 阅读
0 评论
0 点赞
2023-02-13
details summary 优化版
案例一<style> * { margin: 0; padding: 0; box-sizing: border-box; } ::-webkit-details-marker { display: none; } ::-moz-list-bullet { font-size: 0; float: left; } </style> <style> #container1 { width: 100%; height: 100%; position: relative; overflow: auto; } #container1 .main { width: 90%; margin: auto; } #container1 summary { outline: none; padding: 10px 5px; cursor: pointer; background: #eee; list-style: none; margin-bottom: 2px; font-weight: bold; display: flex; width: 100%; } </style> <div id="container1"> <div class="main"> <details open> <summary onclick="changeOpen(this)" class="open"> <b>-</b> <span>Entry Level</span> </summary> <div class="compare_content"> content1 </div> </details> <details open> <summary onclick="changeOpen(this)" class="open"> <b>-</b><span>Advanced Models</span> </summary> <div class="compare_content"> content2 </div> </details> <details open> <summary onclick="changeOpen(this)" class="open"> <b>-</b> <span>High-Performance</span> </summary> <div class="compare_content"> content3 </div> </details> </div> </div> <script> function changeOpen(obj) { const b = obj.querySelectorAll('b') console.log(obj.className) if (obj.className == 'open') { obj.className = 'close' b[0].innerHTML = '+'; } else if (obj.className == 'close') { b[0].innerHTML = '-'; obj.className = 'open' } if (obj.className == '') { b[0].innerHTML = '-'; obj.className = 'open' } } </script>案例二<style> #container2 div { width: 7%; margin: 0 auto; text-align: center; } #container2 details { position: relative; background: #f5f5f5; } #container2 summary { font-weight: bolder; cursor: pointer; user-select: none; outline: none; display: flex; position: relative; } #container2 li { border: 1px solid #eee; border-top: 0; list-style: none; } /* 实现动画的原理 */ #container2 summary::after { content: ''; width: 0; height: 0; line-height: 0; font-size: 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-top: 5px solid #000; position: absolute; top: 50%; transform: translateY(-50%); right: 1%; transition: .3s ease-out; } #container2 [open] summary::after { transform: translateY(-50%) rotate(180deg); } #container2 ul { padding: 0; margin-top: 0; transition: .3s ease-out; overflow: hidden; } #container2 [open] + ul { /*max-height: 60px;*/ } </style> <div id="container2"> <div> <details open> <summary>商品管理</summary> <ul> <li>商品列表</li> <li>添加商品</li> </ul> </details> </div> <div> <details open> <summary>品牌管理</summary> <ul> <li>品牌列表</li> <li>添加品牌</li> </ul> </details> </div> <div> <details open> <summary>分类管理</summary> <ul> <li>分类列表</li> <li>添加分类</li> </ul> </details> </div> </div>案例三<style> #container3 { margin-top: 50px; } #container3 div { width: 7%; margin: 0 auto; text-align: center; } #container3 details { position: relative; background: #f5f5f5; } #container3 summary { font-weight: bolder; cursor: pointer; user-select: none; outline: none; display: flex; position: relative; } #container3 li { border: 1px solid #eee; border-top: 0; list-style: none; } /* 实现动画的原理 */ #container3 summary::after { content: '+'; font-size: 20px; /*border-left: 5px dashed transparent;*/ /*border-right: 5px dashed transparent;*/ /*border-top: 5px solid #000;*/ position: absolute; top: 50%; transform: translateY(-50%); right: 6px; transition: .3s ease-in; } #container3 [open] summary::after { right: 6px; font-size: 20px; content: '-'; transition: .3s ease-in; } #container3 summary + .content { height: 0; padding: 0; margin-top: 0; overflow: hidden; width: 100%; transition: height 3s; } #container3 [open] summary + .content { height: max-content; width: 100%; } </style> <div id="container3"> <div> <details open> <summary>商品管理</summary> <div class="content"> <ul> <li>商品列表</li> <li>添加商品</li> </ul> </div> </details> </div> <div> <details open> <summary>品牌管理</summary> <div class="content"> <ul> <li>品牌列表</li> <li>添加品牌</li> </ul> </div> </details> </div> <div> <details open> <summary>分类管理</summary> <div class="content"> <ul> <li>分类列表</li> <li>添加分类</li> </ul> </div> </details> </div> </div>案例四<style> #container4 { margin-top: 50px; } #container4 div { width: 7%; margin: 0 auto; text-align: center; } #container4 details { position: relative; background: #f5f5f5; } #container4 summary { font-weight: bolder; cursor: pointer; user-select: none; outline: none; display: flex; position: relative; padding-left: 20px; } #container4 li { border: 1px solid #eee; border-top: 0; list-style: none; } /* 实现动画的原理 */ #container4 summary::after { content: '+'; font-size: 20px; /*border-left: 5px dashed transparent;*/ /*border-right: 5px dashed transparent;*/ /*border-top: 5px solid #000;*/ position: absolute; top: 50%; transform: translateY(-50%); left: 6px; transition: .3s ease-in; } #container4 [open] summary::after { left: 6px; font-size: 20px; content: '-'; transition: .3s ease-in; } #container4 .content { transition: height 3s; } #container4 summary + .content { height: 0; padding: 0; margin-top: 0; overflow: hidden; width: 100%; } #container4 [open] summary + .content { height: max-content; width: 100%; } </style> <div id="container4"> <div> <details open> <summary>商品管理</summary> <div class="content"> <ul> <li>商品列表</li> <li>添加商品</li> </ul> </div> </details> </div> <div> <details open> <summary>品牌管理</summary> <div class="content"> <ul> <li>品牌列表</li> <li>添加品牌</li> </ul> </div> </details> </div> <div> <details open> <summary>分类管理</summary> <div class="content"> <ul> <li>分类列表</li> <li>添加分类</li> </ul> </div> </details> </div> </div>
2023年02月13日
32 阅读
0 评论
1 点赞
2022-11-12
如何使用JavaScript获取和设置CSS root变量值
1.CSS全局变量:root { --color: #ccc; }2.js代码获取css全局变量getComputedStyle(document.documentElement).getPropertyValue('--color'); // #ccc 3.js代码设置css全局变量document.documentElement.style.setProperty('--color', '#fe000');
2022年11月12日
882 阅读
0 评论
2 点赞
2022-10-31
常用偏门CSS汇总
常用偏门CSS汇总
2022年10月31日
110 阅读
0 评论
1 点赞
2022-09-19
清除浮动,单行多行超出用...
清除浮动,单行多行超出用...
2022年09月19日
315 阅读
0 评论
4 点赞