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动画animate方法使用介绍
May 06 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
js实现验证码功能
Jul 24 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP学习笔记之二
2011/01/17 PHP
php session安全问题分析
2011/06/24 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
公司委托书范本5篇
2014/09/20 职场文书
爱心助学感谢信
2015/01/21 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
python获取字符串中的email
2022/03/31 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL