谁能知道这个页面的图片撕裂效果是怎样实现的?

请教一下大家,这个网站的鼠标放上去图片消失显示文字的内容是如何实现的?http://www.hello-code.com/blog/Programming

2个回答

jquery.Photofy插件


<link href="http://www.hello-code.com/CSS/Photofy.css" rel="Stylesheet" type="text/css" />
<div class="qitem">
    <a href='http://www.hello-code.com/blog/Bootstrap'>
        <img src='http://www.hello-code.com/Images/CagetoryIcon/62.jpg' alt="" title="" width="106" height="106" />
    </a>
    <span class="caption">
        <h4>
            Bootstrap
        </h4>
        <p>
            Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件
        </p>
    </span>
</div>
<div class="qitem">
    <a href='http://www.hello-code.com/blog/Memcached'>
        <img src='http://www.hello-code.com/Images/CagetoryIcon/63.jpg' alt="" title="" width="106" height="106" />
    </a>
    <span class="caption">
        <h4>
            Memcached
        </h4>
        <p>
            Memcached是免费的,开源的,高性能的,分布式内存对象的缓存系统
        </p>
    </span>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.hello-code.com/JS/Photofy.js"></script>
<script type="text/javascript" src="http://www.hello-code.com/JS/jquery.easing.1.3.js"></script>
shuijun1
落寞红尘 3Q
4 年多之前 回复

效果真心不错!我也是学网页的,可以多多交流!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
android-使用ViewGroup实现左右滑动切换界面以及界面裂开的效果

效果图:         源码下载:http://download.csdn.net/detail/centralperk/5142933   关于ViewGroup的一点介绍: 这里有个地方要注意,那就要明白ViewGroup的绘图流程:ViewGroup绘制包括两个步骤:1.measure 2.layout 在两个步骤中分别调用回调函数:1.onMeasure()   2.

如何制作一个纸张的撕裂效果

1. 新建一个文件,大小自定,并新建一个图层填充颜色(渐变色还是纯色看需求选择),将此图层隐藏。 2. 在背景图层中用套索工具选出类似下图的 3.用快捷键【Q键】 进入蒙版编辑 4.打开滤镜——像素化——晶格化 数值大致如下,实际运用的话可以看情况而定    5. 再次【Q】退出蒙版编辑,   然后在选区内填充 灰白色,再添加杂色: 滤镜——杂色——添加杂色

photoShop图片撕裂效果

photoShop图片撕裂效果.......

jQuery页面顶部折角图片撕开效果

折角广告代码,或许你已经看到过了,现在一些门户网站还可看到这种效果的身影,用鼠标拖着折角的边,往下拉,就可把折角拖下来

数据库一致性的逻辑I/O错误 页撕裂

SQL Server 检测到基于一致性的逻辑 I/O 错误 校验和不正确(应为: 0xd4eae74b,但实际为: 0xd4eb674b)。在文件 'D:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\DATA\CCMS.mdf' 中、偏移量为 0x000000005be000 的位置对数据库 ID 7 中的页 (1:735) 执行 读取 期

10款让你心动的 HTML5 &amp; CSS3 效果

这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的、实用的功能,有的是先进的 Web 技术的应用演示。不管哪一种,这些案例中的技术都值得我们去探究和学习。 1、超炫的 HTML5 粒子效果进度条 我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5Cavnas 编写的进度条效果。看着这么炫的 Loading 效果,即使让我多等

Asp.Net+Jquery实现的图片放大镜效果

Asp.Net+Jquery实现的图片放大镜效果。如电子商城的商品详细页面的图片放大镜效果

【UE4 shader】横向撕裂

主要是根据上一篇的一个灵活应用

快速知道当前页面是哪一个activity

列表内容快速知道当前页面是哪一个activity 知晓当前是在哪一个活动这个技巧将教会你,如何根据程序当前的界面就能判断出这是哪一个活动。可能你会觉得挺纳闷的,我自己写的代码怎么会不知道这是哪一个活动呢?很不幸的是,在你真正进入到企业之后,更有可能的是接手一份别人写的代码,因为你刚进公司就正好有一个新项目启动的概率并不高。阅读别人的代码时有一个很头疼的问题,就是你需要在某个界面上修改

win7画面撕裂问题

开始运行Unity画面撕裂,以为是Unity设置问题,后来发现视频也会撕裂,多方查找试了n多种方法后,通过更改Aero主题解决。

css页面一些动态效果展示

文字跑马灯效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1038 触摸水波涟漪效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1350 下拉菜单效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1875

第十四讲 网页的动态效果

经常上网的朋友一定有过这样的体验,当打开某个网页时一张图片会慢慢移入,或者鼠标停到某个图片上它会变成另一幅图片,这就是DHTML,人见人爱的动态网页。  动态网页可让访问者和网页产生互动,使网页元素(文字、图像等)显示简单的动画效果。  FrontPage2000就提供了制作动态网页的方法。实现动态效果有三种方法:DHTML工具、组件和插入HTML语句,前二种方法操作都比较容易和直观,你完全可以轻

app引导页(背景图片切换加各个页面动画效果)

前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了蛮多东西的,所以写一篇博客跟大家分享一下. 1.显示三个页面的Activity  用view pager去加载三个fragment实现,控制点点点

捕屏成图片-带撕裂效果

捕屏抓图成图片.捕屏成图片-带撕裂效果,内带SN。

简单实现弹幕效果

首先分析一下,他是由三层布局来共同完成的,第一层视频布局,第二层字幕布局,第三层输入框布局,要想让这三个布局在同一页面上,必须用相对布局或帧布局。 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-a

百度明星图片布局实例

该案例主要实现了百度图片明星页面的布局及透明度的实现效果。

手把手教小白如何用css+js实现页面中图片放大展示效果

1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀,来来来,我教你! 2.详情 说太多也没有用,直接贴上代码。新手小白,可以直接复制代码到本地运行。需要注意一下几点 将代码中的jquery.js的库文件链接改成自己的路径 .将图片也改成自己的路径与

解决游戏画面撕裂问题谁家显示器更强?

[摘要]NVIDIA G-Sync和AMD Free Sync之争将是2015年显示器市场的一大亮点,它们都需要显卡和专用显示器支持,从而实现智能刷新率调节。 腾讯数码讯(编译:Lotus)不论是NVIDIA还是AMD,都在寻求改善显卡性能、增强游戏画面效果的更有效形式,其中之一便是高帧速率带来的画面撕裂效果。两家显卡大厂的技术方向也是非常相似:通过显卡实现智能刷新率

页面交互效果实现分析

现在前端页面能够实现的交互效果越来越酷炫,也越来越复杂。但是这些特效背后的形成机制,却始终简洁优雅。简单说来,一个交互效果的实现,是由HTML提供页面骨架,JavaScript负责行为事件,而页面中呈现出的各种各样的效果,是由CSS完成的。当然,每一个特效形成的具体原理各有不同,不过也是有规律可寻。

每天一点点 PS制作照片撕裂效果

代码敲累了,来点PS调剂调剂,动手制作照片像纸一样的撕裂效果,应该算有特色的吧!制作过程中的参数可以根据具体情况调整。方法/步骤1、首先打开一张图片,双击右下角的图层面板上的图层让背景图层变为普通图层,也就是图层0,然后新建一个图层1,将图层1和图层0的上下位置调换(如图所示);选择图层1,图像→画布大小(将相对勾上,宽度和高度填相同的值,数值大小根据图片大小而定,本例填1),按确定,再将图层1填...

如何实现通过右键查看源代码来查看jsp页面的名字

在html或jsp文件中的中加入然后我们就可以在应用的时候通过右键->查看源代码中找到页面的名称了示例如下: http://localhost:8091/business/drawbill.jsp">function submitForm(){ var rows = document.all.mmTable.rows.length;  if (rows   alert("对

LCD显示异常分析——撕裂(tear effect)

概述 在上一篇《LCD显示异常分析——开机闪现花屏》中,我们一起分析了开机花屏的问题,在这一篇中,我将对LCD撕裂(tear effect)问题进行详细分析,以及给出这类问题的常用解决方法。 本文适用范围: 对象:LCD驱动调试人员 硬件:带GRAM的LCD (如SPI/MCU/DSI CMD屏) 软件:所有嵌入式操作系统 现象 首先贴一张动态图,让大家能直观...

