Javascript+CSS经典效果案例剖解

在编写前端代码的时候经常会因为网页添加什么动态效果而发愁,现在给你一些经典的案例,可以到时候参考一下的。

  1. CSS+js滚动图片功能:

涉及到的知识点:CSS: width height background-image以及其他一些样式属性,

Javascript:Event事件有:mouseover mouseout click image的load DOM:element.style element.scrollTop 以及 setInterval() clearInterval()等

需要定义的主要函数:iniautoSlide()用于设置自动播放,使用setInterval()循环执行autoSlide();autoSlide()用于根据条件判断执行slideUp()还是slideDown(),条件判断依据就是如果目前到了倒数第1个元素,那么设置下次执行需要反向执行。slideDown()主要用于循环执行scrollDown()以及为相关元素修改样式,scrollDown()通过当前元素的scrollTop与设置的图片显示高度frameheight的比较,如果srcollTop大于frameheight或其相关倍数,则srcollTo=frameheight*n,否则scrollTop+=speed,speed是元素移动。

CSS中的设置 图片的包含标签中设置overflow:hidden,width and height 有固定长度,position:relative,图片的设置 position:absolute;top为父元素倍数,width height与父元素相同;

expression(document.body.clientWidth > 200?"200px":"auto"

setTimeout(arguments.callee,1500)

CSS perspective

2. 图片放大技术(类似天猫)

涉及到的Javascript事件主要有mouseover  mouseout mousemove CSS主要是position and style.

\

布局:加两个钩子 一个是float_layer表示的是浮动的框(固定宽高,绝对定位) 一个是mark作为图片的蒙版,透明度设为100%,mouse的行为主要发生在mark上。再加一个用来显示选择放大后图片的div,这个DIV最重要的一点是设置绝对定位以及overflow:hidden;

然后是JS部分:mouseover float-layer还有显示图片部分 display:block;

Mouseout,隐藏;mousemove:先获取float-layer的位置信息。使用公式:e.clientX-(父元素们的offsetLeft(body以下(不包括body)))-e.target.offsetWidth/2;//除以2是因为这样能确保在移动的时候,鼠标能处于被选区域的中心位置,这样就得到了float_layer的left值,但是需要有两个条件(left<0时需要取0,left>float.parentNode.offsetWidth-float.offsetWidth时需要取float.parentNode.offsetWidth-float.offsetWidth),所以l=Math.mix(Math.min(left, float.parentNode.offsetWidth-float.offsetWidth),0),同理得出来top.

使用top left显示float_layer,然后使用放大参数乘以top Left后显示放大后的图喜。

3. CSS3实现3D导航选转效果

涉及到的CSS3属性主要有transform transform-style  perspective

Transition等

要导航的元素放在<li>标签中,设置<li>标签的样式为perspective:200px; position:relative;// perspective是设置3D元素的透视效果 ,设置position是为了给下边的元素绝对定位。在<li>标签中设置元素<span>NAV<span class=”font”>NAV</span><span class=”back”>NAV</span></span>,先给整个span元素一个绝对定位使在浏览器不支持transform时可以正常显示导航,然后设置transform:translateZ(-25px),transition:all .5s; transform-style:preserve-3d;//设置子元素保存3D位置,内缩25像素是为了选转时的美观效果;然后给front and back设置在X轴的旋转,.back{transform:rotateX(-90deg) translate(25px)}、、前提25px.

使用hover伪类触发动画 当<li>标签:hover 大的<span>标签选转{transform: translateZ(-25px) rotateX(90deg);}

另外:这添加动画属性之前,需要把样式布局完成之后

4,图片水平方向轮转  主要是涉及到 scrollLeft的不断增加。

5,拖动水晶球的小游戏(非Canvas)动画

分析:

1,首先要确定有多少个小球,这时候定义一个变量,并通过循环这个变量来创建小球。

2,每个小球都是一个独立的个体Object,所以需要有一个构造函数来创建这个小球;

3.小球需要一个背景图片,所以根据小球的位置判断选择src的属性是什么(如果头部图片与其他部位图片没有区别的话)。

4.创建小球的函数:小球的属性应该包括半径,位置X,Y,创建自身的img元素并添加在父元素中,使用O指向这个img元素,小球只是object对象,并不是元素,另外this.O.obj=this,添加这条语句是使img元素可以指回到object。

5.将创建好的小球添加在数组ball[]中。

这样,水晶列表就显示在html中了。

6,mousedown发生后,由于所有的小球对应的element都是通过js动态生成的,所以通过通过addEventListener()来检测事件,可以通过给创建的img元素添加class值来,然后验证e.target的classname是否在小球上发生了事件。

7,发生事件之后,要记录下鼠标这个时候在小球上的位置,使效果上使看着是鼠标再拖着小球走,记录下的是鼠标的位置与小球左上角的相对距离(分X,Y).

8.然后就是mousemove事件了,首先做的就是更新小球的位置坐标,通过当前的鼠标位置和之前确定的相对位置来确定小球的定位。之后是链接函数以及防止球相交函数。

9,链接函数,这个需要执行两次,一次是正的,一次是反序的。需要传入两个相邻小球参数

6,图片分裂效果

主要是通过JS生成div标签,标签的定位为以0或50%定位,这样就能产生四个子元素,子元素中添加img标签,删除大的图片。

时间: 2024-11-10 15:02:56

Javascript+CSS经典效果案例剖解的相关文章

javascript常用经典算法实例详解

javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与使用技巧,需要的朋友可以参考下 本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld ? 1 2 3 4 5 6 7 8 9 10 //线性搜索(入门HelloWorld) //A为数组,x为要

2017.9.24 基于HTML+JavaScript+CSS的开发案例&amp;&amp;JavaScript+CSS+DIV实现表格变色

1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position:absoult;left:29px;top:12px; width:200px;henght:100px;background-color:#33CC99; float:none;clear:none;z-index:1"> </div> 语法说明: ·position属性主要是来

HTML、XHTML、CSS与JavaScript入门经典pdf

下载地址:网盘下载 内容介绍: 自从网站诞生以来,用于构建网站的语言就一直在不断地演化.现在一系列最佳实践已经出现,使用HTML或XHTML创建基本的网页,使用CSS控制它们的外观并使它们更加引人注目,使用JavaScript添加交互功能.<HTML.XHTML.CSS与JavaScript入门经典>一书假设您以前没有任何经验,这些宝贵的资源有助于如何使用最新的Web标准.不管您是期待编写第一个网页的初学者,还是急需提升编程技能的资深程序员,都会发现对这些基本语言的实践指导,以及有经验的Web

CSS之图片压盖效果案例分析

CSS之图片压盖效果案例分析 最近在做某个网站的静态页面,发现有很多图片压盖效果的布局,特来记录一下布局技巧. 碰到这种布局你会怎么做: 第一反应肯定是浮动,没错,可以把这几个图片放在ul列表的li标签里,给每个li标签内添加img和文字.如: <ul> <li> <img src="" alt=""><p>文字</p></li> <li><img src="&quo

android项目剖解之ViewPager+Fragment 实现tabhost效果

项目中需要用到底栏导航栏,滑动或者点击会切换上面的视图,如图: 这个效果使用Viewpager+Fragmen实现是主流方案,加入你之前对fragment不太了解,可以先看android之Fragment(官网资料翻译) 整个文件如下: 好了废话少说,先上布局文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sche

JavaScript+CSS实现经典的树形导航栏

在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于是到处寻找 资料,从Struts的Dojo插件到Dojo的学习,各种看,结果各种不懂.那个悲催啊!!!结果从头再来,苦学CSS和JS, 虽然现在JS水平不咋的,但是还是可以写出一个一般的导航菜单栏了,自己看看还是说的过去,这里拿出来Show一 下,回来自己好用. 首先上最开始的左侧菜单HTML代码

CSS3实战开发:使用CSS过滤效果来改变图片样式

</pre><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 25.1875px;">   我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见

CSS的一些案例和坑

display: inline-block的坑 (一) 先看了个例子 <style type="text/css"> ul{ width: 300px; height: 50px; } li{ width: 50px; height: 50px; background: blue; display: inline-block; } </style> <body> <ul> <li></li> <li>&

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation