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

 更新时间:2015年11月18日 14:31:15   投稿:mrr  
通过jquery和css相结合的方式实现鼠标点击图片弹出画廊切换特效,效果逼真,下面小编把源码分享给大家供大家参考

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

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

效果演示     源码下载

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图片文字排版制作预览效果附源码下载的全部内容,希望大家喜欢。

相关文章

  • jquery统计复选框选中示例

    jquery统计复选框选中示例

    在jquery中如果我们要获取选中的checkbox我们可以input:checked,然后获取选中checkbox个数量时我们可以使用jQuery的size()方法或length属性来判断就行了
    2013-11-11
  • jquery实现两个div中的元素相互拖动的方法分析

    jquery实现两个div中的元素相互拖动的方法分析

    这篇文章主要介绍了jquery实现两个div中的元素相互拖动的方法,结合实例形式分析了jQuery基于鼠标事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2020-04-04
  • jQuery使用之标记元素属性用法实例

    jQuery使用之标记元素属性用法实例

    这篇文章主要介绍了jQuery使用之标记元素属性用法,实例分析了jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等使用技巧,需要的朋友可以参考下
    2015-01-01
  • JQuery教学之性能优化

    JQuery教学之性能优化

    jQuery是一款非常优秀的javascript框架,当我们使用到jQuery后就再也不想回到javascript时冗长的代码,那么jQuery的优化就摆在了我们的面前。那么我们优化JQuery应该从那些方面入手呢?
    2014-05-05
  • jquery中常用的SET和GET

    jquery中常用的SET和GET

    Jquery中的很多方法都是如此,主要包括如下几个
    2009-01-01
  • jQuery实现自动调整字体大小的方法

    jQuery实现自动调整字体大小的方法

    这篇文章主要介绍了jQuery实现自动调整字体大小的方法,涉及jQuery针对页面属性与样式动态操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery在iframe中无法弹出对话框的解决方法

    jQuery在iframe中无法弹出对话框的解决方法

    如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,下面有个不错的处理方法,希望对大家有所帮助
    2014-01-01
  • jQuery中hover与mouseover和mouseout的区别分析

    jQuery中hover与mouseover和mouseout的区别分析

    这篇文章主要介绍了jQuery中hover与mouseover和mouseout的区别,结合实例分析了jQuery中hover与mouseover和mouseout的区别与使用技巧,需要的朋友可以参考下
    2015-12-12
  • 基于jQuery实现的设置文本区域的光标位置

    基于jQuery实现的设置文本区域的光标位置

    之前做一个代码提示的功能涉及到在文本框中插入文本的操作,需要获得当前光标位置插入文本,本文章向大家介绍jQuery如何设置文本区域的光标位置,需要的朋友可以参考一下
    2018-06-06
  • 分享两款带遮罩的jQuery弹出框

    分享两款带遮罩的jQuery弹出框

    这篇文章主要为大家分享了两款带遮罩的jQuery弹出框,jQuery遮罩层在现在的网站中十分常见,感兴趣的小伙伴们可以参考一下
    2015-12-12

最新评论