<!DOCTYPE html> <html> <script type="text/javascript" src="style/jquery-3.7.0.min.js?v=0.002?v=1.0.01"></script> <head> <style> .fade { position: absolute; z-index: -2; left: 0; transform: translate3d(-100%, 0, 0); width: 0; opacity: 0; overflow: hidden; transition: all .8s; padding: 5px; } .act1{ width: 281px; opacity: 1; left: 15px; top:50px; } .fade2 { position: absolute; z-index: -2; left: 0; transform: translateX(100px); width: 0; opacity: 0; overflow: hidden; transition: all .8s; } .act2{ width: 281px; opacity: 1; right: 15px; } .fade3 { position: absolute; z-index: -2; left: 0; transform: translate3d(-100%, -100%, -100%); width: 0; opacity: 0; overflow: hidden; transition: all .8s; } .act3{ width: 281px; opacity: 1; left: 150px; } </style> </head> <body> <div style="box-shadow: 0 3px 4px 0 rgba(137,145,157,.6);background: #fff3cd;position: relative;display: flex;box-sizing: border-box; width:200px; height:500px;left:50%;text-align:center;"> <div class="user" style="margin-top:50px;width:200px; height:100px;text-align:center;">向左淡出</div> <div class="fade" style=" top:50px;color:blue;"> <div style="width:300px;height:300px;">这是一个淡入效果的标题</div> </div> <div class="user2" style="margin-top:150px;width:200px; height:100px;text-align:center;">向右淡出</div> <div class="fade2" style="margin-top:150px; "> <div style="width:300px;height:300px;color:red;">这是一个淡入效果的标题</div> </div> <div class="user3" style="margin-top:250px;width:200px; height:100px;text-align:center;">向右淡出2</div> <div class="fade3" style="margin-top:250px; "> <div style="width:300px;height:300px;color:red;">这是一个淡入效果的标题</div> </div> </div> <script type="text/javascript"> $(function(){ $(".user").hover( function(){ //当鼠标放上去的时候,程序处理 //$(this).find(".fade").addClass("act4"); $(".fade").addClass("act1"); }, function(){ //当鼠标离开的时候,程序处理 //$(this).find(".fade").removeClass("act4"); $(".fade").removeClass("act1"); }); $(".user2").hover( function(){ //当鼠标放上去的时候,程序处理 //$(this).find(".fade").addClass("act4"); $(".fade2").addClass("act2"); }, function(){ //当鼠标离开的时候,程序处理 //$(this).find(".fade").removeClass("act4"); $(".fade2").removeClass("act2"); }); $(".user3").hover( function(){ //当鼠标放上去的时候,程序处理 //$(this).find(".fade").addClass("act4"); $(".fade3").addClass("act3"); }, function(){ //当鼠标离开的时候,程序处理 //$(this).find(".fade").removeClass("act4"); $(".fade3").removeClass("act3"); }); }) </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
2017-10-15 edit this cookie chrome插件 （HttpAnalyzerStdV3 获取Cookie 后，再用edit this cookie添加cookie）
2017-10-15 用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面
2014-10-15 SQL：安装多个实例，修改实例端口号,和IP加端口号连接实例
2009-10-15 Flex Builder 3 下载安装与注册