网易首页 > 网易号 > 正文 申请入驻

美女程序员jQuery制作英雄联盟皮肤3D旋转特效

0
分享至

是不是很炫酷!

这个是用Query制作j可拖拽3D万花筒旋转展示特效

因为代码过多,下面只展示网站样式代码!

需要文档版源码来我的前端群581549454,已上传到群文件

源代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery可拖拽3D万花筒旋转展示特效</title>

<style type="text/css">

*{margin:0;padding: 0;}

.pic{

width: 120px;

height: 180px;

margin: 150px auto 0;

position: relative;

/*transform 旋转元素*/

transform-style:preserve-3d;

transform:perspective(800px) rotateX(-10deg) rotateY(0deg);

}

body{background-color: #66677c;overflow:hidden;}

.pic img{

position: absolute;

width: 100%;

height: 100%;

border-radius: 5px;

box-shadow: 0px 0px 10px #fff;

/*倒影的设置*/

-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);

}

.pic p{

width: 1200px;

height: 1200px;

background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));

position: absolute;

top:100%;left:50%;

margin-top: -600px;

margin-left: -600px;

border-radius:600px;

transform:rotateX(90deg);

}

</style>

</head>

<body><script src="/demos/googlegg.js"></script>

<div>

<img src="img/1.jpg"/>

<img src="img/2.jpg" />

<img src="img/3.jpg"/>

<img src="img/4.jpg"/>

<img src="img/5.jpg"/>

<img src="img/6.jpg"/>

<img src="img/7.jpg"/>

<img src="img/8.jpg"/>

<img src="img/9.jpg"/>

<img src="img/10.jpg"/>

<p></p>

</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var imgL=$(".pic img").size();

var deg=360/imgL;

var roY=0,roX=-10;

var xN=0,yN=0;

var play=null;

$(".pic img").each(function(i){

$(this).css({

<!--translateZ 定义2d旋转沿着z轴-->

"transform":"rotateY("+i*deg+"deg) translateZ(300px)" });

<!--防止图片被拖拽-->

$(this).attr('ondragstart','return false');

});

$(document).mousedown(function(ev){

var x_=ev.clientX;

var y_=ev.clientY;

clearInterval(play);

console.log('我按下了');

$(this).bind('mousemove',function(ev){

/*获取当前鼠标的坐标*/

var x=ev.clientX;

var y=ev.clientY;

/*两次坐标之间的距离*/

xN=x-x_;

yN=y-y_;

roY+=xN*0.2;

roX-=yN*0.1;

console.log('移动');

//$('body').append('<div></div>');

$('.pic').css({

transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'

});

/*之前的鼠标坐标*/

x_=ev.clientX;

y_=ev.clientY;

});

}).mouseup(function(){

$(this).unbind('mousemove');

var play=setInterval(function(){

xN*=0.95;

yN*=0.95

if(Math.abs(xN)<1 && Math.abs(yN)<1){

clearInterval(play);

}

roY+=xN*0.2;

roX-=yN*0.1;

$('.pic').css({

transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'

});

},30);

});

});

</script>

<div>

<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>

<p>来源:<a href="http://www.aaa-cg.com.cn?lcc" target="_blank">素材</a></p>

</div>

</body>

</html>



特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
果然越不体面小生意往往闷声发大财!网友:一年不低于50万

果然越不体面小生意往往闷声发大财!网友:一年不低于50万

夜深爱杂谈
2026-03-23 20:05:31
郭士强观战!青岛最多领先38分大胜北控 约瑟夫杨30+9廖三宁15+6

郭士强观战!青岛最多领先38分大胜北控 约瑟夫杨30+9廖三宁15+6

醉卧浮生
2026-03-30 21:43:36
1963年,一位“疯子”工程师深山造出的12根铁管,拖垮一个帝国

1963年,一位“疯子”工程师深山造出的12根铁管,拖垮一个帝国

顾史
2026-03-29 19:28:05
我去看心脏病,医生却问我“行不行”?

我去看心脏病,医生却问我“行不行”?

果壳
2026-03-29 20:14:51
夺命电饭煲已被曝光!米饭进去秒变毒药,内胆是肝癌催化剂?

夺命电饭煲已被曝光!米饭进去秒变毒药,内胆是肝癌催化剂?

岐黄传人孙大夫
2026-03-16 18:47:19
唏嘘!前曼联巨星彻底陨落,30 岁竟落得这般下场

唏嘘!前曼联巨星彻底陨落,30 岁竟落得这般下场

