html万花筒图片轮播代码,jQuery实现可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。
进去后可以上下左右的拖动图片。
本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素。
默认值: flat
继承性: no
版本: CSS3
JavaScript 语法: object.style.transformStyle="preserve-3d"
有2个属性值可选择:
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
示例代码如下:
jQuery可拖拽3D万花筒旋转特效 - 何问起
*{margin:0;padding: 0;}
.hovertree{
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;}
.hovertree 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%);
}
.hovertree 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);
}
.hewenqi{position:absolute;z-index:99;}
a{color:blue;}
$(function(){
var imgL=$(".hovertree img").size();
var deg=360/imgL;
var roY=0,roX=-10;
var xN=0,yN=0;
var play=null;
$(".hovertree img").each(function (i) {
$(this).css({
//
"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('
$('.hovertree').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;
$('.hovertree').css({
transform:'perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
});
},30);
});
});
来源:何问起 说明
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
html万花筒图片轮播代码,jQuery实现可拖拽3D万花筒旋转特效相关推荐
- unity实现图片轮播效果_Unity3D实现列表拖拽轮播分页滚动功能
在使用UGUI的ScrollRect做列表滚动时,会有分页滚动的需求,基于ScrollRect写了一个,只需要一个ScrollRect组件即可 效果截图: Threshold为滚动阈值,当翻页的长度达 ...
- 图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --><div id= ...
- html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...
- html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
- 简易javascript图片轮播代码
javascript图片轮播代码 因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button ...
- Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- html图片轮播replace,JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下 无标题文档 .img-div img{display:none;} 1 2 3 4 5 var zBase= { $id:function(id){r ...
- jQuery芝麻信用官网顶部图片轮播代码
下载地址 jquery.SuperSlide.js制作芝麻信用官网网页顶部导航菜单和宽屏图片轮播切换组合布局代码.一款非常实用大气的网站顶部导航和图片布局样式代码. dd:
- 宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程
本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库 构建html 整个代码分为三部分: 1.加载部分loadding : 2. ...
最新文章
- 趋势畅想-搭载android系统的智能数码相机
- linux进程隐藏 hook readdir函数 挂载覆盖/proc/pid 目录
- Mybatis分页插件更新
- 任意进制转换的递归实现
- u盘魔术师装linux,使用U盘魔术师安装Win7系统教程
- python模块下载失败_python 安装tushare模块出错的一个解决方法
- Linux终端下翻页操作
- java服务端开发安全_后端开发:APP与后端交互的安全性
- Eclipse install new software 失败 解决方案
- java 随机生成大写字母_java 生成随机大写字母,整数,小写字母
- Barrage 弹幕实现原理
- U盘格式化后恢复,DiskGenius 4.9.6 海外注册版
- 登陆模块邮箱用例设计_邮箱注册模块测试用例.doc
- ​元宇宙与AI热度不减,Gartner 2023 年十大战略技术趋势完整解析
- 杭州电子科技大学acm--2021
- Protobuf协议格式详解
- Java 下载Excel打不开是什么鬼
- day02【Collection、泛型】
- 没有oracle客户端可以连接数据库,Oracle数据库之SqlDbx连接oracle(无需安装Oracle客户端)...
- 国家司法考试真题模拟APP