专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > jQuery

基于jQuery图文排字图片预览特效

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
基于jQuery图文排版图片预览特效

基于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>

via:http://www.w2bc.com/article/jquery-picture-and-text-layout

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

  • jQuery搜索框输入文字下拉揭示菜单

    jQuery搜索框输入文字下拉提示菜单 jQuery搜索框输入文字下拉提示菜单 原文地址: http://www.jq22.com/jquery-info6193 ...

  • 7个替开发者准备的有用的jQuery技巧

    7个为开发者准备的有用的jQuery技巧 一、在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(fu...

  • jQuery获取呼应Input例子

    jQuery获取相应Input例子 页面上有许多input框,使用的是EasyUI样式,中间还参杂着各种其他无id的Input框,如下: <input class=...

  • webpack 引出jquery和第三方jquery插件

    webpack 引入jquery和第三方jquery插件 1、引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。 index....

  • JQuery的开发与使用经验

    JQuery的开发与使用心得 关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和...

  • 深入学习jQuery卡通片控制

    深入学习jQuery动画控制 &times; 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话   jQuery动画可以使用fade、...

  • jquery操作table报表

    jquery操作table表格 一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...

  • html + css + jquery实现简略的进度条实例

    html + css + jquery实现简单的进度条实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq...

  • jquery中ajax方法的datatype的功用

    jquery中ajax方法的datatype的作用 今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...

  • jQuery菜单示范(全选,反选,取消)

    jQuery菜单示例(全选,反选,取消) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

热门推荐: