Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
.splitting-image { background-size: 0% 0%; position: relative; overflow: hidden; } .splitting-image img { display: block; } @supports (--row-size: calc( 100% / 2 )) { .splitting-image { background-size: cover; visibility: hidden; --row-size: calc(100% / var(--row-total)); --col-size: calc(100% / var(--col-total)); } .split-cell { background: inherit; position: absolute; overflow: hidden; top: calc(var(--row-size) * var(--row-index)); left: calc(var(--col-size) * var(--col-index)); width: calc(0.5px + var(--col-size)); height: calc(0.5px + var(--row-size)); } .split-cell__inner { position: absolute; visibility: visible; background: inherit; width: calc(100% * var(--col-total)); height: calc(100% * var(--row-total)); transform: translate( calc(-1 * var(--col-size) * var(--col-index)), calc(-1 * var(--row-size) * var(--row-index)) ); } } .tiler { position: relative; display: inline-block; cursor: pointer; visibility: hidden; width: 33.3%; margin: auto; } .tiler img { display: block; margin: auto; max-width: 100%; visibility: visible; } .tiler-overlay { background-position: center center; margin: auto; position: fixed; top: 1em; bottom: 1em; left: 1em; right: 1em; max-width: 1000px; max-height: 600px; -webkit-perspective: 30px; perspective: 30px; } .tiler-overlay .split-cell { pointer-events: none; opacity: 0; -webkit-transform: translateZ(-15px); transform: translateZ(-15px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; transition-duration: 0.5s, 0.4s; transition-timing-function: cubic-bezier(0.65, 0.01, 0.15, 1.33); /* The center character index */ --center-x: calc((var(--col-total) - 1) / 2); --center-y: calc((var(--row-total) - 1) / 2); /* Offset from center, positive & negative */ --offset-x: calc(var(--col-index) - var(--center-x)); --offset-y: calc(var(--row-index) - var(--center-y)); /* Absolute distance from center, only positive */ --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) ); /* Absolute distance from center, only positive */ --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) ); transition-delay: calc( 0.1s * var(--distance-y) + 0.1s * var(--distance-x) ); } .tiler-overlay { z-index: 2; } .tiler:hover .split-cell { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } html { height: 100%; display: flex; background: #323643; } body { display: flex; flex-wrap: wrap; max-width: 800px; padding: 2em; margin: auto; }
JavaScript
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.SplittingImage = factory()); }(this, (function () { 'use strict'; /** * # SplittingImage * * @param {*} els */ function SplittingImage(els, opts) { opts = opts || {}; return $(els).map(function(el, i) { if (!el._splitImg) { el._splitImg = split(el, opts); if (el.classList) { el.classList.add("splitting-image"); } } return el._splitImg; }); } /** * # SplittingImage.$ * Convert selector or NodeList to array for easier manipulation. * * @param {*} els - Elements or selector */ function $(els) { return Array.prototype.slice.call( els.nodeName ? [els] : els[0].nodeName ? els : document.querySelectorAll(els), 0 ); } SplittingImage.$ = $; /** * # SplittingImage.split * Split an element with the specified number of rows & cols * @param {Node} el - Element to split * @param {String} key - * @param {String|RegEx} splitBy - string or regex to split the innerText by * @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words` */ function split(el, opts) { var img = opts.image || (el.dataset && el.dataset.image) || el.currentSrc || el.src, rows = opts.rows || (el.dataset && el.dataset.rows) || 1, cols = opts.cols || (el.dataset && el.dataset.cols) || 1, row = 0, col = 0, cells = [], parent = el.parentNode, cell, inner; // Use fragment to prevent unnecessary DOM thrashing. var fragment = document.createDocumentFragment(); for (; row < rows; row++) { for (col = 0; col < cols; col++) { // Create a span cell = document.createElement("span"); cell.className = "split-cell"; cell.style.setProperty("--row-index", row); cell.style.setProperty("--col-index", col); cell.style.setProperty("--cell-index", cells.length); cell.setAttribute("data-row", row); cell.setAttribute("data-col", col); inner = document.createElement("span"); inner.className = "split-cell__inner"; cell.appendChild(inner); fragment.appendChild(cell); cells.push(cell); } } if (!img) { img = el.querySelector("img"); img = img && (img.currentSrc || img.src); } if (img) { el.style.setProperty("background-image", "url(" + img + ")"); } el.style.setProperty("--row-total", rows); el.style.setProperty("--col-total", cols); el.style.setProperty("--cell-total", cells.length); // Append elements back into the parent el.appendChild(fragment); return { el: el, cells: cells, rows: rows, cols: cols }; } SplittingImage.split = split; SplittingImage.rows = function(els, rows, opts) { opts = Object.assign({}, opts, { cols: 1, rows: rows }); return SplittingImage(els, opts); }; SplittingImage.cols = function(els, cols, opts) { opts = Object.assign({}, opts, { rows: 1, cols: cols }); return SplittingImage(els, opts); }; return SplittingImage; }))); ;(function(){ // bracket [≠] square [?] var svgIcon = '
'; document.head.insertAdjacentHTML('beforeend',''); // .shaw__title { position: absolute; right: 100%; top: 50%; margin-top: -0.5em;width: fit-content; position: absolute; right: 100%; margin-right: 10px; } var a = document.createElement('a'); a.setAttribute('href','https://codepen.io/shshaw'); a.setAttribute('target','_blank'); a.className = 'shaw'; a.innerHTML = svgIcon; a.onclick = function(){ if ( ga ) { var url = this.getAttribute('href'); ga('send', 'event', 'shawhead', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){ console.log('callback!');window.open(url); } }); return false; } }; document.body.appendChild(a); //document.body.insertAdjacentHTML('beforeend','
'+svgIcon+'
'); })(); console.clear(); SplittingImage('.tiler-overlay', { rows: 3, cols: 3 });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>分割图像悬停画廊-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号