代码-JS之小星星评论效果

效果：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!--编写CSS--><style>img{float: left;}</style></head>
<body><!--编写HTML-->
<img src="data:images/rank_3.gif" alt="">
<img src="data:images/rank_4.gif" alt="">
<img src="data:images/rank_3.gif" alt="">
<img src="data:images/rank_4.gif" alt="">
<img src="data:images/rank_3.gif" alt="">
<img src="data:images/rank_4.gif" alt="">
<img src="data:images/rank_3.gif" alt="">
<img src="data:images/rank_4.gif" alt="">
<img src="data:images/rank_3.gif" alt="">
<img src="data:images/rank_4.gif" alt=""><!--编写JS-->
<script>//1.找到所有的图片var imgs = document.getElementsByTagName('img');for(var i=0; i<imgs.length;i++){//2.给对象加一个属性abc并赋值，当做img下标imgs[i].abc = i;//3.给每个图片绑定鼠标移入事件imgs[i].onmousemove = function(){//给n赋img下标var n = this.abc;//将n之前的所有图片都换为黄色for(var j=0; j<=n; j++){//设置图片src地址,将里面的3换为1,即可更换imgs[j].setAttribute('src', imgs[j].getAttribute('src').replace('3', '1'));imgs[j].setAttribute('src', imgs[j].getAttribute('src').replace('4', '2'));}//将n之后的图片都换为灰色for(var k=n+1; k<imgs.length; k++){imgs[k].setAttribute('src', imgs[k].getAttribute('src').replace('1', '3'));  // images/rank_3.gifimgs[k].setAttribute('src', imgs[k].getAttribute('src').replace('2', '4'));}};}
</script></body>
</html>

附件：联系1548582000@.com

代码-JS之小星星评论效果相关推荐

html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...
html放大镜效果代码,js实现简单放大镜效果
用js实现简单放大镜效果,供大家参考,具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大 ...
html图片翻页效果代码,js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...
php中轮转图片js代码,js实现图片轮换效果代码
var numb = 0; var imgnumb = 1; function showimg() { //两张图片切换方法1 /*numb++; if (numb % 2 == 0) { docum ...
vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
github效果在线预览仓库地址: https://github.com/zhongyoucong/vuejs/ vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入 ...
html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...
HTML选中时闪动效果代码,JS实现点击文字对应DIV层不停闪动效果的方法
本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错 ...
（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式  <div class="timing" ...

代码-JS之小星星评论效果

代码-JS之小星星评论效果相关推荐

最新文章

热门文章