基于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 相关文章推荐
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
移动端js触摸事件详解
Sep 18 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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实现链结人气统计
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
AngularJS内置指令
2015/02/04 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
应届生求职信写作技巧
2013/10/24 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
安全宣传标语口号
2014/06/06 职场文书
五一促销活动总结
2014/07/01 职场文书
工作表扬信范文
2015/01/17 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
工资证明格式模板
2015/06/12 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
浅析python中特殊文件和特殊函数
2022/02/24 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技