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 相关文章推荐
javascript中AJAX用法实例分析
Jan 30 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
深入array multisort排序原理的详解
2013/06/18 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python 处理数据的实例详解
2017/08/10 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python 动态绘制爱心的示例
2020/09/27 Python
大学生未来职业生涯规划书
2014/02/15 职场文书
护士个人自我鉴定
2014/03/24 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python