js特效------实例

《1 js特效---图标切换

我们要建这样的页面效果，就是在几张照片中切换不停，我们所需要用js来搭建切换效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 2000px;margin: 0 auto;}</style>
</head>
<body>
<div id="box">
<img id="icon" src="img/icon_01.png" alt="">
<p></p>
<button id="prev">上一张</button>
<button id="next">下一张</button></div>
<script>window.onload=function (ev) {// 1获取标签var icon=document.getElementById('icon');var prev=document.getElementById('prev');var next=document.getElementById('next');// 2点击//定义索引var currentIndex=1; minIndex=1,maxIndex=9;prev.onclick=function (ev1) {if (currentIndex===minIndex){//最小边界currentIndex=maxIndex;}else {currentIndex--;}icon.setAttribute('src','img/icon_0'+currentIndex+'.png');console.log(icon.src);}next.onclick=function (ev1) {if (currentIndex===maxIndex){//最大边界currentIndex=minIndex;}else {currentIndex++;}icon.setAttribute('src','img/icon_0'+currentIndex+'.png');console.log(icon.src);}}</script></body>
</html>

搭建好页面样式后，我们就使用js来做切换。

用js来搭建，我们第一步就需要获取所需要的标签，取到需要的标签后就得进行点击，来让图片进行切换，就需要第二部点击，

但点击后到最后一张图标，需要重新切换到第一张图标上，我们就得做边界值，让判断是否到最后一张切换到第一张。所搭建如上。

《2 关闭小广告

像电脑在使用时经常会有小广告的出现，我们想要关掉广告，就需要使用js。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{position: relative;display: inline-block;}#close{position: absolute;right: 18px;top:18px;cursor: pointer;}</style>
</head>
<body>
<div id="box"><img id="icon"  src="img/img_02.jpg" alt="" width="258">;<img id="close" src="img/close.jpg" alt="" width="40">;<script>window.onload=function (ev) {// 1 获取标签var close=document.querySelector('#close');// 2监听点击close.onclick=function () {// console.log(this);// this.parentNode.remove();//第一种关闭this.parentNode.style.display='none';//第二种关闭}}</script>
</div></body>
</html>

同样都是需要获取标签，再来点击需要发生的。

《3 风景相册

风景相册就是点击下边的小图，来切换大图。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}body{margin: 50px;}#fj{list-style: none;}#fj li{float: left;margin-left: 10px;}#big_img{margin-left: 10px;}#des{margin: 10px;color: orangered;font-size: 20px;}</style>
</head>
<body>
<!--大图描述-->
<p id="des">蒲公英</p>
<!--大图展示-->
<img id="big_img" src="img/1.jpg" alt="" width="520">
<!--小图列表-->
<ul id="fj"><li><a href="img/1.jpg"title="蒲公英"><img src="img/1.jpg" title="蒲公英" width="100"></a></li><li><a href="img/2.jpg"title="热球"><img src="img/2.jpg" title="热气球" width="100"></a></li><li><a href="img/3.jpg"title="别致小屋"><img src="img/3.jpg" title="别致小屋" width="100"></a></li><li><a href="img/4.jpg"title="高山湖水"><img src="img/4.jpg" title="高山湖水" width="100"></a></li><li><a href="img/5.jpg"title="高速公路"><img src="img/5.jpg" title="高速公路" width="100"></a></li>
</ul><script>window.onload=function (ev) {// 1获取需要标签var des=document.getElementById('des');var big_img=document.getElementById('big_img');var fj=document.getElementById('fj');var aLists=fj.getElementsByTagName('a')console.log(aLists);// 2事件绑定for (var i=0;i < aLists.length;i++){var a=aLists[i];console.log(a);a.onclick=function (ev1) {des.innerText=this.title;big_img.setAttribute('src',this.href);return false;}}}
</script></body>
</html>

将其样式都做好，再用js来做图片变换。

《4 二维码的显示和隐藏

如下图所示：

就是先将小的图标显示出来，当鼠标进入小图标，大的二维码就会显示出来，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}#e_coder{width: 50px;height: 50px;background: url("images/e_coder_normal.png")no-repeat;position: fixed;top: 40%;left: 0;cursor: pointer;}#e_app{position: absolute;left: 50px;top: -50px;/* 隐藏*/display: none ;}</style>
</head>
<body>
<div id="e_coder"><div id="e_app"><img src="data:images/e_coder.jpg" alt="公众号" width="150"></div>
</div><script>window.onload=function (ev) {// 1 获取需要的标签var e_coder=document.getElementById('e_coder');var e_app=document.getElementById('e_app');// 2 监听进入鼠标e_coder.onmouseover=function (ev1) {// 2.1 改变背景图片this.style.background='url("images/e_coder_selected.png")no-repeat';// 2.2 显示二维码e_app.style.display='block';}// 3 监听鼠标离开e_coder.onmouseout=function (ev1) {// 2.1 改变背景图片this.style.background='url("images/e_coder_normal.png")no-repeat';// 3.2隐藏二维码e_app.style.display='none';}}</script></body>
</html>

既然要显示二维码，就得隐藏二维码。如上图所示。

js特效------实例相关推荐

1、JS特效实例：微信头像拼文字特效
展会.会议现场经常会用到参与者手机微信扫码,参会者微信头像拼成文字.图案或logo大屏同步显示这样的功能需求,例如下图效果大屏效果: PhotoShop制作位图素材准备像素文字素材用来作为标记位置 ...
html js相册样式,JavaScript+CSS相册特效实例代码
下面小编就为大家带来一篇JavaScript+CSS相册特效实例代码.小编觉得挺不错的,现在就分享JavaScript+css的源码给大家,也给大家做个参考.对JavaScript和css制作相册感兴 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
html自定义datajs,科技常识：HTML5的自定义属性data-*详细介绍和JS操作实例
今天小编跟大家讲解下有关HTML5的自定义属性data-*详细介绍和JS操作实例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5的自定义属性data-*详细介绍和JS操作实例的 ...
城市地区级联二级下拉选择菜单js特效
城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 <script type="text/javascript">var pc = new Ar ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
关于JS特效的兼容问题。
前言: 我们如果想实现一个JS特效(比如有n行记录,每行都有一个checkbox,选择行变颜色,不选中时颜色消失) 最简单的方法不是自己写,而是去网上复制一份下来. 我们往往发现这写JS的函数我们很多 ...

js特效------实例

js特效------实例相关推荐

最新文章

热门文章