常用的javascript特效代码

自己收集的好看的javascript特效包括 滑动门 幻灯片 关机效果 日历 相册 撕裂页等js效果

js实现页面展示图片

js实现前端展示图片,不用提交后端服务,就可以把图片转换成base64编码展示在前端页面,而且可以对图片的尺寸进行压缩控制

jquery 代码

更好的实现页面的美观,图片更加生动,效果更佳好

三个小伙子同时爱上一个姑娘,决斗来解决谁娶这个姑娘

三个小伙子同时爱上一个姑娘,为了决定他们谁能娶这个姑娘,他们决定用手枪进行一次决斗。 小李的命中率是30%,小黄比他好些,命中率是50%,最出色的枪手是小林,他从来不失误,命中率100%。由于这个显而易见的事实,为公平起见,他们决定按这样的顺序:小李先开枪,小黄第二,小林最后。然后这样循环,直到他们只剩下一个人。那么这三个人中谁活下来的机会最大呢?他们都应该采取什么样的策略? 解析:

activity切换动画与页面切换动画

关于android的页面跳转和动画,怎样实现页面的跳转和动画

Spx 截图工具(带撕边效果) V6.0、7.0

SPX Instant Screen Capture 现在的截图繁多、本地几乎没有安装任何截图软件、网页截图用Fireshot完全满足几乎所有需求、无意间在国外某论坛看到的贴图带有撕裂效果、无独有偶、后续在各大论坛均有部分大神贴图是这种撕裂效果、后来查找就是该工具SPX。 以下简单介绍下: SPX6.0的option界面(截图效果为7.0工具截图): SPX7.0的op

android app引导页(背景图片切换加各个页面动画效果)

http://blog.csdn.net/lowprofile_coding/article/details/48037095(转) 前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了

飞来横祸,宝宝的上唇系带摔得撕裂了

这是昨天晚上发生的事情了,11月12日晚9 点左右,我得永远记住这一天,我白玉无暇的宝宝有了人生第一个也许是永远不能复原的伤口。我想把这件事原原本本记一下,里面有细节和心情,作为日后育儿的参考和儆戒。快8点半的时候,我开始照料宝宝的睡前三部曲,一放水(就是尿尿),二洗脸,三洗脚。正好小清给我打了个电话,说公司裁员他下岗了,很简短的跟他说了几句,解释要照顾宝宝睡觉,约好再聊。不想小家伙趁这点时间

图片预加载三大方法

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。方法一:用CSS和JavaScript实现预加载实现预加载图片有很多方法,包括使用CSS、J

异步刷新及一些心得

AJAX指异步JavaScript及XML,它不是一种新的编程语言,而是一种使用现有标准的新方法。 AJAX基于JavaScript和HTTP请求的,因为AJAX通过在后台与服务器交换少量数据的方式,允许网页进行异步刷新。这意味着可能在不重载整个页面的情况下,对网页的一部分进行更新,通过AJAX,可以创建更好、更快及更友好的WEB应用程序。 AJAX的工作原理相当于在用户和服务器之间加了一个中

jquery实现在鼠标点击处的炫酷效果

鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图噢 是不是很炫酷,直接贴代码: 测试 *{ margin: 0px; padding: 0px; } $(function(){ var height=$(window).width(); $('#test').css({ 'height':height, }); var n

卷页滤镜PS

卷页滤镜,PS的插件,适合喜欢PS的朋友们。

Unity3d Linux 下面画面撕裂问题

在Linux下游戏开发过程中,遇到了画面撕裂(tearing)的问题,一般来说,垂直同步应该是可以解决掉画面撕裂的问题,但是在多屏显示的情况下,即使开启了垂直同步,依然不能解决撕裂问题。 多屏显示是指将2个或者两个以上的屏幕显示游戏界面,比如说,游戏设置为1400×1800的分辨率,分别显示在1400×900的双屏上,这样就会有画面撕裂问题。测试环境为OS Ubuntu(15.10),双显示屏,Nv

js 实现一个图片浮动的效果

利用window对象,实现一个图片的浮动效果  1、现有一个广告div,就是我们要控制的,它的起始点(0,0)    2、设定横向和纵向的速度    3、控制广告div移动     1)广告div是否达到边界      2)如果到达边界后,我们设置速度反向移动      http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

