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 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue3中的组件间通信
Mar 31 Vue.js
浅谈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实现从上往下打印二叉树的方法
2018/01/18 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
Python切片用法实例教程
2014/09/08 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python实现FTP文件传输的实例
2019/07/07 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
自我鉴定模板
2013/10/29 职场文书
师范学院教师自荐书
2014/01/31 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
高考备战决心书
2014/03/11 职场文书
优质服务活动实施方案
2014/05/02 职场文书
小组名称和口号
2014/06/09 职场文书
小学课外活动总结
2014/07/09 职场文书
咖啡店创业计划书
2014/08/15 职场文书
高中运动会广播稿
2014/09/16 职场文书
个性与发展自我评价
2015/03/06 职场文书
运动会新闻稿
2015/07/17 职场文书
工作服管理制度范本
2015/08/06 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python之基础函数案例详解
2021/08/30 Python