基于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 uaMatch源代码
Feb 14 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
如何用JS实现简单的数据监听
May 06 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
环保建议书
2014/03/12 职场文书
公证委托书
2014/08/01 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
安全生产先进个人总结
2015/02/15 职场文书
病假证明模板
2015/06/19 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL