jquery自定义一个放大镜

jquery定义插件：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery3.6.0.js"></script><style type="text/css">div{width: 200px;height: 200px;}</style></head><body><div></div><div></div><script>// 1、jquery的插件，定义在jquery.fn的基础上的// 2、命名冲突的解决// 3、循环jquery对象中的每个元素// 4、在函数中，将jquery返回（this）(function($){$.fn.extend({randomColor:function(){// this指向的就是我们通过$选择器选取到的所有元素组成的伪数组function random(){var r=Math.floor(Math.random()*256);var g=Math.floor(Math.random()*256);var b=Math.floor(Math.random()*256);return 'rgb('+ r +','+ g +','+ b +')';}this.each(function(index){$(this).css({backgroundColor:random()})})return this;}})})(jQuery);$('div').randomColor();</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.magnifier .left{width: 240px;height: 150px;float: left;position: relative;}.magnifier .left img{width: 240px;height: 150px;}.magnifier .left .mask{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: black;opacity: 0.4;}.magnifier .float{width: 50px;height: 50px;background: hotpink;opacity: 0.5;position: absolute;left: 0;top: 0;}.magnifier .right{height: 200px;width: 200px;background-image: url(img/2.jpg) ;float: left;margin-left: 50px;}</style></head><body><div class="magnifier"><div class="left"><img src="./img/2.jpg" ><div class="float"></div><div class="mask"></div></div><div class="right"></div></div><script src="js/jquery3.6.0.js"></script><script>(function($){$.fn.extend({magnifier:function(){this.each(function(){var that=this;$('.left',this).mousemove(function (evt){var x=evt.offsetX;var y=evt.offsetY;var float=$('.float',this);x=x-float.width/2;y=y-float.height/2;if(x<0){x=0;}if(y<0){y=0;}if(x > $(this).width()-float.width()){x = $(this).width()-float.width();}if(y > $(this).height()-float.height()){y = $(this).height()-float.height();}float.css({left:x,top:y});$('.right',that).css({backgroundPosition:x*-4+'px' + y*-4+'px'})}).mouseover(function(){}).mouseout(function(){})});}})})(jQuery)$('.magnifier').magnifier();</script></body>
</html>

jquery自定义一个放大镜相关推荐

JQuery自定义插件详解之Banner图滚动插件
前言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示在线预览下载地址实例代码 <!DOCTYPE html> <html lang="en& ...
jQuery 自定义选择器
严格来说是自定义伪类选择器,不过也相当有意思了. 昨天我学习其中一个 jquery lazy load 源码的时候,看到末尾这么写的. /* Custom selectors for your con ...
jQuery是一个JavaScript库极大的简化JavaScript编程
jQuery是一个JavaScript库极大的简化JavaScript编程 1.jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScr ...
jQuery 是一个 JavaScript 库。
JQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库可以通过一行简单的标记被添加到网页中. jQuery是一个JavaScrip ...
jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件Magnify放大镜实现javascript图片放大功能博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459 有时 ...
php行事历,jQuery自定义日程表代码
特效描述:jQuery 自定义日程表.jQuery自定义日程表代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码我的日程正在加载数据... 非常抱歉,无法加载您的活动,请稍后再试 ...

jquery自定义一个放大镜

jquery自定义一个放大镜相关推荐

最新文章

热门文章