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 - HTML的request类
Jan 09 Javascript
初探jquery——表单应用范例
Feb 20 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python解析含有重复key的json方法
2019/01/22 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
西安交大自主招生自荐信
2014/01/27 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
小学五年级学生评语
2014/04/22 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
基层党建工作简报
2015/07/21 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
MySQL普通表如何转换成分区表
2022/05/30 MySQL