登录 注册

登录

已解决 请教这两种图片处理效果怎样实现?

更多
2014年08月04日 09:50 #1 作者: gubao
请教这两种图片处理效果怎样实现?
看代码好像是CSS+js实现的,请教一下。谢谢!网址及效果位置如下:
solowheel.com.cn/orbit.html




我的网站,欢迎大家光临指导!
www.xygoood.com寻音谷——助你打开音乐之门!
附件:

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年08月04日 12:25 #2 作者: Joomla之门
不管是你的截图,还是所给示范网页的真实效果,都看不出这个图片需要什么特殊代码。用 PS 平面设计技术就直接能做出这样的图片,有什么特别的地方吗?

如果我理解有误,请用文字详细解释你到底想要什么。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年08月07日 17:37 #3 作者: gubao
第一张图片,用鼠标拖着图片可以360度旋转。
第二张图片,拖动那一条白线,会有另一幅图片左右移动进行遮盖。
麻烦白老师再看一下演示效果。谢谢!

我的网站,欢迎大家光临指导!
www.xygoood.com寻音谷——助你打开音乐之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年08月07日 19:08 #4 作者: Joomla之门
你在第一次发帖的时候附上这些文字说明不就好了吗?根据你的补充说明,我才刚刚理解了问题所在。

通过查看页面源代码,可以确认那些效果是特殊的 JS 文件实现的。看该页面的 head 部分:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<title>ORBIT环轨</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/page.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/fun.js"></script>
<script src="js/global.js"></script>
<script src="js/jquery.mj360.js"></script>
<script src="js/jquery.mChange.js"></script>
<script src="js/jquery.mScroll.js"></script>
</head>

CSS 文件有两个,JS 文件却有多个。其中文件名为 jquery.mj360.js 的这个,很显然与图片旋转有关,因为 360 代表了 360度(旋转) —— 当然,这得感谢作者命名比较规范。后面的 jquery.mScroll.js 这个文件应该是控制了第二张图片那个效果。

你可以学习一下这些 JS 文件(通过查看源代码就能找到下载链接),结合页面源代码里面查到的那些图片,尝试替换成你自己的图片来试验一下。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年09月08日 10:28 #5 作者: Joomla之门
今天碰到一个 Joomla 插件,可以用来实现你想要的第一种图片效果:360度自由旋转全景图。

插件名称叫 Turntable ,还是免费的。看看官方演示: techlister.com/jplugins/

只要你准备好全景图的关键帧图片(一般24张或者36张),用这个插件的标记代码很容易就实现360度全景:
{ttbl}image/path/folder{/ttbl}

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年09月08日 11:46 #6 作者: Joomla之门
另一个同类插件 JLex 360 也能实现360度旋转全景图。这个看上去比前一个要更好,因为它没有显示播放按钮等,看起来界面更干净。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年09月08日 11:59 #7 作者: Joomla之门
今天运气不错,第二种图片效果也有解决办法了:一款名为 Image Before/After 的 Joomla 模块(收费软件)可以实现,看看官方 demo 就马上能确定这一点:

joomla30.webkul.com/image-overlays/image-before-after.html

注意看官方演示图片上的拖曳手柄,用鼠标拖动,就能实现图片的“覆盖”与“揭露”。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2014年09月08日 12:03 #8 作者: Joomla之门
找到一款免费的 Before/After 插件,功能一样。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论