<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>返回顶部</title><script src="scripts/jquery-1.7.1.min.js"></script></head><body><script type="text/javascript">
$(function(){
var toppos =0;
$(".back_top_index").hide();
$(document).scroll(function(){toppos=$(document).scrollTop();var oClient =$(window).height();//当前窗口可视区域高度if(toppos>oClient){$(".back_top_index").fadeIn()...
为项目列表项添加上下移动动画。首先想使用jquery animate来做到这一点。但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations are not supported on table rows.)。所以设法用其他解决方案。最后使用jq方法配合 CSS3 transform 实现。/*** @param {Object} $fstElem 目标行* @param {Object} $scdElem 被换行* @param {Number} dirflag 移动方向 flag, 2 是上移, 1 是下移.* @param {Functi...
插件名称-cloud carousel最新版本-1.0.5支持ie6-ie9,firefox,chrome,opera,safari等1。引入jquery1.4.2.js 和CloudCarousel.1.0.5.js2。添加页面自动加载插件js代码,进行初始化$(document).ready(function(){ // 这初始化容器中指定的元素,在这种情况下,旋转木马. $("#carousel1").CloudCarousel({ xPos:450, yPos:110, buttonLeft: $(‘#but1‘), buttonRight: $(‘#but2‘), ...
新人项目遇到密码可见与不可见,本想网上下个插件用下,没想到都写的很乱,然后参考好朋友改了一个,希望对新人有帮助。本来不怎么想写博客,不过一个大牛说过,多写博客,忘记的时候可以回头看,这样会成长很多,另外推荐一个高质量前端交流群128025251半夜学习的人很多,欢迎加入。效果图:开发思路,每次点击的时候改变input type 的text 和passwore 类型ps:过程中用了jq1.8的版本发现不支持input attr()方法的改变type类型,后...
我前面博客写过一个星级评论的原生写法,非常复杂,今天就通过jquery来写一个简单的星级点亮的效果,来看代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.ct-star {display: inline-block;margin: 0 1px;width: 19px;height: 19px;background: url(img/stars.png) no-repeat;vertical-align: -2px;cursor: pointer;}.ic-star-off {background-position: -39px 0;}</style></head><...
hide()和show()hide():隐藏文本。show():显示文本。 语法:$(selector).hide(speed,callback);$(selector).show(speed,callback);speed参数是隐藏/显示的速度,可以是“slow”、“fast”或者毫秒数;callback参数是隐藏或显示完成后所执行的函数名称。<html><head><script src="./jquery-3.3.1.min.js"></script><script>
$(document).ready(function(){
$("button#a").mousedown(function(){
$("button#a").css("color","red");//...
$( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $( this ).index(); var $curCatList = $( ".cat-cont-bd>li:eq(" + index + ")" ); //鼠标移上去对应的二级菜单的li $catList.removeClass( "selected selected-prev" ); $( this ).a...
html 部分:<div class="img-container"> <div class="hander1"> <img src="img/inner.png" / class="hander"> <img src="img/outer.png" class="img-outer" /> </div> <div class="hander1" style="float:right;"> <img src="img/inner.png" / class="hander"> <img src="img/outer.png" class="img-outer" /> </div> </div>css 部分:.img-container .hander1{ width:318px; height:...
效果截图: 说明:可以任意添加多个类似结构样式,点击标题栏图片对应隐藏、显示。 jquery代码:思路一:基本方法 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> $(function(){var $dt = $(‘.main dl dt‘); //获取标题栏dtvar $dd = $(‘.main dl dd‘); //获取图片父容器ddvar flag = []; ...
方法描述animate()对被选元素应用“自定义”的动画clearQueue()对被选元素移除所有排队的函数(仍未运行的)delay()对被选元素的所有排队函数(仍未运行)设置延迟dequeue()运行被选元素的下一个排队函数fadeIn()逐渐改变被选元素的不透明度,从隐藏到可见fadeOut()逐渐改变被选元素的不透明度,从可见到隐藏fadeTo()把被选元素逐渐改变至给定的不透明度hide()隐藏被选的元素queue()显示被选元素的排队函数show()显示被选的元素sli...
一、HTML代码如下:<img class="comment_pics" width="50px" height="50px" src="img/01.jpg"/><div class="bg"><img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src=""></div>二、CSS代码如下:.fillbg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.fillbg-activ...
恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下代码和布局都很简单<!DOCTYPE HTML><html><head><style>#content{height: 2000px ;width: 960px ;margin: 0 auto ;background-color: blue ;}#rocket{width: 50px ;height: 50px ;position: fixed;right: 10px ;bottom: 10px ;display: none;}#rocket img{width: 100%;height: 100%;}</sty...
手风琴效果经常会用在网页左侧的导航栏,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,下面就分享一个自己制作的简易手风琴效果,没有用图片,背景颜色也是随意设定的,在实际项目中大家可适当修改。效果图:实现原理:1、当鼠标点击span标签(即一级导航)时,先判断子目录li是否已经展开(此处使用一个on类来做标记);
2、如果是,则收缩当前的li,移出on类标记,修改span右边的提示符为加号;
3、如果不是...
jquery效果 显示隐藏 show() 语法 show([speed,[easing],[fn]]) 参数可以省略,无动画直接使用 hide() toggle() 滑动 slideDown() slideUp() slideToggle() 淡入淡出 fadeln() fadeOut() fadeToggle() fadeTo() 停止排队 stop()方法必须写在动画前面 stop()<button>显示/下拉/淡入</button><button>隐藏/上拉/淡出</button><button>切换</button><button>修改</button...
1.jQuery的隐藏显示:$(selector).hide(speed,callback);$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 也可以:使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:2.jQuery的淡入淡出效果有下面四种 fade 方法:fadeIn():用于淡入已隐藏的元素。即使其出现$(s...