webview中页面的图片或js本地调用的例子

webview中页面的图片或js本地调用的例子,这个是通过contentprovider实现的,可以提高加载速度

JQuery实现页面随滚动条滚动而动态加载内容的效果

新浪微博有这个功能,刚才思考一下 ,简单的写了一下实现方法,代码是Js的.      无可否认,这种方式应该算是web2.0的产物,在用户体验上具备很好的感受,除了微博在使用该方式外,另外我还发现有几个其他性质的网站也在用这种方式,原因是他们的网站页面比较长,所以用户在浏览的时候随着滚动条的拖拽而不断加载新的内容到浏览器内,虽然体验会不错,但是我感觉这种方式对搜索引擎的友好性将会降低.欢迎转载但请

页面的框架移动的javascript代码

这个html的页面主要的实现页面的框架,拖动的效果,里面包含了javascript实现的代码,有助对于页面的document的盒子框架的属性的了解

Unity实现滑页效果(UGUI)

简介项目需要...直接展示效果吧: 原理使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果。 实现过程1.创建两个panel,上面的panel用于显示,下面的panel用于存放按钮 2.在TopPanel上添加ScrollRect脚本,用于滑动 3.在TopPanel下创建一个新的Panel,并在子Panel下拜访要显示的对象 4.将该

后台获取图片信息,在页面展示

做的一个项目,有一个展示信息的页面,同时要展示相应的图片。一开始是想用jQuery easyUI的datagrid,但是这个显示效果不好,会出现表格的一些特性,展示图片时会有加减号控制。其实是我想多了,图片就放在本地,数据库表中只是存储的图片的基本信息(ID,URL等),其实可以在后台获取这些信息后直接传到页面,在相应的地方展示出来就可以了。在这我是在一个form表单中展示。后台controlle...

JS翻书效果

JS+DIV+CSS实现页面的翻书效果,很漂亮!

裂屏撕屏的视频分析

最近碰到了大的难题,视频播放的时候会有裂屏的现象。具体的效果如下图所示:

Android 粒子爆炸效果,可以给任意 view 添加该效果

Android 粒子爆炸效果,可以给任意 view 添加该效果

JS实现同页面,点击切换效果

效果:同一页面,点击切换显示图片。代码实现:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;demo&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot; /&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;show

浏览器渲染页面的步骤

浏览器的渲染页面时,表示网站资源已经请求成功。 渲染时,大致的流程如下: (解析html以构建dom树->构建render树->布局render树->绘制render树) 具体的流程如下: 1:浏览器会将HTML解析成一个DOM树,DOM树的构建过程是一个深度遍历过程,当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点, 2:将CSS解析成CSS规则树; 3:根据DOM树和

photoshop 撕裂的纸效果

纸撕裂的psd源文件,可以教你如何制作纸撕裂的效果。

浏览器渲染页面过程

1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓存情况),浏览器向服务器发出HTTP请求,服务器返回 HTML 文件; (善用缓存,减少HTTP请求,减轻服务器压力) 2. 浏览器载入 HTML 代码,发现 <head> 内有一个 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求,获取浏览器返回的CSS文件; (CSS文件合并,减少HTTP请求

【后知后觉】AJAX核心对象——XMLHttpRequest

自从把AJAX学了之后,就是在云里雾里飘着,想总结,却无从下手,就一直拖到现在。最近看DRP,王勇老师简单的讲了AJAX,对这个又是技术又是技巧的东西做了再一次的解,感觉自己稍微理解了一些。现将我现在理解的分享下。 首先什么是AJAX呢? AJAX简介: AJAX这个名词最早是由Jesse James Garrett提出的,当时给出的解释是:Asynchronous JavaScript And XML,虽然当时Jesse James Garrett也曾发表文章介

撕裂边效果制作工具

撕裂边效果制作工具

相关热词 c# cad插入影像 c#设计思想 c#正则表达式 转换 c#form复制 c#写web c# 柱形图 c# wcf 服务库 c#应用程序管理器 c#数组如何赋值给数组 c#序列化应用目的博客园
立即提问