讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

JQUERY实现左侧TIPS滑进滑出效果示例_jquery

php中文网
发布： 2016-05-16 17:31:08
原创
1401人浏览过

左侧提示 滑进滑出 平滑效果，各位童鞋如果遇到类似效果可以应用：
JQUERY实现左侧TIPS滑进滑出效果示例_jquery 
JQUERY代码：

复制代码 代码如下:

//左侧浮动
$(".reading").hover( function(){
$(this).animate({left:"50"});
$(".read").animate({left:"0"},600);
});
$(".read_close").click( function(){
$(".read").animate({left:"-287"},600);
$(".reading").animate({left:"0"},800);
});

HTML:
复制代码 代码如下:



JQUERY实现左侧TIPS滑进滑出效果示例_jquery


JQUERY实现左侧TIPS滑进滑出效果示例_jquery

您可以订阅生意街商机话题，您会通过邮箱收到栏目最新内容。


JQUERY实现左侧TIPS滑进滑出效果示例_jquery




CSS:
复制代码 代码如下:

.reading{position:fixed;left:0px;bottom:30px;cursor:pointer;width:25px;height:75px;
_position:absolute;//兼容IE6
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,30)||0)));
//兼容IE6，距离底部30
登录后复制
}.read{ border:1px solid #d0d0d0;width:285px;height:100px; -moz-box-shadow:0px 1px 2px #ccc; -webkit-box-shadow:0px 1px 2px #ccc; box-shadow:0px 1px 2px #ccc;//阴影效果,CSS3background:#fff;position:fixed;left:-287px;bottom:30px;z-index:10;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,30)||0)));}.read
p{font-size:14px;line-height:22px;padding:15px 0 0 16px;width:240px;}.read p.read_btn{text-align:right;padding-top:5px}.read_close{float:right;padding:2px;cursor:pointer;}

Canva
Canva

使用Canva可画，轻松创建专业设计

Canva 2603
查看详情 Canva 

登录后复制
 




 


 


                

                    相关标签：
                    

                        jquery                       
                    

                   
                

                
                                

                    
大家都在看：

                    
                

                          
                

                            

                
            
                        

                    

                        
                            最佳 Windows 性能的顶级免费优化软件
                        
                        

                            最佳 Windows 性能的顶级免费优化软件
                            
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

                        

                    

                    
                        下载
                    
                

            
          
			
            

                
                                
来源：php中文网

                            



            

                
                                            
                        收藏
                                    

                
                                            
                        点赞
                                    
            




            

                                    
                        上一篇：解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常_javascript技巧
                    
                                    
                        下一篇：基于Unit PNG Fix.js有时候在ie6下不正常的解决办法_javascript技巧
                    
                            

            

                
                
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

            


                       
                        

                
最新问题

                

                                        

                        

                            JavaScript路径查找_javascript算法应用
                            JavaScript中实现路径查找常用DFS、BFS、Dijkstra和A算法。1.DFS通过递归或栈遍历所有可能路径，适用于迷宫求解和连通性判断；2.BFS使用队列逐层扩展，适合无权图的最短路径查找；3.Dijkstra算法处理带权图，利用最小堆优化寻找单源最短路径；4.A算法结合g(n)实际代价与h(n)启发式预估（如曼哈顿距离），在游戏寻路等场景高效定位最优路径。选择合适算法需根据图结构、权重情况及性能需求，并注意边界条件与访问状态管理以避免死循环。
                            

                                

                                    2025-12-19 03:57:17
                                

                                

                                    743
                                

                            

                        

                    

                    
                    

                                        

                        

                            什么是javascriptRest参数_它如何收集剩余参数？
                            Rest参数（...args）用于将函数多余实参收集为真数组，必须位于参数末尾，是Array实例可直接调用数组方法，区别于类数组的arguments，适用于日志、代理、解构等场景。
                            

                                

                                    2025-12-19 03:35:26
                                

                                

                                    908
                                

                            

                        

                    

                    
                    

                                        

                        

                            怎样进行javascript单元测试_有哪些框架推荐？
                            JavaScript单元测试应聚焦纯逻辑、边界条件和错误路径，首选Jest（开箱即用）或Vitest（Vite生态轻量替代），其次可选Jasmine/Mocha+Chai组合；关键在测得准而非测得多。
                            

                                

                                    2025-12-19 03:17:32
                                

                                

                                    727
                                

                            

                        

                    

                    
                    

                                        

                        

                            如何使用JavaScript进行路由管理_React Router和Vue Router有什么区别呢
                            ReactRouter与VueRouter是React和Vue生态主流前端路由库，前者声明式组件驱动、路由即JSX，后者配置式优先、守卫和元信息更丰富；选型取决于团队熟悉度与项目需求。
                            

                                

                                    2025-12-19 03:03:22
                                

                                

                                    977
                                

                            

                        

                    

                    
                    

                                        

                        

                            javascript中的响应式编程是什么_如何用RxJS实现它
                            响应式编程是JavaScript中以数据流和变化传播为核心的范式，将异步事件等视为随时间发出值的序列，用声明式方式组合处理；RxJS通过Observable和Operator（如debounceTime、switchMap）实现高效、可取消、可组合的异步逻辑。
                            

                                

                                    2025-12-19 01:55:13
                                

                                

                                    708
                                

                            

                        

                    

                    
                    

                                        

                        

                            Javascript如何实现路由_如何构建单页面应用？
                            JavaScript实现SPA路由的核心是不刷新页面而动态替换内容并同步更新地址栏和导航行为，需监听hashchange/popstate事件、定义路由表、用HistoryAPI导航，并配置服务端fallback；框架如ReactRouter、VueRouter提供嵌套路由、懒加载等高级功能；还需考虑状态保持与SEO优化。
                            

                                

                                    2025-12-18 23:19:15
                                

                                

                                    609
                                

                            

                        

                    

                    
                    

                                        

                        

                            Javascript的作用域是什么_全局和局部作用域如何理解？
                            JavaScript作用域是变量和函数可访问的范围，分为全局、函数和块级三种；全局变量在脚本顶层声明，函数作用域由var定义，块级作用域由let/const在{}中定义；作用域链支持内层访问外层变量。
                            

                                

                                    2025-12-18 23:19:02
                                

                                

                                    810
                                

                            

                        

                    

                    
                    

                                        

                        

                            javascript中的设计模式有哪些_如何应用单例模式或工厂模式
                            JavaScript常用设计模式包括单例、工厂、观察者等，其中单例确保全局唯一实例，适用于配置管理、日志等场景；工厂封装创建逻辑，用于按条件生成不同对象，二者依需求本质选择。
                            

                                

                                    2025-12-18 23:18:08
                                

                                

                                    972
                                

                            

                        

                    

                    
                    

                                        

                        

                            如何用javascript创建3D效果_WebGL基础是什么？
                            JavaScript创建3D效果的核心是WebGL——浏览器内置的底层图形API，直接调用GPU渲染；实际开发常配合Three.js等封装库，但理解WebGL有助于掌握渲染逻辑、调试性能或深度定制。
                            

                                

                                    2025-12-18 23:17:14
                                

                                

                                    380
                                

                            

                        

                    

                    
                    

                                        

                        

                            javascript_如何实现双向数据绑定
                            核心是通过劫持数据访问实现双向同步。先用Object.defineProperty监听属性读写，setter中更新视图，input事件触发数据更新；再以Proxy代理对象，set拦截中同步多个DOM元素，输入事件反向赋值；最后封装函数绑定选择器与数据字段，统一处理视图与模型交互，初始化确保初始值渲染，从而模拟Vue的响应式机制。
                            

                                

                                    2025-12-18 23:16:08
                                

                                

                                    782
                                

                            

                        

                    

                    
                    

                                    

            

            

                

                    
相关专题

                    更多>
                    
                

                

                    
                

            



        

    

    

            

        
        
        

		        

            
热门推荐

            

                
            

            
        

        

                    

		

                
开源免费商场系统广告

        		
		

        

            

                
热门教程

                更多>
                
            

            

                

                    
相关推荐 

                    
热门推荐

                    
最新课程

                

                
                
                
            

            
        



        
            
        

            

                
最新下载

                更多>
                
            

                            

                    
                    

                

                        
            

                

                    
网站特效 

                    
网站源码

                    
网站素材

                    
前端模板

                

                
                
                
                
            

            
        

    







    

        

            

                

                    

                        关于我们
                        免责申明
                        举报中心
                        意见反馈
                        讲师合作
                        广告合作
                        最新更新
                                                

                    

                    
php中文网：公益在线php培训，帮助PHP学习者快速成长！

                    

                      
                        关注服务号
                        
                      
                        
                        技术交流群
                        
                      
                        

                    

                

                
            

            

                

                    
                    

                        
PHP中文网订阅号

                        
每天精选资源文章推送

                    

                

            

        

    

    

        
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

    








































    
  • 
        
    
            
    
                
                    
                    
    PHP学习
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    技术支持
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    返回顶部
    
                    
            
    
        
    
    
    •