4.9号 点击变色以后鼠标移上其他变色和滚动到某个位置然后一直在顶部
一:点击变色以后鼠标移上其他的变色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | < style type="text/css"> *{ margin:0px auto;} #kuang{ width:100px; height:50px;} .list{ width:100px; height:50px; background-color:#03C; text-align:center; vertical-align:middle; line-height:50px; color:#fff; border:1px solid #CCC} </ style > </ head > < body > < div id="kuang"> < div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">深圳</ div > < div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">北京</ div > < div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui()">上海</ div > </ div >--> </ body > < script type="text/javascript"> function Xuan(a) 先做点击效果 { var list = document.getElementsByClassName("list"); 清一下(回复原样式) for(var i=0;i<list.length;i++) { list[i].style.backgroundColor = "#03C"; list[i].removeAttribute("as"); } 选择变色 a.style.backgroundColor = "red"; a.setAttribute("as",1); } function Bian(a) { var list = document.getElementsByClassName("list"); 清一下(回复原样式) for(var i=0;i<list.length;i++) { if(list[i].getAttribute("as")!=1) { list[i].style.backgroundColor = "#03C"; } } 选择变色 a.style.backgroundColor = "red"; } function Hui() { var list = document.getElementsByClassName("list"); 清一下(回复原样式) for(var i=0;i<list.length;i++) { if(list[i].getAttribute("as")!=1) { list[i].style.backgroundColor = "#03C"; } } } |
二:滚动到某个位置然后一直在顶部
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | < style type="text/css"> *{ margin:0px auto;} </ style > </ head > < body > < div id="l" style="width:100%; height:200px; background-color:red;"> </ div > < div id="caidan" style="width:100%; height:100px; background-color:blue;"></ div > < div style="width:100%; height:1000px; background-color:#000;"></ div > < input type="button" value="an" onclick="Hui()" /> </ body > < script type="text/javascript"> /*function Hui() { window.scrollTo(0,200); 这个是点击按钮回到顶部,和这个没有关系 }*/ window.onscroll = function() { var c = document.getElementById("caidan"); //var ch = c.style.height; var l = document.getElementById("l"); var lh = l.style.height; //parseInt(ch); if(window.scrollY >= parseInt(lh)) Y轴大于等于蓝色的高超出范围 { //超出的范围操作 c.style.position = "fixed"; c.style.top = "0px"; } else { //没有超出的范围操作 c.style.position = "relative"; } } </ script > |
posted on 2018-04-09 16:53 sunyexiang 阅读(196) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!