基于Jquery制作图片文字排版预览效果附源码下载


Posted in Javascript onNovember 18, 2015

基于jQuery图文排版图片预览特效。这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效。

效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦。

基于Jquery制作图片文字排版预览效果附源码下载

效果演示     源码下载

html代码:

<div id="fullscreen">
 <div id="fullscreen-inner">
 <div id="fullscreen-inner-left" class="fullscreen-inner-button"><span class="icon-caret-left"></span></div>
 <div id="fullscreen-inner-right" class="fullscreen-inner-button"><span class="icon-caret-right"></span></div>
 <div id="fullscreen-inner-close" class="fullscreen-inner-button"><span class="icon-close"></span></div>
 <div id="fullscreen-image"></div>
 </div>
</div>
<div id="wrapper">
 <div id="wrapper-inner">
 <div class="wrapper-inner-title">True Story.</div>
 <div class="wrapper-inner-content">
  <div class="wrapper-inner-content-image">
  <img src="_assets/greece1.jpg"/>
  <img src="_assets/greece2.jpg"/>
  <img src="_assets/greece3.jpg"/>
  <img src="_assets/greece4.jpg"/>
  <img src="_assets/greece5.jpg"/>
  <img src="_assets/greece6.jpg"/>
  <img src="_assets/greece7.jpg"/>
  <img src="_assets/greece8.jpg"/> 
  <img src="_assets/greece9.jpg"/> 
  <div class="wrapper-inner-content-image-hover">
   <div class="wrapper-inner-content-image-hover-cercle">
   <span class="icon-search"></span>
   </div>
  </div>
  </div>
  <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
 </div>
 <div class="wrapper-inner-content">
  <div class="wrapper-inner-content-text" style="margin-right:35px;">
  <p>Morbi faucibus euismod lectus. Morbi rhoncus dignissim tellus eget egestas. Praesent id leo quis massa posuere malesuada nec ut velit. Vivamus tincidunt nunc non sem bibendum posuere. Phasellus commodo dui non sapien aliquam, nec luctus metus ornare. Nullam imperdiet sollicitudin sodales. Morbi quis accumsan enim. Nulla sodales non quam vel dignissim. Donec at ipsum a odio aliquet pellentesque ut ut libero. Sed id dolor nisi. Curabitur eu odio nec tellus scelerisque ultrices ut at nunc. Sed a fringilla ligula.</p>
  <p>Aenean ullamcorper tortor vitae lorem sollicitudin luctus.</p>
  </div>
  <div class="wrapper-inner-content-image">
  <img src="_assets/venice1.jpg"/>
  <img src="_assets/venice2.jpg"/>
  <img src="_assets/venice3.jpg"/>
  <img src="_assets/venice4.jpg"/>
  <img src="_assets/venice5.jpg"/>
  <img src="_assets/venice6.jpg"/>
  <img src="_assets/venice7.jpg"/>
  <img src="_assets/venice8.jpg"/> 
  <img src="_assets/venice9.jpg"/> 
  <div class="wrapper-inner-content-image-hover">
   <div class="wrapper-inner-content-image-hover-cercle">
   <span class="icon-search"></span>
   </div>
  </div>
  </div>
 </div>
 </div>
</div>

以上内容是基于Jquery图片文字排版制作预览效果附源码下载的全部内容,希望大家喜欢。

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
javascript下拉列表菜单的实现方法
Nov 18 #Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 #Javascript
详解JavaScript中常用的函数类型
Nov 18 #Javascript
JavaScript如何动态创建table表格
Aug 02 #Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 #Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 #Javascript
如何使用jquery easyui创建标签组件
Nov 18 #Javascript
You might like
基于Zend的Captcha机制的应用
2013/05/02 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python异常处理例题整理
2019/07/07 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
2014庆六一活动方案
2014/03/02 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
党员目标管理责任书
2014/07/25 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
保研推荐信格式
2015/03/25 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android