Jq实现的3Q图片切换特效,代码简单,效果不错。
function test{ if(imgScan.isStart==true) return; imgScan.isStart=true; //点击第一张 for (var i = 0; i < $(".centerImg").length; i ) { var mHeight = $($(".centerImg")[i]).height(); var mLeft = $($(".centerImg")[i]).offset().left - $("#imgCenter").offset().left - 30; var mTop = (300 - mHeight) / 2; if (mHeight == 300) { $($(".centerImg")[i]).animate({ marginLeft: "-500px", opacity: 0 }, 500, function() { //回到等待位置 $(this).css("margin-left", "300px").css("display", "none").css("height", "160px").css("margin-top", "70px").css("z-index", "0"); imgScan.isStart=false; }); } else if (mHeight == 160) { $($(".centerImg")[i]).css("display", "none").css("z-index", 0);; $($(".centerImg")[i]).animate({ height: "180px", marginTop: "60px", marginLeft: "90px", opacity: 1 }, 500); } else { $($(".centerImg")[i]).css("z-index", mHeight) $($(".centerImg")[i]).animate({ height: mHeight 40 "px", marginTop: mTop - 20 "px", marginLeft: mLeft "px" }, 500,function(){}); } } }
演示地址:http://www.pengyaou.com/LegendsZ/eg/3DImgC/
文章出处:http://www.pengyaou.com/LegendsZ/File/2014/07/31/20140731164425214.html
相关推荐
jQuery-图片轮换
jquery新闻图片轮换,需要加入jquery基类
jquery 3D图片轮播插件
jquery特效,jquery焦点图,jquery图片轮换,jquery相册效果,焦点图实例,淘宝焦点图代码下载,{keyword},JS广告代码,JS特效代码
jquery mobile 图片轮换 html5 可以有用google等浏览器测试,test.html是普通的图片轮换,test1.html是html5图片轮换,按住右键向右或者向左滑动且滑动的距离大于等于30px。 1.向右滑动,图片停留,任意点图片之外...
jquery 3d图片切换
jQuery图片折叠轮换代码,可以点击左右箭头按钮切换图片,漂亮简洁。兼容主流浏览器,phplearn初学者推荐下载! 使用方法: 1、head区域引用文件 jquery.min.js,chuxz.css 2、在文件中加入<!-- 代码 开始 --><!...
用鼠标点击或者鼠标经过相应的数字会显示相应的图片
使用Jquery 写的一个图片轮换播放的插件 很好用的
jquery 实现的一个图片轮换变化功能,很不错的效果呀!!
每个几秒切换一张图片 很不错的插件 简单实用
超极简单实用 图片轮换效果jquery+js+html
jQuery 3D图片旋转切换特效是一款响应式3D旋转木马jQuery插件jR3DCarousel,有多种效果可供选择。
jquery实现3D图片相册展示
jQuery立体式图片轮换效果 jQuery立体式图片轮换网页特效.zip
modernizr html5 jquery 3D图片翻转幻灯片效果下载
jquery 轮换图片插件 FlexSlider 灵活运用
根据jQuery写的3D效果图片墙,3D效果逼真,图片显示清晰酷炫
jquery 3D图片旋转木马_图片叠加自动轮播旋转切换代码
jQuery 3D图片叠加css3翻转图片切换特效