前端框架之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="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">       &lt;     </div>     <div class="button r" id="right">       &gt;     </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全套视频资料

原文地址：https://www.cnblogs.com/IT-Scavenger/p/9252251.html

时间： 2024-08-22 17:23:35

前端框架之jQuery（二）----轮播图,放大镜的相关文章

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

jQuery实现轮播图

我用的jQuery库jquery-3.2.1.js可以在官网下载:http://jquery.com/download/ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

84JS插件：jQuery版轮播图

一.代码分两个部分:1.HTML部分,根据注释处理即可:2.基于jQuery的play.js插件部分,这里为了展示效果,直接写在<html></html>下的<script></script>标签里.3.效果包含:自动轮播,焦点对齐,前进后退,直走不返,鼠标进入.轮播停止且前进后退图标出现,鼠标离开.轮播重启且前进后退图标隐藏.4.这里可以预览效果.二.轮播图原理说明:(1)轮播图(假设)有7张图片,“一”字排列,把第1张图片复制一次,放到第8张的位置,这样

Web前端原生JavaScript浅谈轮播图

1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住轮播的原理,这样才能把一个轮播图完美的呈现出来. 2.废话不多说,请看下面代码 1 //首先我们必须都明确,一个好的运动框架那必须是能够同时承载两种或多种以上需求的,所以我们应该避免单运动框架通过行内样式的局限性,就需要我们知道怎么去获取非行间样式 2 function getStyle(obj,a

使用jQuery实现轮播图

一共6张图片,每1.5m自动切换播放图片,鼠标在图片内则停止自动播放.可通过底部列表手动播放图片,也可通过图片两侧按钮手动点击切换图片.效果图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script src="https://libs.baidu.co

jQuery无缝轮播图思路详解-唯品会

效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap"> <!--大盒子上部分轮播图--> <div class="wrapUp"> <ul> <li class="cur"><a href="#"><img src="i

自己定义jquery插件轮播图

轮播图-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&

Celery框架 接口缓存, Celery框架, Django项目实现轮播图缓存更新

接口缓存 """ 1)什么是接口的后台缓存 前台访问后台接口,后台会优先从缓存(内存)中查找接口数据 如果有数据,直接对前台响应缓存数据 如果没有数据,与(mysql)数据库交互,得到数据,对前台响应,同时将数据进行缓存,以备下次使用 了解:前台缓存 - 前台在请求到接口数据后,在前台建立缓存,再发送同样请求时,发现前台缓存有数据,就不再对后台做请求了 2)什么的接口会进行接口缓存 i)接口会被大量访问:比如主页中的接口,几乎所有人都会访问,而且会重复访问 ii)在一定时间内

Jquery 实现轮播图

jq 轮播图 function banner_show(){ var left_btn = $("#banner_tag_left"); //获取左侧单击按钮 var right_btn = $("#banner_tag_right"); //获取右侧点击按钮 var Owidth = $("#banner ul li").width(); //获取单个图片宽度 var Oindex = $("#banner ul li");