基于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>
以上内容是基于Jquery图片文字排版制作预览效果附源码下载的全部内容，希望大家喜欢。
相关推荐
-
Android实现文本排版
在项目中有一个小功能需要实现,就是对多行文本进行排版布局,每一行的内容又分为两部分,左边为标题,右边为描述,左边内容长度不确定,右边的内容需要对齐,如有换行也需要对齐右边的文本. 一.效果图 可以看到内容分成了两部分,左边的颜色与右边不一致,右边的描述文案统一对齐. 二.实现方案 以上功能,由于输入内容输入行数不确定,并且左边的文案长度也不确定,因此不能直接在布局中实现,基于此这里主要实现了以下6种方式 方案1 采用自定义控件的方式,继承TextView,重新onDraw函数,实现如下: /**
-
PHP 中英文混合排版中处理字符串常用的函数
# 判断某个位置是中文字符的左还是右半部分,或不是中文 # 返回值 -1 左 0 不是中文字符 1 右 # 用法 /* $a = 'this is 中文'; print is_chinese($a, 1); // 0 print is_chinese($a,8); // -1 print is_chinese($a,9); // 1 */ function is_chinese(&$str, $location) { $ch = true; $i = $location;
-
11个用于提高排版水平的基于jquery的文字效果插件
排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+
-
基于jQuery的试卷自动排版系统实现代码
根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择题选项
-
div+css排版的样例
div+css排版的样例 Div布局 body{text-align:center;margin:0;padding:0} /*text-align:center是ie中必须要有的*/ div { height:200px; color:red; } .title { margin:0 auto; width:776px; background-color:#abcdef; } .middle { margin:0 auto; width:776px; } .left { float:left;
-
网页颜色搭配技巧 文字字体、字号、字体排版等
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快浏览者打开网页的速度. 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅.而为了追求醒目的视觉效果,可以为标题使用较深的颜 色.下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的
-
文本左右对齐排版的批处理
如1.txt内容如下.复制内容到剪贴板代码: 111111111111111111111 98912 张三 222222222222222222 150020 李四四 333333333333333333333 360000 王五 444444444444444444 2332 赵六六 555555555555555555 222 田七 666666666666666666666 999999 舞吧通过批处理输出为:复制内容到剪贴板代码: 111111111111111111111 98912
-
Android重写TextView实现文字整齐排版的方法(附demo源码下载)
本文实例讲述了Android重写TextView实现文字整齐排版的方法.分享给大家供大家参考,具体如下: XRTextView类 package rong.android.test; import org.json.JSONArray; import org.json.JSONException; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor
-
基于jQuery试卷自动排版系统
需求 根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择
-
基于Jquery制作图片文字排版预览效果附源码下载
基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示 源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree
-
基于Jquery实现仿百度百科右侧导航代码附源码下载
先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示 源码下载 代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
-
基于jQuery实现select下拉选择可输入附源码下载
我们知道,一般select下拉框是只能选择的,不能用来输入内容的.而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择. 查看演示效果 源码下载 本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果.我们来看下如何使用.
-
基于jquery实现的tab选项卡功能示例【附源码下载】
本文实例讲述了基于jquery实现的tab选项卡功能.分享给大家供大家参考,具体如下: jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到.今天找到一个实现jquery tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了.用 tab 页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中.很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕.这一款基于jquery 的
-
基于javascript实现漂亮的页面过渡动画效果附源码下载
用户通过点击页面左侧的菜单,对应的页面加载时伴随着滑动过滤动画,并带有进度条效果.当然页面的加载是Ajax驱动的,整个加载过渡过程非常流畅,非常好的用户体验. HTML HTML结构中,.cd-main包含页面主体内容,.cd-side-navigation包含着侧边导航条,#cd-loading-bar则是用来做进度条动画用的. <nav class="cd-side-navigation"> <ul> <li> <a href="
-
jQuery实现图片上传预览效果功能完整实例【测试可用】
本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j
-
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）
内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示 源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,
-
一款简单的jQuery图片标注效果附源码下载
为了提高用户体验度,在一些电商网站和家居网站上我们会看到,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格等等,设计非常的人性化,今天我们通过实例给大家分享使用jQuery插件来实现这一效果. 先给大家展示下效果图: 效果演示 源码下载 HTML 首先,我们加载jQuery库和easypin插件. <script src="jquery.min.js"></script> <script src="jqu
-
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示 源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><
-
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片.图片集.Ajax数据,还能加载SWF影片,iframe页面等等. 效果演示 源码下载 fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse