经验分享程序开发文档资料数据资源其它资源

贴片效果插件Sticker.js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 贴片效果插件Sticker.js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

贴片效果插件Sticker.js代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/html">
    <title>��ƬЧ�����Sticker.js</title>
    <style type="text/css">
        body {
            background-color: #52accc;
        }

        .sticker {
            position: relative;
            width: 180px;
            height: 180px;
            margin: 50px;
        }

        .example-1 .sticker-img {
            background-image: url(heroes-2.png);
        }

        .example-2 .sticker-img {
            background-color: #ff4a85;
        }

        .example-2 .sticker-shadow {
            opacity: 0.6;
        }
    </style>
</head>
<body>
<center>
    <div class="sticker example-1"></div>
    <div class="sticker example-2"></div>
    <script src="js/sticker.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            Sticker.init('.sticker');
        }
    </script>
</center>
</body>
</html>

JS代码(sticker.js):

/** * Sticker.js:A Javascript library that allows you to create a Sticker Effect * * @project-site http://stickerjs.cmiscm.com/ * @repositoryhttps://github.com/cmiscm/stickerjs * @author Jongmin Kim - cmiscm.com * @version 1.0 (2014/02/05) * @license MIT License */
(function (){
	var _direction,_savePos = null,_prefixes = ['webkit','Moz','ms','O'],_aniTrans = 'all 0.6s cubic-bezier(.23,1,.32,1)',_setTrans = 'all 0s',newStyle = document.createElement('style');
	newStyle.appendChild(document.createTextNode("\ .shadowL{
	background:-moz-linear-gradient(right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-webkit-gradient(linear,right top,left top,color-stop(0%,rgba(0,0,0,0)),color-stop(1%,rgba(0,0,0,0.01)),color-stop(100%,rgba(0,0,0,0.7)));
	background:-webkit-linear-gradient(right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-o-linear-gradient(right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-ms-linear-gradient(right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
}
\ .shadowR{
	background:-moz-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0)),color-stop(1%,rgba(0,0,0,0.01)),color-stop(100%,rgba(0,0,0,0.7)));
	background:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-o-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-ms-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
}
\ .shadowB{
	background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(1%,rgba(0,0,0,0.01)),color-stop(100%,rgba(0,0,0,0.7)));
	background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
}
\ .shadowT{
	background:-moz-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-webkit-gradient(linear,left bottom,left top,color-stop(0%,rgba(0,0,0,0)),color-stop(1%,rgba(0,0,0,0.01)),color-stop(100%,rgba(0,0,0,0.7)));
	background:-webkit-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-o-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:-ms-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
	background:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.7) 100%);
}
"));
	document.head.appendChild(newStyle);
	function vendor(el,prop){
	var s = el.style,pp,i;
	prop = prop.charAt(0).toUpperCase() + prop.slice(1);
	for(i=0;
	i<_prefixes.length;
	i++){
	pp = _prefixes[i]+prop;
	if(s[pp] !== undefined) return pp;
}
if(s[prop] !== undefined) return prop;
}
function css(el,prop){
	for (var n in prop) el.style[vendor(el,n)||n] = prop[n];
}
function createEl(tag,prop){
	var el = document.createElement(tag || 'div');
	css(el,prop);
	return el;
}
function checkDerection(e,pos,sizeQ){
	var fx = pos.x,fy = pos.y,tx = e.pageX - fx,ty = e.pageY - fy,direction;
	if (tx < sizeQ) direction = 0;
	// left else if (tx > sizeQ * 3) direction = 1;
	// right else if (ty < sizeQ) direction = 2;
	// top else direction = 3;
	// bottom return direction;
}
function checkPos(e,pos,size){
	var fx = pos.x,fy = pos.y,tx = e.pageX - fx,ty = e.pageY - fy,value,a = size - tx,b = size - ty,c = tx >> 1,d = ty >> 1,e = a >> 1,f = b >> 1;
	if (_direction == 0) value ={
	bx:-size,by:0,sx:-1,sy:1,bs:'shadowL',bmx:-size + tx,bmy:0,bsw:tx,bsh:size,bsx:a,bsy:0,cw:size - c,ch:size,cx:c,cy:0,dw:c,dh:size,dx:c - (c >> 1),dy:0}
;
	// left else if (_direction == 1) value ={
	bx:size,by:0,sx:-1,sy:1,bs:'shadowR',bmx:tx,bmy:0,bsw:a,bsh:size,bsx:0,bsy:0,cw:size - e,ch:size,cx:0,cy:0,dw:e,dh:size,dx:size - a + (e >> 1),dy:0}
;
	// right else if (_direction == 2) value ={
	bx:0,by:-size,sx:1,sy:-1,bs:'shadowT',bmx:0,bmy:-size + ty,bsw:size,bsh:ty,bsx:0,bsy:b,cw:size,ch:size - d,cx:0,cy:d,dw:size,dh:d,dx:0,dy:d - (d >> 1)}
;
	// top else value ={
	bx:0,by:size,sx:1,sy:-1,bs:'shadowB',bmx:0,bmy:ty,bsw:size,bsh:b,bsx:0,bsy:0,cw:size,ch:size - f,cx:0,cy:0,dw:size,dh:f,dx:0,dy:size - b + (f >> 1)}
;
	// bottom return value;
}
function onEnter(e,value){
	var cpos = value.container.getBoundingClientRect(),mpos ={
	x:cpos.left + window.pageXOffset,y:cpos.top + window.pageYOffset}
;
	_direction = checkDerection(e,mpos,value.sizeQ);
	_savePos = checkPos(e,mpos,value.size);
	_savePos.pos = mpos;
	var bx = _savePos.bx,by = _savePos.by,sx = _savePos.sx,sy = _savePos.sy,bs = _savePos.bs;
	value.backShadow.className = value.depth.className = 'sticker-shadow ' + bs;
	css(value.mask,{
	transition:_setTrans,width:value.size + 'px',height:value.size + 'px',transform:'translate(' + 0 + 'px,' + 0 + 'px)'}
);
	css(value.move,{
	transition:_setTrans,transform:'translate(' + 0 + 'px,' + 0 + 'px)'}
);
	css(value.back,{
	transition:_setTrans,transform:'translate(' + bx + 'px,' + by + 'px)'}
);
	css(value.backImg,{
	transform:'scaleX(' + sx + ') scaleY(' + sy + ')'}
);
	css(value.depth,{
	transform:'translate(' + -10000 + 'px,' + -10000 + 'px)'}
);
}
function onLeave(e,value){
	if (_savePos == null) return;
	var bx = _savePos.bx,by = _savePos.by;
	css(value.mask,{
	transition:_aniTrans,width:value.size + 'px',height:value.size + 'px',transform:'translate(' + 0 + 'px,' + 0 + 'px)'}
);
	css(value.move,{
	transition:_aniTrans,transform:'translate(' + 0 + 'px,' + 0 + 'px)'}
);
	css(value.back,{
	transition:_aniTrans,transform:'translate(' + bx + 'px,' + by + 'px)'}
);
	css(value.depth,{
	transform:'translate(' + -10000 + 'px,' + -10000 + 'px)'}
);
	_savePos = null;
}
function onMove(e,value){
	if (_savePos == null){
	onEnter(e,value);
	window.document.addEventListener('mouseup',function (e){
	this.removeEventListener('mouseup',arguments.callee,false);
	onLeave(e,value);
}
,false);
}
var pos = checkPos(e,_savePos.pos,value.size),bmx = pos.bmx,bmy = pos.bmy,bsw = pos.bsw,bsh = pos.bsh,bsx = pos.bsx,bsy = pos.bsy,cw = pos.cw,ch = pos.ch,cx = pos.cx,cy = pos.cy,dw = pos.dw,dh = pos.dh,dx = pos.dx,dy = pos.dy;
	css(value.mask,{
	width:cw + 'px',height:ch + 'px',transform:'translate(' + cx + 'px,' + cy + 'px)'}
);
	css(value.move,{
	transform:'translate(' + -cx + 'px,' + -cy + 'px)'}
);
	css(value.back,{
	transform:'translate(' + bmx + 'px,' + bmy + 'px)'}
);
	css(value.backShadow,{
	width:bsw + 'px',height:bsh + 'px',transform:'translate(' + bsx + 'px,' + bsy + 'px)'}
);
	css(value.depth,{
	width:dw + 'px',height:dh + 'px',transform:'translate(' + dx + 'px,' + dy + 'px)'}
);
}
var sticker ={
	init:function init(dom){
	if (typeof dom === 'string'){
	var item = document.querySelectorAll(dom),i,total = item.length;
	for (i=0;
	i<total;
	i++) init(item[i]);
	return;
}
var value,pos = dom.getBoundingClientRect(),size = pos.width,sizeQ = size >> 2,container = createEl('div',{
	position:'relative',width:size + 'px',height:size + 'px',overflow:'hidden'}
),mask = createEl('div',{
	position:'relative',width:size + 'px',height:size + 'px',overflow:'hidden'}
),move = createEl('div',{
	position:'relative',borderRadius:'50%',width:size + 'px',height:size + 'px',overflow:'hidden'}
),front = createEl('div',{
	position:'relative',borderRadius:'50%',width:size + 'px',height:size + 'px',zIndex:1}
),back = createEl('div',{
	position:'absolute',borderRadius:'50%',width:size + 'px',height:size + 'px',left:'0',top:'0',zIndex:3,backgroundColor:'#ffffff',transform:'translate(' + size + 'px,' + 0 + 'px)',overflow:'hidden'}
),backImg = createEl('div',{
	position:'relative',borderRadius:'50%',width:size + 'px',height:size + 'px',opacity:'0.4'}
),backShadow = createEl('div',{
	position:'absolute',width:size + 'px',height:size + 'px',left:'0',top:'0',zIndex:4}
),depth = createEl('div',{
	position:'absolute',width:size + 'px',height:size + 'px',left:'0',top:'0',zIndex:1}
);
	front.className = 'sticker-img sticker-front';
	backImg.className = 'sticker-img sticker-back';
	backShadow.className = depth.className = 'sticker-shadow';
	dom.appendChild(container);
	container.appendChild(mask);
	mask.appendChild(move);
	move.appendChild(front);
	move.appendChild(depth);
	move.appendChild(back);
	back.appendChild(backImg);
	back.appendChild(backShadow);
	value ={
	container:container,size:size,sizeQ:sizeQ,mask:mask,move:move,depth:depth,back:back,backImg:backImg,backShadow:backShadow}
;
	dom.addEventListener('mouseenter',function(e){
	onEnter(e,value);
}
,false);
	dom.addEventListener('mouseleave',function(e){
	onLeave(e,value);
}
,false);
	dom.addEventListener('mousemove',function(e){
	onMove(e,value);
}
,false);
	return this;
}
}
/* CommonJS */
 if (typeof exports == 'object') module.exports = sticker;
	/* AMD module */
 else if (typeof define == 'function' && define.amd) define(function(){
	return sticker}
);
	/* Browser global */
 else this.Sticker = sticker;
}
)();
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
13.60 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
13.60 KB
立即下载
傅梦萍冰
了解
打赏作者 鼓励作者
jquery特效10
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章