jQuery练手之滑动出现效果

效果概述：当鼠标移动到页面上时，出现文字说明和选择框，由于没有制作img图片，就暂时用span加背景颜色替代了。

难点：如果要展开的div是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px 这个时候调用slideDown就是向上展开的。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*margin{padding: 0;margin: 0;}.image{display: inline-block;width: 280px;height: 180px;background: orange;opacity: 0.5;}#panel{border: 1px solid red;position: relative;font-size: 0;display: inline-block;}.bottomBar{font-size: 14px;position: absolute;width: 280px;height: 30px;background: rgba(0,0,0,0.3);bottom:0 ;display: none;}.bottomBar>span{display: inline-block;width: 130px;height: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.bottomBar a span{display: inline-block;width: 50px;height: 100%;}</style></head><body><div id="panel"><div><a href="http://imooc.com"><span class="image"></span></a></div><div class="bottomBar"><span>点击进入慕课网学习哟少年们！</span><a href="#" title="在网页上显示固定"><span style="background: red;"></span></a><a href="#" title="删除此标签"><span style="background: greenyellow;"></span></a><a href="#" title="编辑本标签"><span style="background: green;"></span></a></div></div></body><script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">(function(){var transp;$('#panel').hover(function(){transp=$('.image').css('opacity');//移入时候获得原始透明度$('.image').css('opacity','1');//改变透明度$('.bottomBar').slideDown();//向上显现},function(){$('.image').css('opacity',transp);$('.bottomBar').slideUp();})})()</script>
</html>

jQuery练手之滑动出现效果相关推荐

html 滑动导航效果,jQuery实现的滑块滑动导航效果示例
本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: www.jb51.net jquery滑动导航 *{margin: 0;padding: 0;box-sizing: ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
使用jQuery实现导航条滑动块效果
html部分: <div id="navMenu"> <ul> <li class="active"><a href= ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
android 图片圆角遮罩_Android 自定义View练手Demo（一）实现圆角遮罩效果
Android 自定义View系列文章 Android自定义View实现圆角遮罩效果一图胜千言,有一个遮罩就会凸显出重点区域 1-1.jpg 本文通过两种方式来实现这种效果,来达到自定义View练手 ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
jQuery仿苹果手机版计算器-练手项目
这几天在看jQuery,试着写了一个仿苹果手机版计算器的练手项目,目前功能还有些bug,不能实现连续运算,输入两个数后必须点击=号才能继续输入第三个数继续运算(希望有大神可以指正改进的办法).实现效果 ...
别让双手闲下来，来做一些练手项目吧
作者:Weston,原文链接,原文日期:2016-01-27 译者:saitjr:校对:Cee:定稿:千叶知风自从我昨天发了文,收到的最多的评论就是: 我应该选择哪些 App 来练手呢? 这个问题很 ...
不要再说找不到前端项目练手了！
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,实验楼就整理了一些前端项目 ...

jQuery练手之滑动出现效果

jQuery练手之滑动出现效果相关推荐

最新文章

热门文章