前端框架之jQuery（二）----轮播图,放大镜
事件
页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){}) -----------> $(function(){})
事件处理 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如： // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定 // click事件；
[selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$('ul li').on('click', function(){console.log('click');})的绑定方式和 //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个 //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加 //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)实例之面板拖动
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="height: 40px;color: white;"> 标题 </div> <div style="height: 300px;"> 内容 </div> </div><script type="text/javascript" src="jquery-2.2.3.js"></script><script> $(function(){ // 页面加载完成之后自动执行 $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; // 原始鼠标横纵坐标位置 var ord_x = _event.clientX; var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px');
}) }).mouseup(function(){ $(this).unbind('mousemove'); }); })</script></body></html>实例之放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>bigger</title> <style> *{ margin: 0; padding:0; } .outer{ height: 350px; width: 350px; border: dashed 5px cornflowerblue; } .outer .small_box{ position: relative; } .outer .small_box .float{ height: 175px; width: 175px; background-color: darkgray; opacity: 0.4; fill-opacity: 0.4; position: absolute; display: none;
}
.outer .big_box{ height: 400px; width: 400px; overflow: hidden; position:absolute; left: 360px; top: 0px; z-index: 1; border: 5px solid rebeccapurple; display: none;
} .outer .big_box img{ position: absolute; z-index: 5; }
</style></head><body>
<div class="outer"> <div class="small_box"> <div class="float"></div> <img src="data:images/2.jpg">
</div> <div class="big_box"> <img src="2.jpg"> </div>
</div>
<script src="jquery-2.1.4.min.js"></script><script>
$(function(){
$(".small_box").mouseover(function(){
$(".float").css("display","block"); $(".big_box").css("display","block")
}); $(".small_box").mouseout(function(){
$(".float").css("display","none"); $(".big_box").css("display","none")
});
$(".small_box").mousemove(function(e){
var _event=e || window.event;
var float_width=$(".float").width(); var float_height=$(".float").height();
console.log(float_height,float_width);
var float_height_half=float_height/2; var float_width_half=float_width/2; console.log(float_height_half,float_width_half);
var small_box_width=$(".small_box").height(); var small_box_height=$(".small_box").width();
// 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理 var mouse_left=_event.clientX-float_width_half; var mouse_top=_event.clientY-float_height_half;
if(mouse_left<0){ mouse_left=0 }else if (mouse_left>small_box_width-float_width){ mouse_left=small_box_width-float_width }
if(mouse_top<0){ mouse_top=0 }else if (mouse_top>small_box_height-float_height){ mouse_top=small_box_height-float_height }
$(".float").css("left",mouse_left+"px"); $(".float").css("top",mouse_top+"px")
var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width); var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
console.log(percentX,percentY)
$(".big_box img").css("left", -percentX*mouse_left+"px") $(".big_box img").css("top", -percentY*mouse_top+"px") }) })
</script></body></html>动画效果
回调函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script>
</head><body> <button>hide</button> <p>helloworld helloworld helloworld</p><script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }) </script></body></html>扩展方法 (插件机制)
用JQuery写插件时，最核心的方两个方法
<script> $.extend(object) //为JQuery 添加一个静态方法。$.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); console.log($.min(3,4));
//-----------------------------------------------------------------------
$.fn.extend({ "print":function(){ for (var i=0;i<this.length;i++){ console.log($(this)[i].innerHTML) }
}});$("p").print();</script>实例之注册验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> li{
list-style: disc;; } img{ display: block; height: 200px; } </style></head><body><form class="Form">
<p><input class="v1" type="text" name="username" mark="用户名"></p> <p><input class="v1" type="text" name="email" mark="邮箱"></p> <p><input class="v1" type="submit" value="submit" onclick="return validate()"></p>
</form>
<script src="jquery-2.1.4.min.js"></script><script> // 注意: // DOM对象--->jquery对象 $(DOM) // jquery对象--->DOM对象 $("")[0]
//---------------------------------------------------------
// DOM绑定版本 function validate(){
flag=true;
$("Form .v1").each(function(){ $(this).next("span").remove();// 防止对此点击按钮产生多个span标签 var value=$(this).val(); if (value.trim().length==0){ var mark=$(this).attr("mark"); var ele=document.createElement("span"); ele.innerHTML=mark+"不能为空!"; $(this).after(ele); $(ele).prop("class","error");// DOM对象转换为jquery对象 flag=false; // return false-------->引出$.each的return false注意点 }
}); return flag }</script></body></html>轮播图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <style media="screen"> * { margin: 0; padding: 0; } #Number li{ width: 50px; height: 50px; background-color: #303a40; color: white; text-align: center; line-height: 50px; border-radius: 50%; margin-left: 30px; font-size: large; list-style-type: none; display: inline-block; } #Number{ position: absolute; width: 100%; text-align: center!important; top: 80%; }
.outer{ cursor: pointer; width: 60%; height: 75%; position: absolute; left: 50%; top: 10%; margin-left: -30%;
} .outer:hover .button{ display: inline-block; } .img img{ width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .button{ display: none; opacity: 0.3; color: white; font-size: 50px; text-align: center; line-height: 80px; top: 50%; margin-top: -40px; position: absolute; width: 80px; height: 80px; background-color: black; } .r{ right: 0; } .l1{ background-color: red!important; } </style> </head> <body> <div class="outer" id="sliderWrap"> <div class="img" id="sliderContent">
</div> <div id="Number"> <ul>
</ul> </div> <div class="button l" id="left"> < </div> <div class="button r" id="right"> > </div> </div> </body><script src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'] $.each(arr,function (i,v) { console.log(i) $('.img').append("<a><img src="+v+"></a>") if(i==0){ $('ul').append("<li class='l1'>"+(i+1)+"</li>") }else{ $('ul').append("<li>"+(i+1)+"</li>") } }) $('.img').append("<a><img src="+arr[0]+"></a>") $('#Number li').mouseover(function () { $(this).addClass('l1').siblings().removeClass('l1') var index=$(this).index() i=index $('.img a').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }) var time = setInterval(move,2000) var i =0; function move() { if(i==arr.length-1){ i=-1 } i++ $('#Number li').eq(i).addClass('l1').siblings().removeClass('l1') $('.img a').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $('.outer').hover(function () { clearInterval(time) },function () { time=setInterval(move,2000) }) $('.r').click(function () { move() }) $('.l').click(function () { if(i==0){ i=arr.length } i-- $('#Number li').eq(i).addClass('l1').siblings().removeClass('l1') $('.img a').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }) </script></html>识别图中二维码,领取python全套视频资料
前端框架之jQuery（二）----轮播图,放大镜的更多相关文章
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- Web前端原生JavaScript浅谈轮播图
1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
- Jquery无缝轮播图的制作
轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery改造轮播图1
g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...
- jQuery无缝轮播图思路详解-唯品会
效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...
随机推荐
- select/poll/epoll原理探究及总结
select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但select ...
- .Net基础——程序集与CIL HttpClient封装方法 .Net Core 编码规范 C#中invoke和beginInvoke的使用 WebServeice 动态代理类
.Net基础——程序集与CIL 1. 程序集和CIL: 程序集是由.NET语言的编译器接受源代码文件产生的输出文件,通常分为 exe和dll两类,其中exe包含Main入口方法可以双击执行,dll ...
- 比isConnected()更靠谱的的获取socket实时连接状态！
看到这个标题,预计非常多人会说用socket.isConnected()或者socket.isClosed()等方法来推断即可了,但其实这些方法都是訪问socket在内存驻留的状态,当socket和s ...
- JDK1.9环境变量配置
JAVA_HOME C:\Program Files\Java\jdk-9.0.1 JRE_HOME C:\Program Files\Java\jre-9.0.1 PATH .;%JAVA_HOME ...
- Linux----LVM扩容磁盘空间(讲的也很好)
转:https://www.cnblogs.com/tail-f/p/6143085.html
- 修改IP核参数
有时需要重定制IP核时,需要打开IP核,可以试试用core generator 工具打开coregen.cgp文件.在core generator下修改IP核参数.
- 解决带fusionCharts的页面多次点击后不显示的问题
问题: 假设不使用公司封装的fusioncharts.使用自己定义的.建议不要使用例如以下方法 使用$(document).ready( 页面载入完之后再载入,会导致多次点击带有fusionchart ...
- 修改Nginx与Apache上传文件大小限制
一.修改Nginx上传文件大小限制 我们使用ngnix做web server的时候,nginx对上传文件的大小有限制. 当超过大小的时候会报413错误. 这个时候我们要修改nginx参数. sudo ...
- Elasticsearch5.X IN Windows 10 系列文章（4）
ElasticSearch版本: 5.5.1 (最新稳定版为5.5.2),由于用到IK中文分词插件,最新版本没有5.5.2 ,所以使用5.5.1 日期:2017-08-30 第四章:安装 Search ...
- 手机CPU知识扫盲：谈谈手机CPU架构与原理
CPU是手机上面最复杂,最贵的Soc(芯片),担任的也是手机中大脑的位置,是手机跑分性能的决定性硬件.智能手机发展到今天,各大手机CPU厂商也从春秋战国逐渐到了现在四国鼎立的时代(高通,MTK,三星, ...