登录 注册

登录

  1. 论坛
  3. Joomla! CMS 相关讨论
  5. Joomla! 模板与样式
  7. 请教这两种图片处理效果怎样实现？

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

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



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

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

更多
2014年08月04日 12:25 #2 作者： Joomla之门
Joomla之门 回复了话题： 请教这两种图片处理效果怎样实现？
不管是你的截图，还是所给示范网页的真实效果，都看不出这个图片需要什么特殊代码。用 PS 平面设计技术就直接能做出这样的图片，有什么特别的地方吗？

如果我理解有误，请用文字详细解释你到底想要什么。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

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

更多
2014年08月07日 17:37 #3 作者： gubao
gubao 回复了话题： 请教这两种图片处理效果怎样实现？
第一张图片，用鼠标拖着图片可以360度旋转。
第二张图片，拖动那一条白线，会有另一幅图片左右移动进行遮盖。
麻烦白老师再看一下演示效果。谢谢！
我的网站，欢迎大家光临指导！
www.xygoood.com寻音谷——助你打开音乐之门！

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

更多
2014年08月07日 19:08 #4 作者： Joomla之门
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之门 回复了话题： 请教这两种图片处理效果怎样实现？
今天碰到一个 Joomla 插件，可以用来实现你想要的第一种图片效果：360度自由旋转全景图。

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

只要你准备好全景图的关键帧图片（一般24张或者36张），用这个插件的标记代码很容易就实现360度全景：
{ttbl}image/path/folder{/ttbl}
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

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

更多
2014年09月08日 11:46 #6 作者： Joomla之门
Joomla之门 回复了话题： 请教这两种图片处理效果怎样实现？
另一个同类插件 JLex 360 也能实现360度旋转全景图。这个看上去比前一个要更好，因为它没有显示播放按钮等，看起来界面更干净。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

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

更多
2014年09月08日 11:59 #7 作者： Joomla之门
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之门
Joomla之门 回复了话题： 请教这两种图片处理效果怎样实现？
找到一款免费的 Before/After 插件，功能一样。
付费下载 Joomla 3 扩展汉化版： 我要付费支持 Joomla 之门！

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

  1. 论坛
  3. Joomla! CMS 相关讨论
  5. Joomla! 模板与样式
  7. 请教这两种图片处理效果怎样实现？