澜归序
2026-03-29 03:30:49
台湾地区,长期阻碍中国统一就是马英九。这个人非常之狡猾!

台湾地区,长期阻碍中国统一就是马英九。这个人非常之狡猾!

安安说
2026-03-28 11:40:47
张檬晒广州新家,11个月儿子能吃一大碗辅食,被仨人照顾白白胖胖

张檬晒广州新家,11个月儿子能吃一大碗辅食,被仨人照顾白白胖胖

八怪娱
2026-03-30 09:07:22
SGA罚球数险超纽约全队 布朗:这些判罚都合理吗?

SGA罚球数险超纽约全队 布朗:这些判罚都合理吗?

体坛周报
2026-03-30 16:11:18
如果江苏女排夺冠,中国女排真要变成“江苏队”了?

如果江苏女排夺冠,中国女排真要变成“江苏队”了?

林子说事
2026-03-30 17:25:43
反转了! 刘晓庆妹妹录音曝光:她要是真把房子捐国家,我们签字配合

反转了! 刘晓庆妹妹录音曝光:她要是真把房子捐国家,我们签字配合

陈意小可爱
2026-03-28 15:49:01
汉马惊现“腿精天花板”!网传195cm,本人:我才186,别夸张!

汉马惊现“腿精天花板”!网传195cm,本人:我才186,别夸张!

观察鉴娱
2026-03-29 09:41:19
邀请中国共治!特朗普同意降税,不反华了?《上海公报》被摆上桌

邀请中国共治!特朗普同意降税,不反华了?《上海公报》被摆上桌

爱好源自好奇心
2026-03-30 19:29:59
8万人变8千人?白营惨遭打脸,柯文哲交棒黄国昌,一个时代结束

8万人变8千人?白营惨遭打脸,柯文哲交棒黄国昌,一个时代结束

鲸探所长
2026-03-30 17:20:19
河南一男孩吃蒸构树穗不到20分钟,突发腹痛呼吸困难,血压下降送入ICU抢救!父亲称常见老人食用,未料孩子会严重过敏

河南一男孩吃蒸构树穗不到20分钟,突发腹痛呼吸困难,血压下降送入ICU抢救!父亲称常见老人食用,未料孩子会严重过敏

大象新闻
2026-03-30 17:49:03
KTV聚会照被疯传!郭麒麟认了是本人!严浩翔私生公开小号关注列表

KTV聚会照被疯传!郭麒麟认了是本人!严浩翔私生公开小号关注列表

观察鉴娱
2026-03-28 09:22:06
800万美国民众抗议,特朗普终于承认:就是为了伊朗石油

800万美国民众抗议,特朗普终于承认:就是为了伊朗石油

兵国大事
2026-03-30 21:19:53
6999元起售!「专业V单」vivo X300 Ultra正式发布

6999元起售!「专业V单」vivo X300 Ultra正式发布

PConline太平洋科技
2026-03-30 22:47:44
俄罗斯不卖油了!普京禁令一下,遭殃的不是欧洲,而是这两类国家

俄罗斯不卖油了!普京禁令一下,遭殃的不是欧洲,而是这两类国家

阿离家居
2026-03-30 17:24:13
“黄毛的爹,酗酒的妈”,上海三口之家火了,只有孩子看着不叛逆

“黄毛的爹,酗酒的妈”,上海三口之家火了,只有孩子看着不叛逆

妍妍教育日记
2026-03-29 07:40:03
2026-03-30 23:04:49
嫂子VR
嫂子VR
每日搞笑段子,最新资讯
8文章数 119关注度
往期回顾 全部

科技要闻

一句谎言引发的硅谷血案

头条要闻

女子借公司500万维权14年收回1.2万:连利息零头都不够

头条要闻

女子借公司500万维权14年收回1.2万:连利息零头都不够

体育要闻

想进世界杯,意大利还要过他这一关

娱乐要闻

全红婵聊到体重哭了,每天只吃一顿饭

财经要闻

本轮地缘冲突,A股凭什么走出独立行情

汽车要闻

限时12.58万起 银河星耀8远航家系列上市

态度原创

教育
数码
手机
本地
公开课

教育要闻

妈妈不要怕,有我在,你的儿子女儿会平安快乐长大!

数码要闻

TrendForce下修2026年笔记本电脑出货预测,衰退幅度达14.8%

手机要闻

两款至尊版机型即将到来,或为一加和REDMI旗下

本地新闻

用Color Walk的方式解锁城市春日

公开课

李玫瑾:为什么性格比能力更重要?

无障碍浏览 进入关怀版