基于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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
Vue实现菜单切换功能
Nov 08 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
PHP 批量删除 sql语句
2009/06/05 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php导出excel格式数据问题
2014/03/11 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Android分包MultiDex策略详解
2017/10/30 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
竞聘演讲稿
2014/04/24 职场文书
高中语文课后反思
2014/04/27 职场文书
我的梦想演讲稿
2014/04/30 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
甜品店创业计划书
2014/09/21 职场文书
六一儿童节标语
2014/10/08 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
python如何在word中存储本地图片
2021/04/07 Python
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js