51dev.com IT技术开发者社区

51dev.com 技术开发者社区

效果

侧边横幅动画效果

侧边横幅动画效果

我们在写页面的时候,常见的侧边横幅广告是通过position:fixed实现的,这样定位的好处是无论主体内容怎么变化,侧边的位置永远保持不变,当然,这也是这种效果的弊端,网页效果死板单一,所以,我们今天就要为这种侧边横幅添加一个动画效果。具体的实现思路是,也是通过定位,但不是position:fixed,而是posit...

基于scroll的吸顶效果

基于scroll的吸顶效果

本次要实现的是一种常见的网页效果,如下:页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下所示:我们分三步实现上面的效果。首先是页面的基础结构,为了简化操作,将头部、导航部分和主体内容部分全部用图片表示。<...

JS之滚动条效果2

JS之滚动条效果2

在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动。下面针对要实现的效果进行分析:首先是页面基础结构,要实现内容的相对移动,里面的内容需要针对外层盒子相对定位,宽度应该大于外层盒子,而且外层盒子应该超出隐藏。下面是一...

JS之滚动条效果

JS之滚动条效果

滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条。首先要实现的是上面的这种效果:当鼠标拖拽手柄前后移动时,滚动条的填充色和右侧的百分比随之一起变化。为了实现上面效果,我们先来分析页面结构:一个基本的大...

js实现照片墙效果

js实现照片墙效果

本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置。首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库:underscore.js,因为图片的数量是不固定的,这里我们采用动态添加的方式生成li,再在li里面添加图片。<...

js实现星空效果

js实现星空效果

本次主要是来实现上面的星空效果:在黑色的背景下面,有大小不一的星星在闪烁,当鼠标悬浮时,星星放大并旋转。首先,我们需要一个大的夜空容器和放星星的容器:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><t...

元素的超链接和图片提示效果

元素的超链接和图片提示效果

在现代的浏览器中,超链接都自带了提示,只需要在超链接中加入title属性就可以实现提示效果,但是这个提示效果的响应速度非常缓慢,接下来就通过代码手动实现一个类似的功能。首先是在空白页面,添加两个普通超链接和两个带有class的超链接。<!DOCTYPEhtml><html><head>...

常用动画效果

常用动画效果

动画效果也是jQuery库吸引人的地方,通过jQuery的动画方法,能轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验。下面,简单介绍几种常用的动画方法。show()方法和hide()方法是jQuery中最基本的动画方法,在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为“no...

关于在同一个DIV下的Hover效果问题

关于在同一个DIV下的Hover效果问题

例子:(functionbindColumnRowHoverEvent(){$('.ticket_list_body.work_product').live('mouseenter',function(e){e.stopPropagation();$(this).hover(function(){if($(this)....

iOS-UIScrollView拉伸效果

iOS-UIScrollView拉伸效果

解决办法: 比如登录界面是可以上下拉伸的(微信),在ScrollView里调用一下这个方法即可。 scrollView.alwaysBounceVertical=YES; ...

cxgrid  HyperLink 鼠标显示效果

cxgrid HyperLink 鼠标显示效果

procedureTForm1.cxGrid1DBTableView1MouseMove(Sender:TObject;Shift:TShiftState;X,Y:Integer);varHt:TcxCustomGridHitTest;beginHt:=TcxGridSite(Sender).GridView.View...

100种不同图片切换效果插件pageSwitch

100种不同图片切换效果插件pageSwitch

分享100种不同图片切换效果插件pageSwitch。这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画。效果图如下:在线预览    源码下载实现的代码。html代码:<divid="wrap"><divid="imgs"&...

基于CSS3鼠标滑过放大突出效果

基于CSS3鼠标滑过放大突出效果

还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错。今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效。效果图如下:在线预览    源码下载实现的代码。ht...

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="container"><imgsrc="images/1.jpeg"alt="1"...

基于jQuery Tooltips悬停提示效果

基于jQuery Tooltips悬停提示效果

基于jQueryTooltips悬停提示效果。这是一款基于jquery.tooltipster插件实现的jQueryTooltipsHovereffect特效。效果图如下:在线预览    源码下载实现的代码。html代码:<sectionid="facebook"style...