前端框架之jQuery 轮播图，放大镜

事件

页面载入

ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){}) -----------> $(function(){})

事件处理

$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

// $('ul').on('click', 'li', function())就是筛选出ul下的li给其绑定

// click事件；

[selector]参数的好处:

好处在于.on方法为动态添加的元素也能绑上指定事件；如：

//$('ul li').on('click', function())的绑定方式和

//$('ul li').bind('click', function())一样；我通过js给ul添加了一个

//li：$('ul').append('

js new li

')；这个新加的li是不会被绑上click事件的

//但是用$('ul').on('click', 'li', function()方式绑定，然后动态添加

//li:$('ul').append('

js new li

');这个新生成的li被绑上了click事件

[data]参数的调用:

function myHandler(event) {

alert(event.data.foo);

}

$("li").on("click", , myHandler)

实例之面板拖动

标题

内容

$(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');

});

})

实例之放大镜

bigger

*{

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;

}

$(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

mouse_left=0

}else if (mouse_left>small_box_width-float_width){

mouse_left=small_box_width-float_width

}

if(mouse_top

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")

})

})

动画效果

回调函数

Title

hide

helloworld helloworld helloworld

$("button").click(function(){

$("p").hide(1000,function(){

alert($(this).html())

})

})

扩展方法 (插件机制)

用JQuery写插件时，最核心的方两个方法

$.extend(object) //为JQuery 添加一个静态方法。

$.fn.extend(object) //为JQuery实例添加一个方法。

jQuery.extend({

min: function(a, b) { return a

max: function(a, b) { return a > b ? a : b; }

});

console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({

"print":function(){

for (var i=0;i

console.log($(this)[i].innerHTML)

}

}

});

$("p").print();

实例之注册验证

Title

li{

list-style: disc;;

}

img{

display: block;

height: 200px;

}

// 注意:

// 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

}

轮播图

轮播图

* {

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;

}

>

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("")

if(i==0){

$('ul').append("

"+(i+1)+"

")

}else{

$('ul').append("

"+(i+1)+"

")

}

})

$('.img').append("")

$('#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);

})

识别图中二维码,领取python全套视频资料