效果展示

准备工作

一只VSCode
Jquery源文件
一些JQ基础知识
一些Html+css+js的基础知识
一个清醒的大脑

重点知识须知

attr()与css()的区别

1. attr()主要是针对元素的属性进行操作，如img的src属性和alt属性，a链接的href属性等等
2. css()修改的是样式里面的属性，即是style里面的属性，两者的侧重点不同，可以这样简单的记忆，css样式中的属性在jquery中获得和修改用css()这个方法，其他的获得和修改属性用attr()方法

获取当前元素的索引

$("div").index(this);

案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><script src="js/Jquery.js"></script><script>$(document).ready(function() {var $Box;var index;$('div').mouseenter(function(e) {//图片路径var $image;//要添加的divvar $div = $('<div></div>').width(300).height(300)//获取鼠标当前指向div的索引位置index = $("div").index(this);//添加入盒$Box = $('div').eq(index).append($div);//设置背景图片$image = $Box.css('background-image')$Box.mousemove(function(e) {// values: e.clientX, e.clientY, e.pageX, e.pageY$div.css({//注意！！！！ 不加定位属性没有移动效果'position': 'absolute','border-radius': '150px','border': 'solid gray','background-image': $image,left: e.pageX + 50 + 'px',top: e.pageY + 50 + 'px'})});$Box.mouseleave(function() {$div.css("display", "none");});});})</script><style>div {width: 130px;height: 130px;background-size: 100%;border-radius: 75.5px;border: solid gray;}li {float: left;margin-left: 20px;list-style: none;}ul {height: 500px;width: 1000px;}</style>
</head><body><ul><li><div style="background-image: url(img/p1.png);"></div></li><li><div style="background-image: url(img/p2.png);"></div></li><li><div style="background-image: url(img/p3.png)"></div></li><li><div style="background-image: url(img/p4.png);"></div></li></ul>
</body></html>

总结

好好学习，天天向上

使用Jquery制作精美的图片展示效果相关推荐

15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
如何用Jquery做图片展示效果
一. 前言到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
Revealing图片展示效果（jQuery）
Revealing图片展示效果(jQuery),单击"更多信息"按钮,图片的缩略图将展现为全尺寸图片和附加信息,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用 ...
html超酷图片墙特效代码,超酷超绚精美图片展示效果代码(一)
超酷超绚精美图片展示效果代码(一) [ 发布者:未知┊来源:网页特效观止┊时间:2008-08-12┊浏览: 人次 ] 相关图片自己下载,所有的图片路径都是类似 http://www.jscode.c ...
小猿圈用jQuery实现手风琴图片展示效果
对web前端了解的同学会知道jQuery是现在前端中使用的框架之一,但是你知道jQuery可以做到一些你意想不到的效果吗?下面小猿圈web前端老师用jQuery实现手风琴图片展示效果,希望对你有所帮助 ...
jQuery实例：图片展示效果
原文地址为: jQuery实例:图片展示效果开始之前,我就喜欢先看一下效果: 张娜拉,韩国的 My Digital Story 不知道是什么图来的我的Logo,Studio拼错了都不知道,汗一个. ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
jqery图片展示效果
好久没更新了,加一个jqery图片展示效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...

使用Jquery制作精美的图片展示效果

文章目录

效果展示

准备工作

重点知识须知

attr()与css()的区别

获取当前元素的索引

案例代码

总结

使用Jquery制作精美的图片展示效果相关推荐

最新文章

热门文章