jQuery制作图片旋转效果


Posted in Javascript onFebruary 02, 2017

以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的:

jQuery制作图片旋转效果

其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下:

(1)先定义好图片旋转的半径

(2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化

(3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置

(4)透明度的设置其实也是根据图片旋转时候的角度来定的。初始设置图片在正前方时是0度,无论是正时针还是逆时针方式旋转,当图片旋转角度大于0度

    小于180度时图片的透明度是逐渐减小的,这里为了图片在180度时不至于完全透明加了个小小的计算公式,代码会在下面展示。

(5)图片的缩放也是根据图片旋转角度而定的,相信容易理解。

(6)有了图片的X轴位置信息,缩放信息,透明度信息后,接下来就是很简单的事情了,只要将所有的信息通过CSS样式显示出来就可以了。

   css的样式会通过setInterval()方法逐渐改变。

下面来看下主要代码:

var thisleft=-(o.radius)*Math.sin((360/imgnum)*$(this).data("index")*(Math.PI*2/360))+(holderwidth/2);
 var thiszindex=360/imgnum*$(this).data("index")>180?360/imgnum*$(this).data("index")-360:-360/imgnum*$(this).data("index");
 var thisopacity=360/imgnum*$(this).data("index")<=180?(180-360/imgnum*$(this).data("index"))/180*1.2:
 (360/imgnum*$(this).data("index")-180)/180*1.2;

第二行的thiszindex是图片的深度信息,对每张图片我都给它加了一个index属性保存其索引值,图片会根据这个信息通过计算得到相应的深度值。

第三行的thisopacity是图片的透明度信息。

每一张图片都会被赋予一下的CSS样式:

$(this).css({
 "left":thisleft-(o.width*thisopacity)/2+"px",
 "top":(holderheight/2)-o.width*(thisopacity+1)/4,
 "z-index":thiszindex+180,
 "opacity":(thisopacity+0.2)/1.2,
 "width":o.width*(thisopacity+1)/2,
 "height":o.height*(thisopacity+1)/2
 });

第五行的opacity用了一个简单的公式使其在最深度时不至于完全透明。

在功能上我加了左右转的功能,其原理也就是将图片的X轴信息的正负值转换而已,代码如下:

if(dir=='left'){
 thisleft=-(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
 }else{
 thisleft=(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
 }

整个效果中用户可以自定义一下参数:

$.fn.scroll3d.defaults={
 speed:25,
 radius:100,
 width:200,
 height:150,
 direction:'left' 
 }

下面附上效果的完整代码:

(function($) {
 $.fn.scroll3d = function(options) {
 var opts = $.extend({}, $.fn.scroll3d.defaults, options);
 var $this = $(this);
 var o = $.meta ? $.extend({}, opts, $(this).data()) : opts;
 var radius = o.radius;
 var timer = 0;
 var xx = 0;
 var speed = o.speed;
 var dir = o.direction;
 $(this).hide();
 return this.each(function() {
 var $img = $(this).find('img').css({'position': 'absolute'}), num = 0;
 var imgnum = $img.length;
 var holderwidth = $(this).width(),
 holderheight = $(this).height();
 $img.each(function(i) {
 var imgsrc = $(this).attr("src");
 $(this).data({
 "index": i
 });
 $(this).load(function() {
 ++num;
 if (num == imgnum) {
 $this.show();
 }
 }).attr({
 "src": imgsrc
 });
 var thisleft = -(o.radius) * Math.sin((360 / imgnum) * $(this).data("index") * (Math.PI * 2 / 360)) + (holderwidth / 2);
 var thiszindex = 360 / imgnum * $(this).data("index") > 180 ? 360 / imgnum * $(this).data("index") - 360 : -360 / imgnum * $(this).data("index");
 var thisopacity = 360 / imgnum * $(this).data("index") <= 180 ? (180 - 360 / imgnum * $(this).data("index")) / 180 * 1.2 :
 (360 / imgnum * $(this).data("index") - 180) / 180 * 1.2;
 $(this).attr({
 "nowdeg": (360 / imgnum) * $(this).data("index")
 });
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 });
 function scrollimg() {
 $img.each(function() {
 var thisdeg = $(this).attr('nowdeg');
 var thisleft;
 xx = thisdeg;
 if (dir == 'left') {
 thisleft = -(o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 } else {
 thisleft = (o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 }
 var thiszindex = xx > 180 ? xx - 360 : -xx;
 var thisopacity = xx <= 180 ? (180 - xx) / 180 : ($(this).attr('nowdeg') - 180) / 180;
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 xx++;
 if (xx > 360) xx = 0;
 $(this).attr({
 "nowdeg": xx
 });
 });
 };
 var tt = setInterval(scrollimg, speed);
 $img.hover(function() {
 clearInterval(tt);
 }, function() {
 tt = setInterval(scrollimg, speed);
 });

 });
 };
 $.fn.scroll3d.defaults = {
 speed: 25,
 radius: 300,
 width: 200,
 height: 150,
 direction: 'left'
 }
 })(jQuery);

在HTML中只需要有一个DIV包含你所需要的图片就可以完成这个效果,例如:

<div class="holder" style="width:550px;height:300px;position:relative;">
 <img src="img/1.jpg" />
 <img src="img/2.jpg" />
 <img src="img/3.jpg" />
 <img src="img/1.jpg" />
 <img src="img/2.jpg" />
 </div>

代码的调用可以这样写:

$('.holder').scroll3d();

写的有点乱七八糟,还望各位见谅!

压缩包:test_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
node使用request请求的方法
Dec 20 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 #Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 #Javascript
javascript实现简易计算器
Feb 01 #Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
快速实现jQuery多级菜单效果
Feb 01 #Javascript
angular实现商品筛选功能
Feb 01 #Javascript
You might like
php连接Access数据库错误及解决方法
2013/06/20 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jquery获取节点名称
2015/04/26 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python学习小技巧总结
2018/06/10 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
一些PHP的面试题
2015/05/06 面试题
《大自然的语言》教学反思
2014/04/08 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
天下第一关导游词
2015/02/06 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
Java 定时任务技术趋势简介
2022/05/04 Java/Android