平常会遇到这样的需求，网站整屏滚动效果。 效果如下图，红色为浏览器窗口，其他为每一个块儿，当我们使用鼠标的滚轮的时候会上下切换。到这里咱们还需要一个东西，鼠标滚轮时间，还好有个插件帮咱们包装好了鼠标滚轮时间相关的参数jquery.mousewheel.min.js是个很出色的鼠标滚轮事件的插件，今天咱们就是用这个来写一个效果吧。第一步、引入必要的插件和库<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script...
jQuery 效果- 隐藏和显示隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！点击 显示/隐藏面板因为时间是宝贵的，我们提供快捷方便的学习方法。在菜鸟教程,你可以学习需要的知识。实例jQuery hide() 简单的jQuery hide()方法演示。jQuery hide() 另一个hide()实例。演示如何隐藏文本。jQuery hide() 和 show()通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：实例$("#hide").click(function(){$("p").hi...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>jQuery鼠标悬停内容动画切换效果</title><style>*{ margin:0; padding:0; list-style:none;}img{ border:0;}a{ color:#fff; text-decoration:none;}.servicesBox { width:1000px; height:270px; margin:0 aut...
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery模拟菜单的效果</title> <style type="text/css">div * {display:block;}div span{color:red;font-size:20px;} </style> <sc...
绑定事件：$("#leyangjun").bind("change",function(){ jquery 给标签赋值：$(‘#leyangjun‘).text(‘好一朵美丽的茉莉花’); 清空表单值：$("#leyangjun").empty(); radio取值：$("input[name=‘radioName‘][checked]").val();<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equ...
首先需要引入jQuery<script type="text/javascript" src="js/jquery.js"></script>使用到的CSS样式.show_tooltip li {list-style:none;display:inline;padding:5px 5px 5px 5px; } /* tooltip */ #tooltip{position:absolute;border:1px solid #333;background:#f7f5d1;padding:3px 3px 3px 3px;color:#333;display:none; }用到的JavaScript：<script type="text/javascript"> $(function(){var x = 10;var y = 20;$("a.tooltip")....
引入jq：<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>html：<div id="acc"> <ul> <li class="active"> <h3 class="active">标题1</h3> <div><img src="bg1.jpg"></div> </li> <li> <h3>标题2</h3> <div><img src="bg2.jpg"></div> </...
<!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:...